<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/i18n_behavior.html">
<link rel="import" href="chrome://resources/html/md_select_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="appearance_browser_proxy.html">
<link rel="import" href="../controls/controlled_radio_button.html">
<link rel="import" href="../controls/extension_controlled_indicator.html">
<link rel="import" href="../controls/settings_dropdown_menu.html">
<link rel="import" href="../controls/settings_radio_group.html">
<link rel="import" href="../controls/settings_toggle_button.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="../settings_shared_css.html">
<link rel="import" href="../settings_vars_css.html">
<link rel="import" href="appearance_fonts_page.html">
<link rel="import" href="home_url_input.html">

<dom-module id="settings-appearance-page">
  <template>
    <style include="settings-shared md-select iron-flex">
      /* Lines up with cr-input. */
      #custom-input {
        --cr-radio-button-disc: {
          /* (cr-input line-height + cr-input top/bottom padding) / 2 -
             cr-radio disc-wrapper height / 2 */
          margin-top: calc((1.54em + 12px) / 2 - 8px);
        }
        align-items: start;
      }

      /* The theme mixes a link and a paper-button divided by a separator with
       * grit expressions and dom-if templates. That leads to a tricky thing
       * to style correctly, these are a workaround. */
      #themeRow paper-button {
        margin-inline-end: 20px;
      }

      #themeRow .separator {
         margin-inline-start: 0;
      }
    </style>
    <settings-animated-pages id="pages" section="appearance"
        focus-config="[[focusConfig_]]">
      <div route-path="default">
<if expr="chromeos">
        <cr-link-row icon-class="icon-external" id="wallpaperButton"
            hidden="[[!pageVisibility.setWallpaper]]"
            on-click="openWallpaperManager_"
            label="$i18n{setWallpaper}" sub-label="$i18n{openWallpaperApp}"
            disabled="[[isWallpaperPolicyControlled_]]">
          <template is="dom-if" if="[[isWallpaperPolicyControlled_]]">
            <cr-policy-indicator id="wallpaperPolicyIndicator"
                indicator-type="devicePolicy">
            </cr-policy-indicator>
          </template>
        </cr-link-row>
        <div class="hr"></div>
</if>
        <div class="settings-row continuation" id="themeRow"
            hidden="[[!pageVisibility.setTheme]]">
          <cr-link-row class="first" icon-class="icon-external"
              hidden="[[!pageVisibility.setTheme]]"
              label="$i18n{themes}" sub-label="[[themeSublabel_]]"
              on-click="openThemeUrl_"></cr-link-row>
<if expr="not is_linux or chromeos">
          <template is="dom-if" if="[[prefs.extensions.theme.id.value]]">
            <div class="separator"></div>
            <paper-button id="useDefault" on-click="onUseDefaultTap_"
                class="secondary-button">
              $i18n{resetToDefaultTheme}
            </paper-button>
          </template>
</if>
<if expr="is_linux and not chromeos">
          <div class="settings-row continuation"
              hidden="[[!showThemesSecondary_(
              prefs.extensions.theme.id.value, useSystemTheme_)]]"
              id="themesSecondaryActions">
            <div class="separator"></div>
            <template is="dom-if" if="[[showUseClassic_(
                prefs.extensions.theme.id.value, useSystemTheme_)]]" restamp>
              <paper-button id="useDefault" on-click="onUseDefaultTap_"
                  class="secondary-button">
                $i18n{useClassicTheme}
              </paper-button>
            </template>
            <template is="dom-if" if="[[showUseSystem_(
                prefs.extensions.theme.id.value, useSystemTheme_)]]" restamp>
              <paper-button id="useSystem" on-click="onUseSystemTap_"
                  class="secondary-button">
                $i18n{useSystemTheme}
              </paper-button>
            </template>
          </div>
