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

<link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="../controls/settings_toggle_button.html">
<link rel="import" href="../i18n_setup.html">
<link rel="import" href="../prefs/prefs_behavior.html">
<link rel="import" href="../route.html">
<link rel="import" href="../settings_page/settings_subpage.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="date_time_types.html">
<link rel="import" href="timezone_selector.html">
<link rel="import" href="timezone_subpage.html">

<dom-module id="settings-date-time-page">
  <template>
    <style include="settings-shared">
      #timeZoneAutoDetect {
        padding: 0;
        width: 100%;
      }
      #timeZoneButton {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
      }
    </style>
    <settings-animated-pages id="pages" section="dateTime"
        focus-config="[[focusConfig_]]">
      <div id="main" route-path="default">
        <template is="dom-if"
            if="[[!prefs.cros.flags.fine_grained_time_zone_detection_enabled.value]]"
            restamp>
          <div class="settings-box first">
            <settings-toggle-button id="timeZoneAutoDetect"
                label="$i18n{timeZoneGeolocation}"
                pref="{{prefs.generated.resolve_timezone_by_geolocation_on_off}}">
            </settings-toggle-button>
          </div>
        </template>
        <template is="dom-if"
            if="[[prefs.cros.flags.fine_grained_time_zone_detection_enabled.value]]"
            restamp>
          <cr-link-row id="timeZoneSettingsTrigger" class="hr"
              on-click="onTimeZoneSettings_" label="$i18n{timeZoneButton}"
              sub-label="[[timeZoneSettingSubLabel_]]">
            <div class="flex"></div>
            <cr-policy-pref-indicator
                pref="[[prefs.generated.resolve_timezone_by_geolocation_on_off]]">
            </cr-policy-pref-indicator>
          </cr-link-row>
        </template>
        <div class="settings-box continuation embedded"
            hidden="[[prefs.cros.flags.fine_grained_time_zone_detection_enabled.value]]">
          <timezone-selector prefs="{{prefs}}"
              active-time-zone-display-name="{{activeTimeZoneDisplayName}}">
          </timezone-selector>
        </div>
        <settings-toggle-button
            pref="{{prefs.settings.clock.use_24hour_clock}}"
            label="$i18n{use24HourClock}">
        </settings-toggle-button>
        <cr-link-row class="hr" id="setDateTime"
            on-click="onSetDateTimeTap_" hidden$="[[!canSetDateTime_]]"
            label="$i18n{setDateTime}"></cr-link-row>
      </div>
      <template is="dom-if" route-path="/dateTime/timeZone">
        <settings-subpage data-route="DATETIME_TIMEZONE_SUBPAGE"
            associated-control="[[$$('#timeZoneSettingsTrigger')]]"
            page-title="$i18n{timeZoneSubpageTitle}"
            learn-more-url="$i18n{timeZoneSettingsLearnMoreURL}">
          <timezone-subpage id="timezoneSubpage" prefs="{{prefs}}"
              active-time-zone-display-name="{{activeTimeZoneDisplayName}}">
          </timezone-subpage>
        </settings-subpage>
      </template>
    </settings-animated-pages>
  </template>
  <script src="date_time_page.js"></script>
</dom-module>
