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 settings-columned-section">
  :host {
    display: flex;
    flex-direction: column;
    --security-page-selected-card-background-color: var(--google-blue-50);
  }

  @media (prefers-color-scheme: dark) {
    :host {
      --security-page-selected-card-background-color: rgba(0, 74, 119, 1);
    }
  }

  .box {
    background-color: var(--cr-card-background-color);
  }

  .card {
    flex: 1;
    padding: 20px;
  }

  .card:hover {
    background-color: var(--cr-hover-background-color);
    cursor: pointer;
  }

  .card-start {
    border-start-start-radius: var(--cr-card-border-radius);
  }

  .card-end {
    border-start-end-radius: var(--cr-card-border-radius);
  }

  .card-end:has(controlled-radio-button[checked]),
  .card-start:has(controlled-radio-button[checked]) {
    background-color: var(--security-page-selected-card-background-color);
  }

  .settings-columned-section {
    padding: 0;
  }

  .settings-columned-section ul.icon-bulleted-list li {
    column-gap: 0px;
  }

  :host(:not([is-horizontal])) controlled-radio-button {
    column-gap: 16px;
  }

  settings-section:first-of-type {
    --cr-section-vertical-margin: 0;
  }

  settings-section:not(:first-of-type) > :first-child {
    border-start-end-radius: var(--cr-card-border-radius);
    border-start-start-radius: var(--cr-card-border-radius);
  }

  settings-section > *:not(:last-child) {
    border-bottom: var(--cr-separator-line);
  }

  settings-section:last-of-type {
    --cr-card-shadow: none;
  }

  ul.icon-bulleted-list {
    --cr-icon-size: 20px;
    --iron-icon-width: 16px;
    flex-basis: 100%;
    list-style-type: none;
    margin-bottom: 0;
    margin-top: 0;
    padding-inline-start: 0;
  }

  ul.icon-bulleted-list li {
    margin-bottom: 8px;
    margin-top: 0;
  }

  ul.icon-bulleted-list cr-icon {
    margin-inline-end: 10px;
  }

  #advancedProtectionProgramLinkRow {
    background-color: var(--cr-fallback-color-surface2);
  }

  #bundlesRadioGroup controlled-radio-button {
    align-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    row-gap: 20px;
    column-gap: 10px;
  }

  #bundlesRadioGroup controlled-radio-button::part(disc) {
    --cr-hover-background-color: transparent;
  }

  #bundlesRadioGroup controlled-radio-button::part(labelWrapper) {
    align-items: center;
    display: flex;
    font-size: 112%;
    font-weight: 500;
    height: 20px;
    justify-content: space-between;
    padding: 0;
  }

  #bundlesRadioGroup ul.icon-bulleted-list li:last-child {
    margin-bottom: 0;
  }

  #httpsFirstModeSection settings-radio-group {
    padding-inline: 16px;
  }

  #httpsFirstModeSection controlled-radio-button {
    padding-inline: 20px;
  }

  #httpsFirstModeRadioGroup > :last-child {
    padding-bottom: var(--cr-section-vertical-padding);
  }

  .settings-radio-group-feature-row {
    align-items: flex-start;
    display: flex;
    justify-content: space-around;
  }

  .settings-radio-group-feature-row controlled-radio-button {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    padding-block-start: var(--cr-section-vertical-padding);
  }

  .settings-radio-group-feature-row controlled-radio-button::part(disc) {
    margin-top: 1px;
  }

  .settings-radio-group-feature-row controlled-radio-button::part(labelWrapper) {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    font-size: 106%;
    justify-content: space-between;
    opacity: 1;
  }

  #safeBrowsingRadioGroup > :last-child {
    padding-block-end: var(--cr-section-vertical-padding);
  }

  #safeBrowsingRadioGroup .settings-columned-section,
  #learnMoreLabelContainer {
    font-size: 90%;
    font-weight: 80;
    padding-inline: 0 36px;
  }

  .settings-radio-button-subtitle {
    font-size: 90%;
    font-weight: 400;
  }

  .settings-radio-button-subtitle:not(:last-child) {
    padding-bottom: var(--cr-section-vertical-padding);
  }

  #manageSiteExceptionsRow {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-bottom: var(--cr-section-vertical-padding);
    padding-top: var(--cr-section-vertical-padding);
  }

  #javascriptGuardrailsRadioGroup {
    padding: 0;
  }

  #httpsFirstModeRow.highlight {
    animation: pulse-highlight 2s ease-in-out;
  }

  @keyframes pulse-highlight {
    0% { background-color: transparent; }
    25% { background-color: var(--cr-hover-background-color); }
    50% { background-color: transparent; }
    75% { background-color: var(--cr-hover-background-color); }
    100% { background-color: transparent; }
  }

  @media (prefers-reduced-motion: reduce) {
    :host #httpsFirstModeRow.highlight {
      animation: none;
      background-color: var(--cr-hover-background-color);
    }
  }
