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

<link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="../controls/settings_toggle_button.html">
<link rel="import" href="../controls/extension_controlled_indicator.html">
<link rel="import" href="../global_scroll_target_behavior.html">
<link rel="import" href="../prefs/prefs.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="password_edit_dialog.html">
<link rel="import" href="passwords_export_dialog.html">
<link rel="import" href="passwords_shared_css.html">
<link rel="import" href="password_list_item.html">

<dom-module id="passwords-section">
  <template>
    <style include="settings-shared passwords-shared">
      #savedPasswordsHeading {
        /* This adds enough padding so that the labels are aligned with the
         * columns. It is necessary due to the absence of the "more actions"
         * button in the heading.
         */
        -webkit-padding-end: calc(
          var(--cr-icon-ripple-size) + var(--cr-icon-button-margin-start));
      }

      #undoLabel {
        color: #fff;
        display: flex;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      #undoButton {
        -webkit-margin-end: 0;
        -webkit-margin-start: 32px;
        color: var(--google-blue-300);
        font-weight: 500;
        height: 32px;
        min-width: 52px;
        padding: 8px;
      }

      #undoToast {
        z-index: 1;
      }

      #exportImportMenuButton {
        -webkit-margin-end: 0;
      }
   </style>
    <settings-toggle-button id="passwordToggle"
        class="first"
        aria-label="$i18n{passwords}" no-extension-indicator
        label="$i18n{passwordsSavePasswordsLabel}"
        pref="{{prefs.credentials_enable_service}}">
    </settings-toggle-button>
    <template is="dom-if"
        if="[[prefs.credentials_enable_service.extensionId]]">
      <div class="settings-box continuation">
        <extension-controlled-indicator class="start"
            id="passwordsExtensionIndicator"
            extension-id="[[prefs.credentials_enable_service.extensionId]]"
            extension-name="[[
                prefs.credentials_enable_service.controlledByName]]"
            extension-can-be-disabled="[[
                prefs.credentials_enable_service.extensionCanBeDisabled]]">
        </extension-controlled-indicator>
      </div>
    </template>
    <settings-toggle-button id="autosigninCheckbox"
        class="three-line"
        pref="{{prefs.credentials_enable_autosignin}}"
        label="$i18n{passwordsAutosigninLabel}"
        sub-label="$i18n{passwordsAutosigninDescription}">
    </settings-toggle-button>
    <div id="manageLink" class="settings-box first two-line">
      <!-- This span lays out the url correctly, relative to the label. -->
      <span>$i18nRaw{managePasswordsLabel}</span>
    </div>
    <div class="settings-box first">
      <h2 class="start">$i18n{savedPasswordsHeading}</h2>
      <template is="dom-if"
          if="[[showImportOrExportPasswords_(
                    showExportPasswords_, showImportPasswords_)]]">
        <button is="paper-icon-button-light" id="exportImportMenuButton"
          class="icon-more-vert" on-click="onImportExportMenuTap_"
          title="$i18n{moreActions}" focus-type="exportImportMenuButton">
        </button>
      </template>
    </div>
    <div class="list-frame">
      <div id="savedPasswordsHeading" class="list-item column-header"
          hidden$="[[!hasSome_(savedPasswords)]]">
        <div class="website-column">$i18n{editPasswordWebsiteLabel}</div>
        <div class="username-column">
          $i18n{editPasswordUsernameLabel}
        </div>
        <div class="password-column">
          $i18n{editPasswordPasswordLabel}
        </div>
      </div>
      <iron-list id="passwordList" preserve-focus
          items="[[getFilteredPasswords_(savedPasswords, filter)]]"
          class="cr-separators list-with-header"
          scroll-target="[[subpageScrollTarget]]" risk-selection>
        <template>
          <password-list-item item="[[item]]" tabindex$="[[tabIndex]]"
              first$="[[!index]]" iron-list-tab-index="[[tabIndex]]"
              last-focused="{{lastFocused_}}">
          </password-list-item>
        </template>
      </iron-list>
      <div id="noPasswordsLabel" class="list-item"
          hidden$="[[hasSome_(savedPasswords)]]">
        $i18n{noPasswordsFound}
      </div>
    </div>
    <dialog is="cr-action-menu" id="menu">
      <button id="menuEditPassword" slot="item" class="dropdown-item"
          on-click="onMenuEditPasswordTap_">$i18n{passwordViewDetails}</button>
      <button id="menuRemovePassword" slot="item" class="dropdown-item"
          on-click="onMenuRemovePasswordTap_">$i18n{removePassword}</button>
    </dialog>
    <dialog is="cr-action-menu" id="exportImportMenu">
      <button id="menuImportPassword" slot="item" class="dropdown-item"
          on-click="onImportTap_" hidden="[[!showImportPasswords_]]">
        $i18n{import}
      </button>
      <button id="menuExportPassword" slot="item" class="dropdown-item"
          on-click="onExportTap_" hidden="[[!showExportPasswords_]]">
        $i18n{exportMenuItem}
      </button>
    </dialog>
    <template is="dom-if" if="[[showPasswordsExportDialog_]]" restamp>
      <passwords-export-dialog on-close="onPasswordsExportDialogClosed_">
      </passwords-export-dialog>
    </template>
    <template is="dom-if" if="[[showPasswordEditDialog_]]" restamp>
      <password-edit-dialog on-close="onPasswordEditDialogClosed_"
          item="[[activePassword.item]]">
      </password-edit-dialog>
    </template>
    <cr-toast id="undoToast" duration="[[toastDuration_]]">
      <div id="undoLabel">$i18n{passwordDeleted}</div>
      <paper-button id="undoButton" on-click="onUndoButtonTap_">
        $i18n{undoRemovePassword}
      </paper-button>
    </cr-toast>
    <div class="settings-box block first">
      <h2>$i18n{passwordExceptionsHeading}</h2>
    </div>
    <div class="list-frame vertical-list" id="passwordExceptionsList">
      <template is="dom-repeat" items="[[passwordExceptions]]"
          filter="[[passwordExceptionFilter_(filter)]]">
        <div class="list-item">
          <div class="start">
            <a id="exception" href="[[item.urls.link]]" target="_blank">
              [[item.urls.shown]]
            </a>
          </div>
          <button is="paper-icon-button-light" id="removeExceptionButton"
              class="icon-clear" on-click="onRemoveExceptionButtonTap_"
              tabindex$="[[tabIndex]]"
              title="$i18n{deletePasswordException}">
          </button>
        </div>
      </template>
      <div id="noExceptionsLabel" class="list-item"
          hidden$="[[hasSome_(passwordExceptions)]]">
        $i18n{noExceptionsFound}
      </div>
    </div>
  </template>
  <script src="passwords_section.js"></script>
</dom-module>