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

<link rel="import" href="../controls/controlled_radio_button.html">
<link rel="import" href="../controls/settings_radio_group.html">
<link rel="import" href="../prefs/prefs.html">
<link rel="import" href="../prefs/prefs_behavior.html">
<link rel="import" href="../settings_shared_css.html">
<link rel="import" href="date_time_types.html">
<link rel="import" href="timezone_selector.html">

<dom-module id="timezone-subpage">
  <template>
    <style include="settings-shared">
      .block {
        display: block;
      }
      settings-dropdown-menu {
        --md-select-width: 400px;
        --settings-dropdown-menu-policy-order: 1;
      }
      #timeZoneResolveMethodDropdown,
      #timezoneSelector {
        padding-inline-start: 28px;
      }
    </style>
    <div class="settings-box block first">
      <settings-radio-group id="timeZoneRadioGroup"
          pref="{{prefs.generated.resolve_timezone_by_geolocation_on_off}}">
        <controlled-radio-button
            id="timeZoneAutoDetectOn"
            name="true"
            pref="[[prefs.generated.resolve_timezone_by_geolocation_on_off]]"
            label="$i18n{setTimeZoneAutomaticallyOn}"
            no-extension-indicator>
        </controlled-radio-button>
        <settings-dropdown-menu id="timeZoneResolveMethodDropdown"
            pref="{{prefs.generated.resolve_timezone_by_geolocation_method_short}}"
            label="$i18n{selectTimeZoneResolveMethod}"
            hidden="[[!prefs.generated.resolve_timezone_by_geolocation_on_off.value]]"
            menu-options="[[getTimeZoneResolveMethodsList_(
                prefs.generated.resolve_timezone_by_geolocation_method_short)]]">
        </settings-dropdown-menu>
        <controlled-radio-button
            id="timeZoneAutoDetectOff"
            name="false"
            pref="[[prefs.generated.resolve_timezone_by_geolocation_on_off]]"
            label="$i18n{setTimeZoneAutomaticallyOff}"
            no-extension-indicator>
        </controlled-radio-button>
        <timezone-selector id="timezoneSelector" prefs="{{prefs}}"
            active-time-zone-display-name="{{activeTimeZoneDisplayName}}">
        </timezone-selector>
      </settings-radio-group>
    </div>
  </template>
  <script src="timezone_subpage.js"></script>
</dom-module>
