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

<link rel="import" href="chrome://resources/cr_elements/cr_checkbox/cr_checkbox.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
<link rel="import" href="chrome://resources/cr_elements/cr_expand_button/cr_expand_button.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/html/icon.html">
<link rel="import" href="chrome://resources/html/util.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.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-button/paper-button.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="sync_page.html">
<link rel="import" href="profile_info_browser_proxy.html">
<link rel="import" href="sync_browser_proxy.html">
<link rel="import" href="../icons.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="../passwords_and_forms_page/autofill_section.html">
<link rel="import" href="../passwords_and_forms_page/passwords_section.html">
<link rel="import" href="../passwords_and_forms_page/payments_section.html">
<link rel="import" href="../settings_shared_css.html">

<if expr="chromeos">
<link rel="import" href="account_manager.html">
<link rel="import" href="change_picture.html">
<link rel="import" href="chrome://resources/cr_elements/chromeos/cr_picture/cr_png_behavior.html">
<link rel="import" href="fingerprint_list.html">
<link rel="import" href="lock_screen.html">
<link rel="import" href="lock_state_behavior.html">
<link rel="import" href="users_page.html">
</if>
<if expr="not chromeos">
<link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast.html">
<link rel="import" href="sync_account_control.html">
<link rel="import" href="import_data_dialog.html">
<link rel="import" href="manage_profile.html">
</if>

<dom-module id="settings-people-page">
  <template>
    <style include="settings-shared iron-flex">
      setting-box.middle {
        /* Per spec, middle text is indented 20px in this section. */
        margin-inline-start: 20px;
      }

      #profile-icon {
        background: center / cover no-repeat;
        border-radius: 20px;
        flex-shrink: 0;
        height: 40px;
        width: 40px;
      }

      #managed-by-domain-name {
        font-weight: bold;
      }

      iron-icon[icon='cr:sync'] {
       --iron-icon-fill-color: var(--google-green-700);
      }

      #sync-status[actionable] iron-icon[icon='settings:sync-problem'] {
       --iron-icon-fill-color: var(--settings-error-color);
      }

      #sync-status[actionable].auth-error
          iron-icon[icon='settings:sync-disabled'] {
       --iron-icon-fill-color: var(--google-blue-500);
      }

      #sync-status:not([actionable]) .subpage-arrow {
        display: none;
      }

      cr-link-row {
        --cr-link-row-icon-width: 40px;
        border-top: var(--settings-separator-line);
      }

      .settings-box[actionable].sync-error #syncSecondary {
        color: var(--settings-error-color);
      }

      .icon-container {
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        width: 40px;
      }

      #disconnectDialog [slot=footer] .settings-box {
        --settings-box-row-padding: 0;
      }

      .delete-profile-warning {
        padding-bottom: 10px;
        padding-inline-end: var(--cr-section-padding);
        /* In order to line up with the checkbox text. */
        padding-inline-start: var(--cr-section-indent-padding);
        padding-top: 10px;
      }

      #wideFooter {
        /* Override the cr-dialog footer padding. */
        padding: 16px 0;
      }

<if expr="not chromeos">
      #toast {
        color: white;
        left: 0;
        z-index: 1;
      }

      :host-context([dir='rtl']) #toast {
        left: auto;
        right: 0;
      }

      settings-sync-account-control[showing-promo] {
        --promo-banner: {
          /* Make the banner image stay within setting-section's card border
             radius. */
          border-top-left-radius: var(--cr-card-border-radius);
          border-top-right-radius: var(--cr-card-border-radius);
        }
        /* When showing promo in this page, text should be larger. */
        --promo-description: {
          font-size: 0.9rem;
          line-height: 1.625rem;
        }
        --promo-title: {
          font-size: 1.1rem;
          line-height: 1.625rem;
        }
        --promo-separator: {
          display: none;
        }
      }
</if>
    </style>
    <settings-animated-pages id="pages" section="people"
        focus-config="[[focusConfig_]]">
      <neon-animatable route-path="default">
<if expr="not chromeos">
        <template is="dom-if" if="[[shouldShowSyncAccountControl_(diceEnabled_,
            syncStatus.syncSystemEnabled, syncStatus.signinAllowed)]]">
          <settings-sync-account-control
              sync-status="[[syncStatus]]"
              promo-label-with-account="$i18n{peopleSignInPrompt}"
              promo-label-with-no-account="$i18n{peopleSignInPrompt}"
              promo-secondary-label-with-account=
                  "$i18n{peopleSignInPromptSecondaryWithAccount}"
              promo-secondary-label-with-no-account=
                  "$i18n{peopleSignInPromptSecondaryWithNoAccount}">
          </settings-sync-account-control>
        </template>
        <template is="dom-if" if="[[!diceEnabled_]]">
