<link rel="import" href="chrome://resources/html/assert.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/neon-animation/neon-animatable.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button-light.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="/passwords_and_forms_page/autofill_section.html">
<link rel="import" href="/passwords_and_forms_page/passwords_section.html">
<link rel="import" href="/prefs/prefs.html">
<link rel="import" href="/prefs/prefs_behavior.html">
<link rel="import" href="/route.html">
<link rel="import" href="/settings_page/settings_animated_pages.html">
<link rel="import" href="/settings_page/settings_subpage.html">
<link rel="import" href="/settings_shared_css.html">

<dom-module id="settings-passwords-and-forms-page">
  <template>
    <style include="settings-shared"></style>
    <settings-animated-pages id="pages" section="passwordsAndForms">
      <neon-animatable route-path="default">
        <div class="settings-box first two-line">
          <div class="start two-line" on-tap="onAutofillTap_"
              id="autofillManagerButton"
              actionable$="[[prefs.autofill.enabled.value]]">
            <div class="flex">
              <div>$i18n{autofill}</div>
              <div class="secondary">$i18n{autofillDetail}</div>
            </div>
            <button class="subpage-arrow" is="paper-icon-button-light"></button>
          </div>
          <div class="secondary-action">
            <paper-toggle-button id="autofillToggle"
                checked="{{prefs.autofill.enabled.value}}">
            </paper-toggle-button>
          </div>
        </div>
        <div class="settings-box two-line">
          <div class="start two-line" on-tap="onPasswordsTap_"
              id="passwordManagerButton"
              actionable$="[[prefs.profile.password_manager_enabled.value]]">
            <div class="flex">
              <div>$i18n{passwords}</div>
              <div class="secondary">$i18n{passwordsDetail}</div>
            </div>
            <button class="subpage-arrow" is="paper-icon-button-light"></button>
          </div>
          <div class="secondary-action">
            <paper-toggle-button id="passwordToggle"
                checked="{{prefs.profile.password_manager_enabled.value}}">
            </paper-toggle-button>
          </div>
        </div>
      </neon-animatable>
      <template is="dom-if" route-path="/autofill">
        <settings-subpage
            associated-control="[[$$('#autofillManagerButton')]]"
            page-title="$i18n{autofill}">
          <settings-autofill-section id="autofillSection"
              addresses="[[addresses]]" credit-cards="[[creditCards]]">
          </settings-autofill-section>
        </settings-subpage>
      </template>
      <template is="dom-if" route-path="/passwords">
        <settings-subpage
            associated-control="[[$$('#passwordManagerButton')]]"
            page-title="$i18n{passwords}"
            search-label="$i18n{searchPasswords}"
            search-term="{{passwordFilter_}}">
          <passwords-section saved-passwords="[[savedPasswords]]"
              id="passwordSection" password-exceptions="[[passwordExceptions]]"
              filter="[[passwordFilter_]]" prefs="{{prefs}}">
          </passwords-section>
        </settings-subpage>
      </template>
    </settings-animated-pages>
  </template>
  <script src="passwords_and_forms_page.js"></script>
</dom-module>
