<link rel="import" href="chrome://resources/html/polymer.html">

<link rel="import" href="shared_style.html">
<link rel="import" href="shared_vars.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<dom-module id="app-management-permission-view-header">
  <template>
    <style include="app-management-shared-css paper-button-style">
      :host {
        align-items: center;
        border-top: var(--card-separator);
        display: flex;
      }

      #permission-view-header-icon {
        height: 26px;
        margin-inline-end: 8px;
        margin-inline-start: 24px;
        width: 26px;
      }
    </style>
    <paper-icon-button-light class="icon-arrow-back">
      <button id="closeButton" on-click="onClickBackButton_"
      aria-label="$i18n{back}">
        <paper-ripple class="circle"></paper-ripple>
      </button>
    </paper-icon-button-light>
    <img id="permission-view-header-icon" src="[[iconUrlFromId_(app)]]">
    <div class="page-title">[[app.title]]</div>
    <slot name="extra-right-buttons"></slot>
    <paper-button on-click="onClickUninstallButton_">
      $i18n{uninstall}
    </paper-button>
  </template>
  <script src="permission_view_header.js"></script>
</dom-module>