</if>
          <div id="picture-subpage-trigger" class="settings-box first two-line">
            <template is="dom-if" if="[[syncStatus]]">
              <div id="profile-icon" on-click="onProfileTap_" actionable
                  style="background-image: [[getIconImageSet_(
                      profileIconUrl_)]]">
              </div>
              <div class="middle two-line no-min-width" on-click="onProfileTap_"
                  actionable>
                <div class="flex text-elide">
                  <span id="profile-name">[[profileName_]]</span>
                  <div class="secondary" hidden="[[!syncStatus.signedIn]]">
                    [[syncStatus.signedInUsername]]
                  </div>
                </div>
<if expr="not chromeos">
                <paper-icon-button-light class="subpage-arrow">
                  <button aria-label="$i18n{editPerson}"
                      aria-describedby="profile-name"></button>
                </paper-icon-button-light>
</if>
<if expr="chromeos">
                <paper-icon-button-light class="subpage-arrow">
                  <button aria-label="$i18n{changePictureTitle}"
                      aria-describedby="profile-name"></button>
                </paper-icon-button-light>
</if>
              </div>
<if expr="not chromeos">
              <template is="dom-if" if="[[showSignin_(syncStatus)]]">
                <div class="separator"></div>
                <paper-button class="action-button" on-click="onSigninTap_"
                    disabled="[[syncStatus.setupInProgress]]">
                  $i18n{syncSignin}
                </paper-button>
              </template>
              <template is="dom-if" if="[[syncStatus.signedIn]]">
                <div class="separator"></div>
                <paper-button id="disconnectButton" class="secondary-button"
                    on-click="onDisconnectTap_"
                    disabled="[[syncStatus.setupInProgress]]">
                  $i18n{syncDisconnect}
                </paper-button>
              </template>
</if>
            </template>
          </div>
<if expr="not chromeos">
        </template> <!-- if="[[!diceEnabled_]]" -->
</if>

        <template is="dom-if" if="[[!syncStatus.signedIn]]">
<if expr="not chromeos">
          <template is="dom-if" if="[[!diceEnabled_]]">
</if>
            <div class="settings-box two-line" id="sync-overview"
                hidden="[[!syncStatus.signinAllowed]]">
              <div class="start">
                $i18n{syncOverview}
                <a target="_blank" href="$i18n{syncLearnMoreUrl}">
                  $i18n{learnMore}
                </a>
              </div>
            </div>
<if expr="not chromeos">
          </template> <!-- if="[[!diceEnabled_]]" -->
</if>
          <div class="settings-box" hidden="[[syncStatus.signinAllowed]]">
            $i18n{syncDisabledByAdministrator}
          </div>
        </template>

<if expr="not chromeos">
        <template is="dom-if" if="[[syncStatus.domain]]">
          <div class="settings-box">
            <div class="icon-container">
              <iron-icon icon="cr20:domain"></iron-icon>
            </div>
            <div class="middle"
                inner-h-t-m-l="[[getDomainHtml_(syncStatus.domain)]]">
            </div>
          </div>
        </template>
</if>

        <template is="dom-if" if="[[isAdvancedSyncSettingsVisible_(
            syncStatus, unifiedConsentEnabled_)]]">
          <div class$="settings-box two-line
                  [[getSyncStatusClass_(syncStatus)]]"
              on-click="onSyncTap_" id="sync-status"
              actionable$="[[isSyncStatusActionable_(syncStatus)]]">
            <div class="icon-container">
              <iron-icon id="sync-icon" icon$="[[getSyncIcon_(syncStatus)]]">
              </iron-icon>
            </div>
            <div class="middle">
              $i18n{sync}
              <div class="secondary" id="syncSecondary">
                [[syncStatus.statusText]]
              </div>
            </div>
            <paper-icon-button-light class="subpage-arrow">
              <button aria-label="$i18n{sync}"
                  aria-describedby="syncSecondary"></button>
            </paper-icon-button-light>
          </div>
        </template>

        <template is="dom-if" if="[[unifiedConsentEnabled_]]">
          <cr-link-row id="sync-setup"
              start-icon="settings20:googleg"
              label="$i18n{syncAndNonPersonalizedServices}"
              icon-class="subpage-arrow" on-click="onSyncTap_">
          </cr-link-row>
        </template>

        <template is="dom-if" if="[[autofillHomeEnabled]]">
          <cr-link-row id="passwordManagerButton"
               start-icon="settings20:vpn-key"
               label="$i18n{passwords}" icon-class="subpage-arrow"
               on-click="onPasswordsTap_"></cr-link-row>
          <cr-link-row id="paymentManagerButton"
               start-icon="settings20:credit-card"
               label="$i18n{creditCards}" icon-class="subpage-arrow"
               on-click="onPaymentsTap_"></cr-link-row>
          <cr-link-row id="addressesManagerButton"
               start-icon="settings20:location-on"
               label="$i18n{addressesTitle}" icon-class="subpage-arrow"
               on-click="onAutofillTap_"></cr-link-row>
        </template>

