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

<link rel="import" href="browser_proxy.html">
<link rel="import" href="constants.html">
<link rel="import" href="metadata_view.html">
<link rel="import" href="permission_item.html">
<link rel="import" href="shared_style.html">
<link rel="import" href="shared_vars.html">
<link rel="import" href="permission_view_header.html">
<link rel="import" href="store_client.html">
<link rel="import" href="chrome://resources/cr_elements/cr_icons_css.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.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/html/icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.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-pwa-permission-view">
  <template>
    <style include="app-management-shared-css cr-icons paper-button-style">
    #permission-list {
      display: flex;
      flex-direction: column;
    }

    .control-divider {
      background: var(--control-separator-color);
      height: 24px;
      margin: 0 24px;
      width: 1px;
    }

    #site-settings-button {
      --paper-button-ink-color: none;
      border: none;
      color: var(--secondary-text-color);
      display: flex;
      font-size: 12px;
      font-weight: var(--secondary-font-weight);
    }

    #site-settings-icon {
      display: flex;
      margin-inline-end: 24px;
      margin-inline-start: 0;
    }

    </style>
    <app-management-permission-view-header app="[[app_]]">
      <div slot="extra-right-buttons">
        <paper-button id="site-settings-button">
          $i18n{openSiteSettings}
          <paper-icon-button-light id="site-settings-icon"
              class="icon-external">
            <button></button>
          </paper-icon-button-light>
        </paper-button>
      </div>
    </app-management-permission-view-header>

    <div id="permission-list" class="card-container">
      <app-management-permission-item app="[[app_]]"
        permission-label="$i18n{notifications}"
        permission-type="NOTIFICATIONS">
      </app-management-permission-item>
      <span class="permission-row"
          on-click="toggleListExpanded_">
        <span class="header-text">$i18n{permissions}</span>
        <span class="permission-row-controls">
          <paper-icon-button-light>
            <button>
              <iron-icon icon="[[getCollapsedIcon_(listExpanded_)]]">
              </iron-icon>
            </button>
          </paper-icon-button-light>
          <div class="control-divider"></div>
          <cr-toggle class="left-separated-control"></cr-toggle>
        </span>
      </span>
      <iron-collapse opened="[[listExpanded_]]">
        <app-management-permission-item app="[[app_]]"
          permission-label="$i18n{location}"
          permission-type="LOCATION">
        </app-management-permission-item>
        <app-management-permission-item app="[[app_]]"
          permission-label="$i18n{camera}"
          permission-type="CAMERA">
        </app-management-permission-item>
        <app-management-permission-item app="[[app_]]"
          permission-label="$i18n{microphone}"
          permission-type="MICROPHONE">
        </app-management-permission-item>
      </iron-collapse>
    </div>
    <app-management-metadata-view app="[[app_]]"></app-management-metadata-view>
  </template>
  <script src="pwa_permission_view.js"></script>
</dom-module>