</style>
<settings-subpage page-title="$i18n{securityPageTitle}"
    learn-more-url="$i18n{safeBrowsingHelpCenterURL}"
    route-path$="[[routePath]]" class="multi-card">
  <settings-section page-title="$i18n{securityTitle}">
    <settings-radio-group id="bundlesRadioGroup"
        class="card-container settings-columned-section"
        pref="{{prefs.generated.security_settings_bundle}}"
        on-change="onSecurityBundleChanged_"
        selectable-elements="controlled-radio-button" nested-selectable
        is-horizontal
        hidden$="[[shouldHideBundles_]]">
      <div class="box card card-start">
        <controlled-radio-button id="securitySettingsBundleStandard"
            name="[[securitySettingsBundleSettingEnum_.STANDARD]]"
            pref="{{prefs.generated.security_settings_bundle}}"
            label="$i18n{securityStandardBundleTitle}">
          <cr-button id="resetStandardBundleToDefaultsButton"
              on-click="onResetBundleToDefaultsButtonClick_"
              hidden$="[[!isResetStandardBundleToDefaultsButtonVisible_]]">
            $i18n{securityBundleResetToDefaultsButtonLabel}
          </cr-button>
          <ul class="icon-bulleted-list" slot="additional-content">
            <li>
              <cr-icon icon="settings20:shield"></cr-icon>
              <span class="cr-secondary-text">
                $i18n{securityBundleStandardBulletOne}
              </span>
            </li>
            <li>
              <cr-icon icon="settings20:travel-explore"></cr-icon>
              <span class="cr-secondary-text">
                $i18n{securityBundleStandardBulletTwo}
              </span>
            </li>
            <li>
              <cr-icon icon="settings20:sprint"></cr-icon>
              <span class="cr-secondary-text">
                $i18n{securityBundleStandardBulletThree}
              </span>
            </li>
          </ul>
        </controlled-radio-button>
      </div>
      <div class="box card card-end">
        <controlled-radio-button id="securitySettingsBundleEnhanced"
            name="[[securitySettingsBundleSettingEnum_.ENHANCED]]"
            pref="{{prefs.generated.security_settings_bundle}}"
            label="$i18n{securityEnhancedBundleTitle}">
          <cr-button id="resetEnhancedBundleToDefaultsButton"
              on-click="onResetBundleToDefaultsButtonClick_"
              hidden$="[[!isResetEnhancedBundleToDefaultsButtonVisible_]]">
            $i18n{securityBundleResetToDefaultsButtonLabel}
          </cr-button>
          <ul class="icon-bulleted-list" slot="additional-content">
            <li>
              <cr-icon icon="settings20:shield-spark"></cr-icon>
              <span class="cr-secondary-text">
                $i18n{securityBundleEnhancedBulletOne}
              </span>
            </li>
            <li>
              <cr-icon icon="settings20:point-scan"></cr-icon>
              <span class="cr-secondary-text">
                $i18n{securityBundleEnhancedBulletTwo}
              </span>
            </li>
            <li>
              <cr-icon icon="settings20:front-hand"></cr-icon>
              <span class="cr-secondary-text">
                $i18n{securityBundleEnhancedBulletThree}
              </span>
            </li>
          </ul>
        </controlled-radio-button>
      </div>
    </settings-radio-group>
    <security-page-feature-row id="safeBrowsingRow"
        on-expanded-change="onSafeBrowsingRowClick_"
        on-toggle-button-change="onSafeBrowsingToggleChange_"
        pref="{{prefs.generated.safe_browsing}}"
        label="$i18n{securitySafeBrowsingTitle}"
        sub-label="$i18n{securitySafeBrowsingDesc}" class="box"
        numeric-unchecked-values="[[safeBrowsingOff_]]"
        state-text-map="[[safeBrowsingStateTextMap_]]"
        icon="settings20:warning_outline"
        icon-visible="[[isSafeBrowsingWarningIconVisible_]]">
      <div slot="collapse">
        <settings-radio-group id="safeBrowsingRadioGroup"
            class="settings-radio-group-feature-row"
            pref="{{prefs.generated.safe_browsing}}"
            selectable-elements="controlled-radio-button"
            on-change="onSafeBrowsingRadioChange_">
          <controlled-radio-button id="standardProtectionButton"
              label="$i18n{securitySafeBrowsingStandardTitle}"
              name="[[safeBrowsingSettingEnum_.STANDARD]]"
              pref="[[prefs.generated.safe_browsing]]"
              disabled="[[!isSafeBrowsingEnabled_]]">
            <div class="settings-radio-button-subtitle">
              $i18n{securitySafeBrowsingStandardSubtitle}
            </div>
            <div id="standardProtectionDescContainer"
                class="settings-columned-section">
              <div class="column">
                <h2 class="description-header">
                  $i18n{securitySafeBrowsingStandardWhatItDoesHeading}
                </h2>
                <div class="cr-secondary-text">
                  $i18nRaw{securitySafeBrowsingStandardWhatItDoesContent}
                </div>
              </div>
              <div class="column">
                <h2 class="description-header">
                  $i18n{securitySafeBrowsingStandardHowItWorksHeading}
                </h2>
                <div class="cr-secondary-text">
                  $i18nRaw{securitySafeBrowsingStandardHowItWorksContent}
                </div>
              </div>
            </div>
          </controlled-radio-button>
          <controlled-radio-button id="enhancedProtectionButton"
              label="$i18n{securitySafeBrowsingEnhancedTitle}"
              name="[[safeBrowsingSettingEnum_.ENHANCED]]"
              pref="[[prefs.generated.safe_browsing]]"
              disabled="[[!isSafeBrowsingEnabled_]]">
            <div class="settings-radio-button-subtitle">
              $i18n{securitySafeBrowsingEnhancedSubtitle}
            </div>
            <div id="enhancedProtectionDescContainer"
                class="settings-columned-section">
              <div class="column">
                <h2 class="description-header">
                  $i18n{columnHeadingWhenOn}
                </h2>
                <ul class="icon-bulleted-list">
                  <li>
                    <cr-icon icon="settings20:data" aria-hidden="true">
                    </cr-icon>
                    <div class="secondary">
                      $i18n{safeBrowsingEnhancedWhenOnBulOne}
                    </div>
                  </li>
                  <li>
                    <cr-icon icon="settings20:download" aria-hidden="true">
                    </cr-icon>
                    <div class="secondary">
                      $i18n{safeBrowsingEnhancedWhenOnBulTwo}
                    </div>
                  </li>
                  <li>
                    <cr-icon icon="settings20:gshield" aria-hidden="true">
                    </cr-icon>
                    <div class="secondary">
                      $i18n{safeBrowsingEnhancedWhenOnBulThree}
                    </div>
                  </li>
                  <li>
                    <cr-icon icon="settings:language" aria-hidden="true">
                    </cr-icon>
                    <div class="secondary">
                      $i18n{safeBrowsingEnhancedWhenOnBulFour}
                    </div>
                  </li>
                </ul>
              </div>
              <div class="column">
                <h2 class="description-header">
                  $i18n{columnHeadingConsider}
                </h2>
                <ul class="icon-bulleted-list">
                  <li>
                    <cr-icon icon="settings20:link"></cr-icon>
                    <div class="cr-secondary-text">
                      $i18n{safeBrowsingEnhancedThingsToConsiderBulOne}
                    </div>
                  </li>
                  <li>
                    <cr-icon icon="settings20:account-circle"></cr-icon>
                    <div class="cr-secondary-text">
                      $i18n{safeBrowsingEnhancedThingsToConsiderBulTwo}
                    </div>
                  </li>
                  <li>
                    <cr-icon icon="settings:performance"></cr-icon>
                    <div class="cr-secondary-text">
                      $i18n{safeBrowsingEnhancedThingsToConsiderBulThree}
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div id="learnMoreLabelContainer">
              <div class="cr-secondary-text">
                $i18nRaw{safeBrowsingEnhancedLearnMoreLabel}
              </div>
            </div>
          </controlled-radio-button>
        </settings-radio-group>
      </div>
    </security-page-feature-row>
    <template is="dom-if" if="[[enableBundledSecuritySettingsSecureDnsV2_]]">
      <settings-secure-dns-v2
        id="secureDnsV2Row"
        prefs="{{prefs}}"
        class="box"
        on-toggle-button-change="onSecureDnsToggleChange_"
        on-expanded-change="onSecureDnsRowExpandedChange_"
        on-radio-group-change="onSecureDnsRadioGroupChange_">
      </settings-secure-dns-v2>
    </template>
    <security-page-feature-row id="javascriptGuardrailsRow"
        pref="{{prefs.generated.javascript_optimizer}}"
        name="[[javascriptOptimizerSettingEnum_.ALLOWED]]"
        numeric-unchecked-values="[[javascriptGuardrailsOff_]]"
        numeric-checked-value=
            "[[javascriptOptimizerSettingEnum_.BLOCKED_FOR_UNFAMILIAR_SITES]]"
        class="box" label="$i18n{securityJavascriptGuardrailsTitle}"
        sub-label="$i18n{securityJavascriptGuardrailsDesc}"
        state-text-map="[[javascriptGuardrailsStateTextMap_]]">
      <div slot="collapse">
        <settings-radio-group id="javascriptGuardrailsRadioGroup"
            class="settings-radio-group-feature-row"
            pref="{{prefs.generated.javascript_optimizer}}"
            selectable-elements="controlled-radio-button">
          <controlled-radio-button id="blockForUnfamiliarSites"
              name=
              "[[javascriptOptimizerSettingEnum_.BLOCKED_FOR_UNFAMILIAR_SITES]]"
              pref="[[prefs.generated.javascript_optimizer]]"
              label="$i18n{securityJavascriptGuardrailsUnrecognizedSites}">
            <div class="settings-radio-button-subtitle">
              $i18n{securityJavascriptGuardrailsUnrecognizedSitesDesc}
            </div>
          </controlled-radio-button>
          <controlled-radio-button id="blockForAllSites"
              name="[[javascriptOptimizerSettingEnum_.BLOCKED]]"
              pref="[[prefs.generated.javascript_optimizer]]"
              label="$i18n{securityJavascriptGuardrailsStrictForAllSites}">
            <div class="settings-radio-button-subtitle">
              $i18n{securityJavascriptGuardrailsStrictForAllSitesDesc}
            </div>
          </controlled-radio-button>
        </settings-radio-group>
        <div id="manageSiteExceptionsRow">
          <div class="cr-secondary-text">
            $i18n{securityJavascriptGuardrailsManageSiteExceptionsDesc}
          </div>
          <cr-button id="manageSiteExceptionsButton"
              on-click="onManageSiteExceptionsClick_">
            $i18n{securityJavascriptGuardrailsManageSiteExceptions}
          </cr-button>
        </div>
      </div>
    </security-page-feature-row>
    <security-page-feature-row id="httpsFirstModeRow"
        on-expanded-change="onHttpsFirstModeRowClick_"
        on-toggle-button-change="onHttpsFirstModeToggleChange_"
        pref="{{prefs.generated.https_first_mode_enabled}}"
        label="$i18n{securityHttpsFirstModeToggleLabel}"
        sub-label="$i18n{httpsFirstModeSectionDescription}" class="box"
        numeric-unchecked-values="[[httpsFirstModeUncheckedValues_]]"
        numeric-checked-value="[[httpsFirstModeSettingEnum_.ENABLED_BALANCED]]"
        state-text-map="[[httpsFirstModeStateTextMap_]]"
        show-new-badge="[[showNewBadge_]]">
      <div slot="collapse">
        <settings-radio-group id="httpsFirstModeRadioGroup"
            class="settings-radio-group-feature-row"
            pref="{{prefs.generated.https_first_mode_enabled}}"
            selectable-elements="controlled-radio-button"
            on-change="onHttpsFirstModeRadioGroupChange_">
          <controlled-radio-button id="httpsFirstModeEnabledBalanced"
              name="[[httpsFirstModeSettingEnum_.ENABLED_BALANCED]]"
              pref="[[prefs.generated.https_first_mode_enabled]]"
              label="$i18n{securityHttpsFirstModeBalancedLabel}"
              disabled="[[!isHttpsFirstModeEnabled_]]">
            <div class="settings-radio-button-subtitle">
              $i18n{securityHttpsFirstModeBalancedSublabel}
            </div>
          </controlled-radio-button>
          <controlled-radio-button id="httpsFirstModeEnabledStrict"
              name="[[httpsFirstModeSettingEnum_.ENABLED_FULL]]"
              pref="[[prefs.generated.https_first_mode_enabled]]"
              label="$i18n{securityHttpsFirstModeStrictLabel}"
              disabled="[[!isHttpsFirstModeEnabled_]]">
            <div class="settings-radio-button-subtitle">
              $i18n{securityHttpsFirstModeStrictSublabel}
            </div>
          </controlled-radio-button>
        </settings-radio-group>
      </div>
    </security-page-feature-row>
  </settings-section>
  <settings-section page-title="$i18n{securityAccountAndNetworkSectionTitle}">
    <settings-toggle-button id="passwordsLeakToggle"
        pref="{{prefs.generated.password_leak_detection}}"
        label="$i18n{securityPasswordsLeakDetectionTitle}"
        sub-label="$i18n{securityPasswordsLeakDetectionDesc}"
        on-change="onPasswordsLeakToggleChange_">
    </settings-toggle-button>
    <template is="dom-if" if="[[!enableBundledSecuritySettingsSecureDnsV2_]]">
      <settings-secure-dns id="secureDnsRow" prefs="{{prefs}}" class="no-hr"
          on-change="onSecureDnsToggleClick_">
      </settings-secure-dns>
    </template>
    <template is="dom-if" if="[[enableSecurityKeysSubpage_]]">
      <cr-link-row id="securityKeysSubpageTrigger"
          label="$i18n{securityKeysTitle}" sub-label="$i18n{securityKeysDesc}"
          on-click="onSecurityKeysClick_"
          role-description="$i18n{subpageArrowRoleDescription}">
      </cr-link-row>
    </template>
    <cr-link-row id="manageCertificatesLinkRow"
        role-description="$i18n{subpageArrowRoleDescription}"
        label="$i18n{manageCertificates}"
        sub-label="$i18n{manageCertificatesDescription}"
        on-click="onManageCertificatesClick_" external>
    </cr-link-row>
  </settings-section>
  <settings-section>
    <cr-link-row id="advancedProtectionProgramLinkRow" class="box"
        start-icon="settings20:gshield"
        on-click="onAdvancedProtectionProgramClick_"
        external using-slotted-label>
      <div slot="label">$i18nRaw{securityAdvancedProtectionProgramLabel}</div>
    </cr-link-row>
  </settings-section>
  <template is="dom-if" if="[[showDisableSafebrowsingDialog_]]" restamp>
    <settings-simple-confirmation-dialog
        title-text="$i18n{safeBrowsingDisableDialog}"
        body-text="$i18n{safeBrowsingDisableDialogDesc}"
        confirm-text="$i18n{safeBrowsingDisableDialogConfirm}"
        on-close="onDisableSafebrowsingDialogClose_">
    </settings-simple-confirmation-dialog>
  </template>
</settings-subpage>
<!--_html_template_end_-->`;
}
