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

<link rel="import" href="chrome://apps/browser_proxy.html">
<link rel="import" href="chrome://apps/shared_style.html">
<link rel="import" href="chrome://apps/shared_vars.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/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-header {
      align-items: center;
      border-top: var(--card-separator);
      display: flex;
    }

    #app-title {
      flex: 1;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #site-settings-button {
      color: var(--secondary-text-color);
      font-size: 12px;
    }

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

    #permission-list {
      display: flex;
      flex-direction: column;
    }

    .permission-row {
      align-items: center;
      border-top: var(--card-separator);
      display: inline-flex;
      height: 62px;
      justify-content: space-between;
      padding: 0 24px;
    }

    .permission-row:first-child {
      border-style: none;
    }

    .permission-row-controls {
      align-items: center;
      display: inline-flex;
    }

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

    <div id="permission-header">
      <paper-icon-button-light class="icon-arrow-back">
          <button id="closeButton" aria-label="$i18n{back}">
            <paper-ripple class="circle"></paper-ripple>
          </button>
      </paper-icon-button-light>
      <img class="permission-view-header-icon" src="[[iconUrlFromId_(app_)]]">
      <div id="app-title">[[app_.title]]</div>
      <div id="site-settings-button">$i18n{openSiteSettings}</div>
      <paper-icon-button-light id="site-settings-icon" class="icon-external">
          <button aria-label="$i18n{openSiteSettings}"></button>
      </paper-icon-button-light>
      <paper-button class="secondary-button" role="button"
          tabindex="0" aria-disabled="false" elevation="0">
        $i18n{uninstall}
      </paper-button>
    </div>

    <div id="permission-list" class="card-container">
      <span class="permission-row">
        <div class="header-text">$i18n{notifications}</div>
        <cr-toggle aria-pressed="false" role="button" tabindex="0">
        </cr-toggle>
      </span>
      <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 aria-pressed="false" role="button" tabindex="0"
              class="left-separated-control">
          </cr-toggle>
        </span>
      </span>
    </div>
  </template>
  <script src="pwa_permission_view.js"></script>
</dom-module>