</if>
        </div>
        <settings-toggle-button elide-label
            hidden="[[!pageVisibility.homeButton]]"
            pref="{{prefs.browser.show_home_button}}"
            label="$i18n{showHomeButton}"
            sub-label="[[getShowHomeSubLabel_(
                prefs.browser.show_home_button.value,
                prefs.homepage_is_newtabpage.value,
                prefs.homepage.value)]]">
        </settings-toggle-button>
        <template is="dom-if" if="[[prefs.browser.show_home_button.value]]">
          <div class="list-frame" hidden="[[!pageVisibility.homeButton]]">
            <settings-radio-group pref="{{prefs.homepage_is_newtabpage}}">
              <controlled-radio-button class="list-item" name="true"
                  pref="[[prefs.homepage_is_newtabpage]]"
                  label="$i18n{homePageNtp}" no-extension-indicator>
              </controlled-radio-button>
              <controlled-radio-button id="custom-input" class="list-item"
                  name="false" pref="[[prefs.homepage_is_newtabpage]]"
                  no-extension-indicator>
                <!-- TODO(dbeam): this can show double indicators when both
                     homepage and whether to use the NTP as the homepage are
                     managed. -->
                <home-url-input id="customHomePage" pref="{{prefs.homepage}}"
                    can-tab="[[!prefs.homepage_is_newtabpage.value]]">
                </home-url-input>
              </controlled-radio-button>
              <template is="dom-if" if="[[prefs.homepage.extensionId]]">
                <extension-controlled-indicator
                    extension-id="[[prefs.homepage.extensionId]]"
                    extension-can-be-disabled="[[
                        prefs.homepage.extensionCanBeDisabled]]"
                    extension-name="[[prefs.homepage.controlledByName]]"
                    on-disable-extension="onDisableExtension_">
                </extension-controlled-indicator>
              </template>
            </settings-radio-group>
          </div>
        </template>
        <settings-toggle-button hidden="[[!pageVisibility.bookmarksBar]]"
            pref="{{prefs.bookmark_bar.show_on_all_tabs}}"
            label="$i18n{showBookmarksBar}">
        </settings-toggle-button>
<if expr="is_linux and not chromeos">
        <settings-toggle-button
            class$="[[getFirst_(pageVisibility.bookmarksBar)]]"
            pref="{{prefs.browser.custom_chrome_frame}}"
            label="$i18n{showWindowDecorations}"
            inverted>
        </settings-toggle-button>
</if>
        <div class="settings-box">
          <div class="start">$i18n{fontSize}</div>
          <settings-dropdown-menu id="defaultFontSize" label="$i18n{fontSize}"
              pref="{{prefs.webkit.webprefs.default_font_size}}"
              menu-options="[[fontSizeOptions_]]">
          </settings-dropdown-menu>
        </div>
        <cr-link-row class="hr"
            icon-class="subpage-arrow" id="customize-fonts-subpage-trigger"
            label="$i18n{customizeFonts}" on-click="onCustomizeFontsTap_">
        </cr-link-row>
        <div class="settings-box" hidden="[[!pageVisibility.pageZoom]]">
          <div id="pageZoom" class="start">$i18n{pageZoom}</div>
          <select id="zoomLevel" class="md-select" aria-labelledby="pageZoom"
              on-change="onZoomLevelChange_">
            <template is="dom-repeat" items="[[pageZoomLevels_]]">
              <option value="[[item]]"
                  selected="[[zoomValuesEqual_(item, defaultZoom_)]]">
                [[formatZoom_(item)]]%
              </option>
            </template>
          </select>
        </div>
<if expr="is_macosx">
        <settings-toggle-button pref="{{prefs.webkit.webprefs.tabs_to_links}}"
            label="$i18n{tabsToLinks}">
        </settings-toggle-button>
        <settings-toggle-button pref="{{prefs.browser.confirm_to_quit}}"
            label="$i18n{warnBeforeQuitting}">
        </settings-toggle-button>
</if>
      </div>
      <template is="dom-if" route-path="/fonts">
        <settings-subpage
            associated-control="[[$$('#customize-fonts-subpage-trigger')]]"
            page-title="$i18n{customizeFonts}">
          <settings-appearance-fonts-page prefs="{{prefs}}">
          </settings-appearance-fonts-page>
        </settings-subpage>
      </template>
    </settings-animated-pages>
  </template>
  <script src="appearance_page.js"></script>
</dom-module>