<!-- Copyright 2016 The Chromium Authors. All rights reserved.
     Use of this source code is governed by a BSD-style license that can be
     found in the LICENSE file. -->

<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-iconset-svg/iron-iconset-svg.html">

<link rel="import" href="/components/common_styles.html">
<link rel="import" href="/components/hd_iron_icon.html">
<link rel="import" href="/components/oobe_i18n_behavior.html">
<link rel="import" href="/components/oobe_dialog.html">

<iron-iconset-svg name="oobe-welcome-32" size="32">
  <svg>
    <defs>
      <g id="accessibility" fill-rule="evenodd">
        <path d="M16 2.667c1.467 0 2.667 1.184 2.667 2.633 0 1.448-1.2 2.632-2.667 2.632-1.467 0-2.667-1.184-2.667-2.632 0-1.45 1.2-2.633 2.667-2.633zm4 9.215v16.785h-3v-7.9h-2v7.9h-3V11.882H4V8.92h24v2.962h-8z"></path>
      </g>
      <g id="language" fill-rule="evenodd">
        <path d="M15.987 2.667C8.627 2.667 2.667 8.64 2.667 16s5.96 13.333 13.32 13.333c7.373 0 13.346-5.973 13.346-13.333S23.36 2.667 15.987 2.667zm9.24 8h-3.934C20.867 9 20.253 7.4 19.453 5.92c2.454.84 4.494 2.547 5.774 4.747zM16 5.387c1.107 1.6 1.973 3.373 2.547 5.28h-5.094c.574-1.907 1.44-3.68 2.547-5.28zM5.68 18.667c-.213-.854-.347-1.747-.347-2.667 0-.92.134-1.813.347-2.667h4.507C10.08 14.213 10 15.093 10 16c0 .907.08 1.787.187 2.667H5.68zm1.093 2.666h3.934c.426 1.667 1.04 3.267 1.84 4.747-2.454-.84-4.494-2.533-5.774-4.747zm3.934-10.666H6.773c1.28-2.214 3.32-3.907 5.774-4.747-.8 1.48-1.414 3.08-1.84 4.747zM16 26.613c-1.107-1.6-1.973-3.373-2.547-5.28h5.094c-.574 1.907-1.44 3.68-2.547 5.28zm3.12-7.946h-6.24c-.12-.88-.213-1.76-.213-2.667 0-.907.093-1.8.213-2.667h6.24c.12.867.213 1.76.213 2.667 0 .907-.093 1.787-.213 2.667zm.333 7.413c.8-1.48 1.414-3.08 1.84-4.747h3.934c-1.28 2.2-3.32 3.907-5.774 4.747zm2.36-7.413c.107-.88.187-1.76.187-2.667 0-.907-.08-1.787-.187-2.667h4.507c.213.854.347 1.747.347 2.667 0 .92-.134 1.813-.347 2.667h-4.507z"></path>
      </g>
      <g id="settings" fill="none" fill-rule="evenodd">
        <path d="M0 0h32v32H0z"></path>
        <path d="M25.907 17.3c.053-.427.093-.86.093-1.3 0-.44-.04-.873-.093-1.3l2.82-2.207c.253-.2.326-.56.16-.853L26.22 7.02a.66.66 0 0 0-.813-.287l-3.32 1.34a10.117 10.117 0 0 0-2.254-1.313l-.5-3.533a.686.686 0 0 0-.666-.56h-5.334a.673.673 0 0 0-.66.56l-.5 3.533c-.813.34-1.566.78-2.253 1.313L6.6 6.733a.667.667 0 0 0-.813.287L3.12 11.64a.668.668 0 0 0 .16.853L6.093 14.7C6.04 15.127 6 15.56 6 16c0 .44.04.873.093 1.3L3.28 19.507a.665.665 0 0 0-.16.853l2.667 4.62c.166.287.513.407.813.287l3.32-1.34c.687.526 1.44.973 2.253 1.313l.5 3.533c.054.314.327.56.66.56h5.334a.673.673 0 0 0 .66-.56l.5-3.533a9.867 9.867 0 0 0 2.253-1.313l3.32 1.34c.3.113.647 0 .813-.287l2.667-4.62a.668.668 0 0 0-.16-.853L25.907 17.3zM16 20.667A4.663 4.663 0 0 1 11.333 16 4.663 4.663 0 0 1 16 11.333 4.663 4.663 0 0 1 20.667 16 4.663 4.663 0 0 1 16 20.667z" fill="#4285F4" fill-rule="nonzero"></path>
      </g>
      <g id="timezone" fill-rule="evenodd">
        <path d="M15.993 2.667C8.627 2.667 2.667 8.633 2.667 16s5.96 13.333 13.326 13.333c7.367 0 13.34-5.966 13.34-13.333S23.36 2.667 15.993 2.667zm.007 24c-5.893 0-10.667-4.774-10.667-10.667S10.107 5.333 16 5.333 26.667 10.107 26.667 16 21.893 26.667 16 26.667z"></path>
        <path d="M16.667 9.333h-2v8l6.993 4.2 1.007-1.64-6-3.56"></path>
      </g>
    </defs>
  </svg>