<if expr="not chromeos">
        <template is="dom-if" if="[[diceEnabled_]]">
          <div class="settings-box" id="edit-profile" on-click="onProfileTap_"
              actionable>
            <div class="start">$i18n{profileNameAndPicture}</div>
            <paper-icon-button-light class="subpage-arrow">
              <button aria-label="$i18n{editPerson}"></button>
            </paper-icon-button-light>
          </div>
        </template>
</if>

<if expr="chromeos">
        <div id="lock-screen-subpage-trigger" class="settings-box two-line"
            actionable on-click="onConfigureLockTap_">
          <div class="start">
            [[selectLockScreenTitleString(hasPinLogin)]]
            <div class="secondary" id="lockScreenSecondary">
              [[getPasswordState_(hasPin,
                                  prefs.settings.enable_screen_lock.value)]]
            </div>
          </div>
          <paper-icon-button-light class="subpage-arrow">
            <button
                aria-label$="[[selectLockScreenTitleString(hasPinLogin)]]"
                aria-describedby="lockScreenSecondary"></button>
          </paper-icon-button-light>
        </div>

        <template is="dom-if" if="[[isAccountManagerEnabled_]]">
          <div id="account-manager-subpage-trigger" class="settings-box"
              actionable on-click="onAccountManagerTap_">
            <div class="start">$i18n{accountManagerSubMenuLabel}</div>
            <paper-icon-button-light class="subpage-arrow">
              <button aria-label="$i18n{accountManagerSubMenuLabel}"></button>
            </paper-icon-button-light>
          </div>
        </template>
</if>

        <div id="manage-other-people-subpage-trigger"
            class="settings-box" on-click="onManageOtherPeople_" actionable
            hidden="[[isChild_]]">
          <div class="start">$i18n{manageOtherPeople}</div>
          <paper-icon-button-light class="subpage-arrow">
            <button aria-label="$i18n{manageOtherPeople}"></button>
          </paper-icon-button-light>
        </div>

<if expr="not chromeos">
        <div class="settings-box" on-click="onImportDataTap_" actionable>
          <div class="start">$i18n{importTitle}</div>
          <paper-icon-button-light class="subpage-arrow">
            <button id="importDataDialogTrigger"
                aria-label="$i18n{importTitle}">
            </button>
          </paper-icon-button-light>
        </div>
</if>

      </neon-animatable>
      <template is="dom-if" route-path="/syncSetup"
          no-search="[[!isAdvancedSyncSettingsVisible_(
              syncStatus, unifiedConsentEnabled_)]]">
        <settings-subpage
            associated-control="[[$$('#sync-status')]]"
            page-title="$i18n{syncPageTitle}"
            learn-more-url="$i18n{syncAndGoogleServicesLearnMoreURL}"
            no-search$="[[!isAdvancedSyncSettingsVisible_(syncStatus,
                unifiedConsentEnabled_)]]">
          <settings-sync-page
<if expr="not chromeos">
              dice-enabled="[[diceEnabled_]]"
</if>
              unified-consent-enabled="[[unifiedConsentEnabled_]]"
              sync-status="[[syncStatus]]" prefs="{{prefs}}"
              page-visibility="[[pageVisibility.privacy]]">
          </settings-sync-page>
        </settings-subpage>
      </template>

      <template is="dom-if" if="[[autofillHomeEnabled]]">
        <template is="dom-if" route-path="/passwords">
          <settings-subpage
              associated-control="[[$$('#passwordManagerButton')]]"
              page-title="$i18n{passwords}"
              learn-more-url="$i18n{passwordManagerLearnMoreURL}"
              search-label="$i18n{searchPasswords}"
              search-term="{{passwordFilter_}}">
            <passwords-section id="passwordSection" filter="[[passwordFilter_]]"
                prefs="{{prefs}}">
            </passwords-section>
          </settings-subpage>
        </template>
        <template is="dom-if" route-path="/autofill">
          <settings-subpage
              associated-control="[[$$('#addressesManagerButton')]]"
              page-title="$i18n{autofill}">
            <settings-autofill-section id="autofillSection" prefs="{{prefs}}">
            </settings-autofill-section>
          </settings-subpage>
        </template>
        <template is="dom-if" route-path="/payments">
          <settings-subpage
              associated-control="[[$$('#paymentManagerButton')]]"
              page-title="$i18n{creditCards}">
            <settings-payments-section id="paymentsSection" prefs="{{prefs}}">
            </settings-payments-section>
          </settings-subpage>
        </template>
      </template>

