import { html } from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
export function getTemplate() {
    return html `<!--_html_template_start_-->    <style include="cr-shared-style settings-shared md-select">
      /* Lines up with cr-input. */
      #custom-input {
        /* (cr-input line-height + cr-input top/bottom padding) / 2 -
           cr-radio disc-wrapper height / 2 */
        --cr-radio-button-disc-margin-block-start: calc(
            (1.54em + 12px) / 2 - 8px);
        align-items: start;
      }

      /* The theme mixes a link and a cr-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 cr-button,
      #toolbarRow cr-button {
        margin-inline-end: 20px;
      }

      #themeRow .separator,
      #toolbarRow .separator  {
         margin-inline-start: 0;
      }

      #toolbarRow {
        border-top: var(--cr-separator-line);
      }

      .indented-toggles,
      .indented-rows {
        padding-inline-end: 0;
      }

      .indented-toggles settings-toggle-button,
      .indented-rows .cr-row {
        padding-inline-start: 0;
      }

    </style>
    <settings-section page-title="$i18n{appearancePageTitle}">
      <div route-path="default">
        <div class="settings-row first" id="themeRow"
            hidden="[[!pageVisibility.setTheme]]">
          <cr-link-row id="openTheme" class="first"
              hidden="[[!pageVisibility.setTheme]]"
              label="$i18n{themes}" sub-label="[[themeSublabel_]]"
              on-click="onThemeClick_" external></cr-link-row>


          <div class="settings-row continuation"
              hidden="[[!showThemesSecondary_(
                  prefs.extensions.theme.id.value, systemTheme_)]]"
              id="themesSecondaryActions">
            <div class="separator"></div>
            <template is="dom-if" if="[[showUseClassic_(
                prefs.extensions.theme.id.value, systemTheme_)]]" restamp>
              <cr-button id="useDefault" on-click="onUseDefaultClick_">
                $i18n{useClassicTheme}
              </cr-button>
            </template>
            <template is="dom-if" if="[[showUseGtk_(
                prefs.extensions.theme.id.value, systemTheme_)]]" restamp>
              <cr-button id="useGtk" on-click="onUseGtkClick_">
                $i18n{useGtkTheme}
              </cr-button>
            </template>
            <template is="dom-if" if="[[showUseQt_(
                prefs.extensions.theme.id.value, systemTheme_)]]" restamp>
              <cr-button id="useQt" on-click="onUseQtClick_">
                $i18n{useQtTheme}
              </cr-button>
            </template>
          </div>

        </div>
        <div id="toolbarRow" class="settings-row">
          <cr-link-row id="customizeToolbar"
              label="$i18n{customizeToolbar}"
              on-click="onCustomizeToolbarClick_" external>
          </cr-link-row>
          <template is="dom-if" if="[[showResetPinnedActionsButton_]]">
            <div class="separator"></div>
            <cr-button id="resetPinnedToolbarActions"
                on-click="onResetPinnedToolbarActionsClick_"
                aria-label="$i18n{resetToolbarToDefault}">
              $i18n{resetToDefault}
            </cr-button>
          </template>
        </div>
        <div id="colorSchemeModeRow" class="cr-row"

            hidden="[[!showColorSchemeMode_(prefs.extensions.theme.id.value,
              systemTheme_)]]"

        >
          <div id="colorSchemeModeLabel" class="flex cr-padded-text"
              aria-hidden="true">
            $i18n{colorSchemeMode}
          </div>
          <select id="colorSchemeModeSelect" class="md-select"
              on-change="onColorSchemeModeChange_"
              aria-labelledby="colorSchemeModeLabel">
            <template is="dom-repeat" items="[[colorSchemeModeOptions_]]">
              <option value="[[item.value]]"
                  selected="[[isSelectedColorSchemeMode_(
                      item.value, selectedColorSchemeMode_)]]">
                [[item.name]]
              </option>
            </template>
          </select>
        </div>
        <div
            class="hr"
            hidden="[[!showHr_(
                pageVisibility.setTheme, pageVisibility.homeButton)]]">
        </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 id="home-button-options" 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-click="onDisableExtensionClick_">
                </extension-controlled-indicator>
              </template>
            </settings-radio-group>
          </div>
        </template>
        <div
            class="hr"
            hidden="[[!showHr_(
                pageVisibility.homeButton, pageVisibility.bookmarksBar)]]">
        </div>
        <template is="dom-if"
            if="[[!ntpSimplificationBookmarksBarEnabled_]]">
          <settings-toggle-button id="showBookmarksBar"
              hidden="[[!pageVisibility.bookmarksBar]]"
              pref="{{prefs.bookmark_bar.show_on_all_tabs}}"
              label="$i18n{showBookmarksBar}">
          </settings-toggle-button>
        </template>
        <template is="dom-if"
            if="[[ntpSimplificationBookmarksBarEnabled_]]">
          <div class="cr-row" hidden="[[!pageVisibility.bookmarksBar]]">
            <div class="flex cr-padded-text" aria-hidden="true">
              $i18n{bookmarksBar}
            </div>
            <settings-dropdown-menu id="bookmarksBarVisibilityDropdown"
                label="$i18n{bookmarksBar}"
                pref-key="bookmark_bar.visibility_state"
                menu-options="[[bookmarksBarOptions_]]"
                on-settings-control-change=
                    "onBookmarksBarVisibilitySettingChange_">
            </settings-dropdown-menu>
          </div>
        </template>

        <template is="dom-if" if="[[showVerticalTabsEnabled_]]">
          <div class="cr-row">
            <div class="flex cr-padded-text" aria-hidden="true">
              $i18n{tabStripPosition}
            </div>
            <settings-dropdown-menu id="tabStripPosition"
                label="$i18n{tabStripPosition}"
                pref-key="vertical_tabs.enabled"
                menu-options="[[tabStripOptions_]]"
                on-settings-control-change="onTabStripPositionChanged_">
            </settings-dropdown-menu>
          </div>
          <div class="list-frame indented-toggles"
               hidden="[[!prefs.vertical_tabs.enabled.value]]">
            <template is="dom-if"
                if="[[showVerticalTabsExpandOnHoverSetting_(
                  showVerticalTabsExpandOnHoverEnabled_,
                  prefs.vertical_tabs.enabled.value)]]">
              <settings-toggle-button
                  id="showVerticalTabsExpandOnHover"
                  pref="{{prefs.vertical_tabs.expand_on_hover}}"
                  label="$i18n{showVerticalTabsExpandOnHover}">
              </settings-toggle-button>
            </template>

            <template is="dom-if" if="[[showProjectsPanelEnabled_]]">
              <settings-toggle-button id="showProjectsPanelButton"
                pref="{{prefs.projects_panel.pinned_to_tabstrip}}"
                label="$i18n{showProjectsPanelButton}"
                on-change="onShowProjectsPanelButtonChange_">
              </settings-toggle-button>
            </template>

            <template is="dom-if"
              if="[[showEverythingMenuToggle_(
                  showProjectsPanelEnabled_, showEverythingMenuEnabled_)]]">
              <settings-toggle-button id="showEverythingMenuButton"
                  pref="{{prefs.everything_menu.pinned_to_tabstrip}}"
                  label="$i18n{showEverythingMenuButton}"
                  on-change="onShowEverythingMenuButtonChange_">
              </settings-toggle-button>
            </template>
          </div>
        </template>

        <settings-toggle-button id="showTabSearchButton" class="hr"
            pref="{{prefs.tab_search.pinned_to_tabstrip}}"
            label="$i18n{showTabSearchButton}"
            on-change="onShowTabSearchButtonChange_">
        </settings-toggle-button>

        <settings-toggle-button class="hr" id="showSavedTabGroups"
            pref="{{prefs.bookmark_bar.show_tab_groups}}"
            label="$i18n{showTabGroupsInBookmarksBar}"
            hidden="[[showProjectsPanelEnabled_]]">
        </settings-toggle-button>

        <settings-toggle-button class="hr" id="autoPinNewTabGroups"
            pref="{{prefs.auto_pin_new_tab_groups}}"
            label="$i18n{autoPinNewTabGroups}"
            hidden="[[showProjectsPanelEnabled_]]">
        </settings-toggle-button>

        <template is="dom-if" if="[[showCtrlTabMru_]]">
          <settings-toggle-button class="hr" id="ctrlTabMru"
              pref="{{prefs.browser.ctrl_tab_mru}}"
              label="$i18n{ctrlTabMru}">
          </settings-toggle-button>
        </template>

        <div class="cr-row">$i18n{sidePanelPosition}</div>
        <div class="list-frame indented-rows">
          <template is="dom-repeat" items="[[configurableSidePanels_]]">
            <div class="cr-row continuation">
              <div class="flex cr-padded-text" aria-hidden="true">
                [[item.label]]
              </div>
              <settings-dropdown-menu
                  label="[[item.label]]"
                  menu-options="[[sidePanelAlignmentOptions_]]"
                  data-entry-id$="[[item.id]]"
                  pref-key="side_panel.is_right_aligned"
                  no-set-pref
                  value="[[getOverrideValue_(
                    item.id, prefs.side_panel.alignment_overrides.value,
                    prefs.side_panel.is_right_aligned.value)]]"
                  on-settings-control-change="onOverrideAlignmentChange_">
              </settings-dropdown-menu>
            </div>
          </template>

          <div class="cr-row continuation">
            <div class="flex cr-padded-text" aria-hidden="true">
              $i18n{sidePanelAlignmentChromePanels}
            </div>
            <settings-dropdown-menu id="sidePanelPosition"
                label="$i18n{sidePanelAlignmentChromePanels}"
                pref-key="side_panel.is_right_aligned"
                menu-options="[[sidePanelAlignmentOptions_]]">
            </settings-dropdown-menu>
          </div>
        </div>
        <template is="dom-if" if="[[!showHoverCardImagesOption_]]">
          <div class="hr" hidden="[[!pageVisibility.hoverCard]]"></div>
          <settings-toggle-button id="hoverCardMemoryUsageToggle"
              hidden="[[!pageVisibility.hoverCard]]"
              pref="{{prefs.browser.hovercard.memory_usage_enabled}}"
              label="$i18n{showHoverCardMemoryUsageStandalone}">
          </settings-toggle-button>
        </template>
        <template is="dom-if" if="[[showHoverCardImagesOption_]]">
          <div class="cr-row" hidden="[[!pageVisibility.hoverCard]]">
            $i18n{hoverCardTitle}
          </div>
          <div class="list-frame indented-toggles">
            <settings-toggle-button id="hoverCardImagesToggle"
                hidden="[[!pageVisibility.hoverCard]]"
                on-settings-boolean-control-change="onHoverCardImagesToggleChange_"
                pref="{{prefs.browser.hovercard.image_previews_enabled}}"
                label="$i18n{showHoverCardImages}">
            </settings-toggle-button>
            <settings-toggle-button id="hoverCardMemoryUsageToggle" class="hr"
                hidden="[[!pageVisibility.hoverCard]]"
                on-settings-boolean-control-change="onHoverCardMemoryUsageToggleChange_"
                pref="{{prefs.browser.hovercard.memory_usage_enabled}}"
                label="$i18n{showHoverCardMemoryUsage}">
            </settings-toggle-button>
          </div>
        </template>


        <div class="hr" hidden="[[!pageVisibility.bookmarksBar]]"></div>
        <settings-toggle-button
            hidden="[[!showCustomChromeFrame_]]"
            pref="{{prefs.browser.custom_chrome_frame}}"
            label="$i18n{showWindowDecorations}"
            inverted>
        </settings-toggle-button>

        <div class="cr-row">
          <div class="flex cr-padded-text" aria-hidden="true">
            $i18n{fontSize}
          </div>
          <settings-dropdown-menu id="defaultFontSize" label="$i18n{fontSize}"
              pref-key="webkit.webprefs.default_font_size"
              menu-options="[[fontSizeOptions_]]">
          </settings-dropdown-menu>
        </div>
        <cr-link-row class="hr" id="customize-fonts-subpage-trigger"
            label="$i18n{customizeFonts}" on-click="onCustomizeFontsClick_"
            role-description="$i18n{subpageArrowRoleDescription}">
        </cr-link-row>
        <div class="cr-row" hidden="[[!pageVisibility.pageZoom]]">
          <div id="pageZoom" class="flex cr-padded-text" aria-hidden="true">
            $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>

      </div>
      <settings-toggle-button class="hr" id="splitViewDragAndDrop"
          pref="{{prefs.browser.split_view_drag_and_drop_enabled}}"
          label="$i18n{allowSplitViewDragAndDrop}">
      </settings-toggle-button>
    </settings-section>
    <template is="dom-if" if="[[showManagedThemeDialog_]]" restamp>
      <managed-dialog on-close="onManagedDialogClosed_"
          title="$i18n{themeManagedDialogTitle}"
          body="$i18n{themeManagedDialogBody}">
      </managed-dialog>
    </template>
<!--_html_template_end_-->`;
}