</iron-iconset-svg>

<iron-iconset-svg name="oobe-welcome-64" size="64">
  <svg>
    <defs>
      <g id="accessibility" fill-rule="evenodd">
        <path d="M32 5.333c2.933 0 5.333 2.415 5.333 5.367 0 2.95-2.4 5.366-5.333 5.366-2.933 0-5.333-2.415-5.333-5.366 0-2.952 2.4-5.367 5.333-5.367zM40 24v35h-5V43h-6v16.006h-5V24H8v-4.915h48V24H40z"></path>
      </g>
      <g id="language" fill-rule="evenodd">
        <text font-family="RobotoMono-Regular, Roboto Mono" font-size="20" transform="translate(0 -71)">
          <tspan x="1" y="19">Language</tspan>
        </text>
        <path d="M31.973 5.333C17.253 5.333 5.333 17.28 5.333 32c0 14.72 11.92 26.667 26.64 26.667C46.72 58.667 58.667 46.72 58.667 32c0-14.72-11.947-26.667-26.694-26.667zm18.48 16h-7.866c-.854-3.333-2.08-6.533-3.68-9.493 4.906 1.68 8.986 5.093 11.546 9.493zM32 10.773c2.213 3.2 3.947 6.747 5.093 10.56H26.907c1.146-3.813 2.88-7.36 5.093-10.56zm-20.64 26.56c-.427-1.706-.693-3.493-.693-5.333 0-1.84.266-3.627.693-5.333h9.013C20.16 28.427 20 30.187 20 32c0 1.813.16 3.573.373 5.333H11.36zm2.187 5.334h7.866c.854 3.333 2.08 6.533 3.68 9.493-4.906-1.68-8.986-5.067-11.546-9.493zm7.866-21.334h-7.866c2.56-4.426 6.64-7.813 11.546-9.493-1.6 2.96-2.826 6.16-3.68 9.493zM32 53.227c-2.213-3.2-3.947-6.747-5.093-10.56h10.186c-1.146 3.813-2.88 7.36-5.093 10.56zm6.24-15.894H25.76c-.24-1.76-.427-3.52-.427-5.333 0-1.813.187-3.6.427-5.333h12.48c.24 1.733.427 3.52.427 5.333 0 1.813-.187 3.573-.427 5.333zm.667 14.827c1.6-2.96 2.826-6.16 3.68-9.493h7.866c-2.56 4.4-6.64 7.813-11.546 9.493zm4.72-14.827c.213-1.76.373-3.52.373-5.333 0-1.813-.16-3.573-.373-5.333h9.013c.427 1.706.693 3.493.693 5.333 0 1.84-.266 3.627-.693 5.333h-9.013z"></path>
      </g>
      <g id="settings" fill="none" fill-rule="evenodd">
        <path d="M0 0h64v64H0z"></path>
        <path d="M51.813 34.6c.107-.853.187-1.72.187-2.6 0-.88-.08-1.747-.187-2.6l5.64-4.413c.507-.4.654-1.12.32-1.707l-5.333-9.24a1.32 1.32 0 0 0-1.627-.573l-6.64 2.68a20.234 20.234 0 0 0-4.506-2.627l-1-7.067a1.371 1.371 0 0 0-1.334-1.12H26.667c-.667 0-1.214.494-1.32 1.12l-1 7.067a19.734 19.734 0 0 0-4.507 2.627l-6.64-2.68c-.6-.227-1.293 0-1.627.573L6.24 23.28a1.336 1.336 0 0 0 .32 1.707l5.627 4.413C12.08 30.253 12 31.12 12 32c0 .88.08 1.747.187 2.6L6.56 39.013a1.33 1.33 0 0 0-.32 1.707l5.333 9.24c.334.573 1.027.813 1.627.573l6.64-2.68a20.234 20.234 0 0 0 4.507 2.627l1 7.067c.106.626.653 1.12 1.32 1.12h10.666c.667 0 1.214-.494 1.32-1.12l1-7.067a19.734 19.734 0 0 0 4.507-2.627l6.64 2.68c.6.227 1.293 0 1.627-.573l5.333-9.24a1.336 1.336 0 0 0-.32-1.707L51.813 34.6zM32 41.333A9.327 9.327 0 0 1 22.667 32 9.327 9.327 0 0 1 32 22.667 9.327 9.327 0 0 1 41.333 32 9.327 9.327 0 0 1 32 41.333z" fill="#4285F4" fill-rule="nonzero"></path>
      </g>
      <g id="timezone" fill-rule="evenodd">
        <path d="M31.987 5.333C17.253 5.333 5.333 17.267 5.333 32c0 14.733 11.92 26.667 26.654 26.667 14.733 0 26.68-11.934 26.68-26.667 0-14.733-11.947-26.667-26.68-26.667zm.013 48c-11.787 0-21.333-9.546-21.333-21.333 0-11.787 9.546-21.333 21.333-21.333 11.787 0 21.333 9.546 21.333 21.333 0 11.787-9.546 21.333-21.333 21.333z"></path>
        <path d="M33.333 18.667h-4v16l13.987 8.4 2.013-3.28-12-7.12"></path>
      </g>
    </defs>
  </svg>