<if expr="chromeos">
      <template is="dom-if" route-path="/lockScreen">
        <settings-subpage
            page-title="[[selectLockScreenTitleString(hasPinLogin)]]"
            associated-control="[[$$('#lock-screen-subpage-trigger')]]">
          <settings-lock-screen
            prefs="{{prefs}}">
          </settings-lock-screen>
        </settings-subpage>
      </template>
      <template is="dom-if" if="[[fingerprintUnlockEnabled_]]">
        <template is="dom-if" route-path="/lockScreen/fingerprint" no-search>
          <settings-subpage page-title="$i18n{lockScreenFingerprintTitle}">
            <settings-fingerprint-list></settings-fingerprint-list>
          </settings-subpage>
        </template>
      </template>
      <template is="dom-if" route-path="/accounts">
        <settings-subpage
            associated-control="[[$$('#manage-other-people-subpage-trigger')]]"
            page-title="$i18n{manageOtherPeople}">
          <settings-users-page prefs="{{prefs}}">
          </settings-users-page>
        </settings-subpage>
      </template>
      <template is="dom-if" route-path="/changePicture">
        <settings-subpage
          associated-control="[[$$('#picture-subpage-trigger')]]"
          page-title="$i18n{changePictureTitle}">
          <settings-change-picture></settings-change-picture>
        </settings-subpage>
      </template>
      <template is="dom-if" if="[[isAccountManagerEnabled_]]">
        <template is="dom-if" route-path="/accountManager">
          <settings-subpage
              associated-control="[[$$('#account-manager-subpage-trigger')]]"
              page-title="$i18n{accountManagerPageTitle}">
            <settings-account-manager></settings-account-manager>
          </settings-subpage>
        </template>
      </template>
</if>
<if expr="not chromeos">
      <template is="dom-if" route-path="/manageProfile">
        <settings-subpage
            associated-control="[[getEditPersonAssocControl_(diceEnabled_)]]"
            page-title="$i18n{editPerson}">
          <settings-manage-profile profile-name="[[profileName_]]"
              sync-status="[[syncStatus]]">
          </settings-manage-profile>
        </settings-subpage>
      </template>
</if>
    </settings-animated-pages>

    <template is="dom-if" if="[[showDisconnectDialog_]]" restamp>
      <cr-dialog id="disconnectDialog"
          ignore-popstate ignore-enter-key
          on-close="onDisconnectClosed_" close-text="$i18n{close}">
        <div slot="title">$i18n{syncDisconnectTitle}</div>
        <div slot="body">
          <div inner-h-t-m-l="[[
              getDisconnectExplanationHtml_(syncStatus.domain)]]">
          </div>
        </div>
        <div slot="button-container">
          <paper-button on-click="onDisconnectCancel_" class="cancel-button">
            $i18n{cancel}
          </paper-button>
          <paper-button id="disconnectConfirm" class="action-button"
              hidden="[[syncStatus.domain]]" on-click="onDisconnectConfirm_">
            $i18n{syncDisconnect}
          </paper-button>
          <paper-button id="disconnectManagedProfileConfirm"
              class="action-button" hidden="[[!syncStatus.domain]]"
              on-click="onDisconnectConfirm_">
            $i18n{syncDisconnectConfirm}
          </paper-button>
        </div>
<if expr="(not chromeos and is_posix) or is_win or is_macosx">
        <template is="dom-if" if="[[!syncStatus.domain]]">
          <div id="wideFooter" slot="footer">
            <div class="settings-box first">
              <cr-checkbox id="deleteProfile" class="start"
                  checked="{{deleteProfile_}}">
                $i18n{syncDisconnectDeleteProfile}
              </cr-checkbox>
              <cr-expand-button expanded="{{deleteProfileWarningVisible_}}"
                  alt="$i18n{deleteProfileWarningExpandA11yLabel}">
              </cr-expand-button>
            </div>
            <iron-collapse opened="[[deleteProfileWarningVisible_]]">
              <div class="delete-profile-warning">
                [[deleteProfileWarning_]]
              </div>
            </iron-collapse>
          </div>
        </template>
</if>
      </cr-dialog>
    </template>

    <template is="dom-if" if="[[showImportDataDialog_]]" restamp>
      <settings-import-data-dialog prefs="{{prefs}}"
          on-close="onImportDataDialogClosed_">
      </settings-import-data-dialog>
    </template>
<if expr="not chromeos">
    <cr-toast duration="3000" id="toast">
      $i18n{syncSettingsSavedToast}
    </cr-toast>
</if>
  </template>
  <script src="people_page.js"></script>
</dom-module>