<link rel="import" href="chrome://resources/cr_elements/cr_profile_avatar_selector/cr_profile_avatar_selector.html">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/shadow.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="/i18n_setup.html">
<link rel="import" href="/people_page/manage_profile_browser_proxy.html">
<link rel="import" href="/route.html">
<link rel="import" href="/settings_shared_css.html">

<dom-module id="settings-manage-profile">
  <template>
    <style include="settings-shared">
      #selector {
        margin: 16px 20px;
      }
    </style>
    <div class="settings-box first">
      <paper-input id="name" value="[[profileName]]" pattern=".*\S.*"
          auto-validate required on-change="onProfileNameChanged_"
          disabled="[[isProfileNameDisabled_(syncStatus)]]">
      </paper-input>
    </div>
    <template is="dom-if" if="[[isProfileShortcutsEnabled_]]">
      <div class="settings-box first">
        <div class="flex">$i18n{showShortcutLabel}</div>
        <paper-toggle-button id="hasShortcutToggle"
            checked="{{hasProfileShortcut_}}"
            on-change="onHasProfileShortcutChange_">
        </paper-toggle-button>
      </div>
    </template>
    <cr-profile-avatar-selector id="selector" avatars="[[availableIcons]]"
        selected-avatar-url="{{profileIconUrl}}"
        on-iron-activate="onIconActivate_">
    </cr-profile-avatar-selector>
  </template>
  <script src="manage_profile.js"></script>
</dom-module>