</iron-iconset-svg>

<dom-module id="oobe-welcome-element">
  <template>
    <style include="oobe-dialog-host"></style>
    <link rel="stylesheet" href="oobe_welcome.css">
    <oobe-welcome-dialog id="welcomeScreen" role="dialog" for-step="greeting"
        aria-label$="[[i18nDynamic(locale, 'welcomeScreenGreeting')]]"
        current-language="[[currentLanguage]]"
        on-language-button-clicked="onWelcomeSelectLanguageButtonClicked_"
        on-accessibility-button-clicked="onWelcomeAccessibilityButtonClicked_"
        on-timezone-button-clicked="onWelcomeTimezoneButtonClicked_"
        on-next-button-clicked="onWelcomeNextButtonClicked_"
        on-enable-debugging-clicked="onEnableDebuggingClicked_"
        on-launch-advanced-options="onWelcomeLaunchAdvancedOptions_"
        on-chromevox-hint-accepted="onChromeVoxHintAccepted_"
        on-chromevox-hint-dismissed="onChromeVoxHintDismissed_"
        timezone-button-visible=
            "[[isTimezoneButtonVisible_(highlightStrength)]]"
        debugging-link-visible="[[debuggingLinkVisible_]]">
    </oobe-welcome-dialog>
    <oobe-dialog id="languageScreen" role="dialog" for-step="language"
        has-buttons title-key="languageSectionTitle"
        aria-label$="[[i18nDynamic(locale, 'languageSectionTitle')]]">
      <hd-iron-icon slot="oobe-icon"
          icon1x="oobe-welcome-32:language" icon2x="oobe-welcome-64:language">
      </hd-iron-icon>
      <div id="setup-container" slot="footer" class="layout vertical">
        <div id="languageDropdownContainer"
            class="flex layout center horizontal justified
                language-selection-entry">
          <div id="language-dropdown" class=
              "language-selection-title layout vertical center-justified">
            [[i18nDynamic(locale, 'languageDropdownTitle')]]
          </div>
          <oobe-i18n-dropdown id="languageSelect" items="[[languages]]"
              on-select-item="onLanguageSelected_" class="focus-on-show"
              label-for-aria=
                  "[[i18nDynamic(locale, 'languageDropdownLabel')]]">
          </oobe-i18n-dropdown>
        </div>
        <div id="keyboardDropdownContainer"
            class="flex layout center horizontal justified
               language-selection-entry">
          <div  id="keyboard-dropdown" class=
              "language-selection-title layout vertical center-justified">
            [[i18nDynamic(locale, 'keyboardDropdownTitle')]]
          </div>
          <oobe-i18n-dropdown id="keyboardSelect" items="[[keyboards]]"
              on-select-item="onKeyboardSelected_"
              label-for-aria=
                  "[[i18nDynamic(locale, 'keyboardDropdownLabel')]]">
          </oobe-i18n-dropdown>
        </div>
      </div>
      <div slot="bottom-buttons" class="layout horizontal end-justified">
        <oobe-text-button id="ok-button-language" text-key="oobeOKButtonText"
            inverse on-click="closeLanguageSection_"></oobe-text-button>
      </div>
    </oobe-dialog>
    <oobe-dialog id="accessibilityScreen" role="dialog" for-step="accessibility"
        has-buttons title-key="accessibilitySectionTitle"
        subtitle-key="accessibilitySectionHint"
        aria-label$="[[i18nDynamic(locale, 'accessibilitySectionTitle')]]">
      <hd-iron-icon slot="oobe-icon"
          icon1x="oobe-welcome-32:accessibility"
          icon2x="oobe-welcome-64:accessibility">
      </hd-iron-icon>
      <div slot="footer" class="layout vertical scroll">
        <oobe-a11y-option id="accessibility-spoken-feedback"
            checked="[[a11yStatus.spokenFeedbackEnabled]]"
            on-change="onA11yOptionChanged_"
            label-for-aria="[[i18nDynamic(locale, 'spokenFeedbackOption')]]"
            class="focus-on-show">
          <span slot="title">
            [[i18nDynamic(locale, 'spokenFeedbackOption')]]
          </span>
          <span slot="checked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOn')]]
          </span>
          <span slot="unchecked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOff')]]
          </span>
        </oobe-a11y-option>
        <oobe-a11y-option id="accessibility-large-cursor"
            checked="[[a11yStatus.largeCursorEnabled]]"
            on-change="onA11yOptionChanged_"
            label-for-aria="[[i18nDynamic(locale, 'largeCursorOption')]]">
          <span slot="title">
            [[i18nDynamic(locale, 'largeCursorOption')]]
          </span>
          <span slot="checked-value">
            [[i18nDynamic(locale, 'largeCursorOptionOn')]]
          </span>
          <span slot="unchecked-value">
            [[i18nDynamic(locale, 'largeCursorOptionOff')]]
          </span>
        </oobe-a11y-option>
        <oobe-a11y-option id="accessibility-high-contrast"
            checked="[[a11yStatus.highContrastEnabled]]"
            on-change="onA11yOptionChanged_"
            label-for-aria="[[i18nDynamic(locale, 'highContrastOption')]]">
          <span slot="title">
            [[i18nDynamic(locale, 'highContrastOption')]]
          </span>
          <span slot="checked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOn')]]
          </span>
          <span slot="unchecked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOff')]]
          </span>
        </oobe-a11y-option>
        <oobe-a11y-option id="accessibility-screen-magnifier"
            checked="[[a11yStatus.screenMagnifierEnabled]]"
            on-change="onA11yOptionChanged_"
            label-for-aria="[[i18nDynamic(locale, 'screenMagnifierOption')]]">
          <span slot="title">
            [[i18nDynamic(locale, 'screenMagnifierOption')]]
          </span>
          <span slot="checked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOn')]]
          </span>
          <span slot="unchecked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOff')]]
          </span>
        </oobe-a11y-option>
        <oobe-a11y-option id="accessibility-select-to-speak"
            checked="[[a11yStatus.selectToSpeakEnabled]]"
            on-change="onA11yOptionChanged_"
            label-for-aria="[[i18nDynamic(locale, 'selectToSpeakOption')]]"
            id="selectToSpeakOobeOption">
          <span slot="title">
            [[i18nDynamic(locale, 'selectToSpeakOption')]]
          </span>
          <span slot="checked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOn')]]
          </span>
          <span slot="unchecked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOff')]]
          </span>
        </oobe-a11y-option>
        <oobe-a11y-option id="accessibility-docked-magnifier"
            checked="[[a11yStatus.dockedMagnifierEnabled]]"
            on-change="onA11yOptionChanged_"
            label-for-aria="[[i18nDynamic(locale, 'dockedMagnifierOption')]]">
          <span slot="title">
            [[i18nDynamic(locale, 'dockedMagnifierOption')]]
          </span>
          <span slot="checked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOn')]]
          </span>
          <span slot="unchecked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOff')]]
          </span>
        </oobe-a11y-option>
        <oobe-a11y-option id="accessibility-virtual-keyboard"
            checked="[[a11yStatus.virtualKeyboardEnabled]]"
            on-change="onA11yOptionChanged_"
            label-for-aria="[[i18nDynamic(locale, 'virtualKeyboardOption')]]">
          <span slot="title">
            [[i18nDynamic(locale, 'virtualKeyboardOption')]]
          </span>
          <span slot="checked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOn')]]
          </span>
          <span slot="unchecked-value">
            [[i18nDynamic(locale, 'a11ySettingToggleOptionOff')]]
          </span>
        </oobe-a11y-option>
      </div>
      <div slot="bottom-buttons" class="layout horizontal end-justified">
        <oobe-text-button id="ok-button-accessibility"
            text-key="oobeOKButtonText" inverse
            on-click="closeAccessibilitySection_"></oobe-text-button>
      </div>
    </oobe-dialog>
    <oobe-dialog id="timezoneScreen" role="dialog" for-step="timezone"
        has-buttons title-key="timezoneSectionTitle"
        aria-label$="[[i18nDynamic(locale, 'timezoneSectionTitle')]]">
      <hd-iron-icon slot="oobe-icon"
          icon1x="oobe-welcome-32:timezone" icon2x="oobe-welcome-64:timezone">
      </hd-iron-icon>
      <div slot="footer" class="layout vertical">
        <div class="flex layout center horizontal justified
              timezone-selection-entry">
          <div class=
              "timezone-selection-title layout vertical center-justified">
            [[i18nDynamic(locale, 'timezoneDropdownTitle')]]
          </div>
          <oobe-i18n-dropdown id="timezoneSelect" items="[[timezones]]"
              on-select-item="onTimezoneSelected_"
              label-for-aria="[[i18nDynamic(locale, 'timezoneDropdownLabel')]]"
              class="focus-on-show">
          </oobe-i18n-dropdown>
        </div>
      </div>
      <div slot="bottom-buttons" class="layout horizontal end-justified">
        <oobe-text-button id="ok-button-timezone" text-key="oobeOKButtonText"
            inverse on-click="closeTimezoneSection_"></oobe-text-button>
      </div>
    </oobe-dialog>
    <oobe-dialog id="oobeAdvancedOptionsScreen" role="dialog"
        for-step="advanced-options" has-buttons
        title-key="advancedOptionsSectionTitle"
        aria-label$="[[i18nDynamic(locale, 'advancedOptionsSectionTitle')]]">
      <hd-iron-icon slot="oobe-icon"
          icon1x="oobe-welcome-32:settings" icon2x="oobe-welcome-64:settings">
      </hd-iron-icon>
      <div slot="footer" class="layout vertical">
        <div class="flex layout vertical center-justified
            advanced-options-entry">
          <button on-click="onCFMBootstrappingClicked_">
            <div class="advanced-option-title">
              [[i18nDynamic(locale, 'advancedOptionsCFMSetupTitle')]]
            </div>
            <div class="advanced-option-subtitle">
              [[i18nDynamic(locale, 'advancedOptionsCFMSetupSubtitle')]]
            </div>
          </button>
        </div>
        <div class="flex layout vertical center-justified
            advanced-options-entry">
          <button on-click="onDeviceRequisitionClicked_">
            <div class="advanced-option-title">
              [[i18nDynamic(locale, 'advancedOptionsDeviceRequisitionTitle')]]
            </div>
            <div class="advanced-option-subtitle">
              [[i18nDynamic(locale, 'advancedOptionsDeviceRequisitionSubtitle')]]
            </div>
          </button>
        </div>
      </div>
      <div slot="bottom-buttons" class="layout horizontal end-justified">
        <oobe-text-button id="ok-button-advanced-options"
            text-key="oobeOKButtonText" inverse
            on-click="closeAdvancedOptionsSection_"></oobe-text-button>
      </div>
    </oobe-dialog>
    <!-- Demo Mode confirmation dialog -->
    <oobe-modal-dialog id="demoModeConfirmationDialog">
      <div slot="title">
        [[i18nDynamic(locale, 'enableDemoModeDialogTitle')]]
      </div>
      <div slot="content">
        [[i18nDynamic(locale, 'enableDemoModeDialogText')]]
      </div>
      <div slot="buttons">
        <oobe-text-button id="cancelButton" border
            on-click="onDemoModeDialogCancelTap_"
            text-key="enableDemoModeDialogCancel"></oobe-text-button>
        <oobe-text-button inverse on-click="onDemoModeDialogConfirmTap_"
            id="okButton"
            text-key="enableDemoModeDialogConfirm"></oobe-text-button>
      </div>
    </oobe-modal-dialog>
  </template>
</dom-module>