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 your-saved-info-shared
    settings-columned-section cr-icons">
</style>

<settings-subpage page-title="$i18n{personalContextAutofillSettingsTitle}"
    class="multi-card">
  <div class="card">
    <!-- TODO(crbug.com/512202637) Make strings translatable.-->
    <!-- TODO(crbug.com/519142450) Fix styling to match the mocks. -->
    <settings-toggle-button id="suggestionsFromGeminiToggle"
        pref="{{prefs.generated.find_and_fill_with_gemini}}"
        label="$i18n{personalContextAutofillSettingsSwitchTitle}"
        sub-label="$i18n{personalContextAutofillSettingsSwitchSummary}"
        on-settings-boolean-control-change="onToggleChange_">
    </settings-toggle-button>
    <cr-link-row id="manageConnectedAppsLinkRow"
        label="$i18n{personalContextAutofillSettingsManageConnectedAppsTitle}"
        sub-label="$i18n{personalContextAutofillSettingsManageConnectedAppsSummary}"
        on-click="onManageConnectedAppsClick_"
        external>
    </cr-link-row>
  </div>
  <div class="card" hidden$="[[!showCustomShortcut_(
          prefs.generated.find_and_fill_with_gemini.value,isAtMemoryTriggerCustomizationAllowed_)]]">
    <div class="cr-row keyboard-shortcut-setting"
        id="atMemoryTriggerSetting">
      <div class="flex cr-padded-text">
        <div class="shortcut-label" aria-hidden>
          $i18n{atMemoryTriggerSettingLabel}
        </div>
        <div class="secondary">
          $i18n{atMemoryTriggerSettingSecondaryLabel}
        </div>
      </div>
      <cr-shortcut-input class="cr-padded-text shortcut-input"
          input-aria-label="$i18n{atMemoryTriggerSettingInputAreaLabel}"
          edit-button-aria-label="$i18n{atMemoryTriggerSettingEditButtonLabel}"
          clear-button-aria-label=
              "$i18n{atMemoryTriggerSettingClearButtonLabel}"
          shortcut="[[atMemoryTrigger_]]"
          allow-ctrl-alt-shortcuts
          on-shortcut-updated="onAtMemoryTriggerSettingUpdated_">
      </cr-shortcut-input>
    </div>
  </div>
  <div id="qualityLoggingCard" class="card" hidden$="[[!showQualityLogging_(
          prefs.generated.find_and_fill_with_gemini.value, isAtMemoryEnabled_)]]">
    <div class="cr-row first">
      <div class="flex cr-padded-text">
        <h2 class="flex">$i18n{suggestionsFromGeminiQualityLoggingTitle}</h2>
        <div class="secondary">
          $i18n{suggestionsFromGeminiQualityLoggingSubtitle}
        </div>
      </div>
    </div>
    <div class="settings-columned-section">
      <div class="column">
        <h3 class="description-header">
          $i18n{columnHeadingWhenUsed}
        </h3>
        <ul class="icon-bulleted-list">
          <li>
            <cr-icon icon="settings20:finance" aria-hidden="true"></cr-icon>
            <div class="cr-secondary-text">
              $i18n{suggestionsFromGeminiWhenUsed1}
            </div>
          </li>
          <li>
            <cr-icon icon="settings20:personal-recommendations"
                aria-hidden="true"></cr-icon>
            <div class="cr-secondary-text">
              $i18n{suggestionsFromGeminiWhenUsed2}
            </div>
          </li>
        </ul>
      </div>
      <div class="column">
        <h3 class="description-header">$i18n{columnHeadingConsider}</h3>
        <ul class="icon-bulleted-list">
          <li>
            <cr-icon icon="settings20:insight-spark" aria-hidden="true">
            </cr-icon>
            <div class="cr-secondary-text">
              $i18n{suggestionsFromGeminiConsider1}
            </div>
          </li>
          <li>
            <cr-icon icon="settings20:account-box" aria-hidden="true">
            </cr-icon>
            <div class="cr-secondary-text">
              $i18n{suggestionsFromGeminiConsider2}
            </div>
          </li>
          <li id="considerNoLoggingEnterprise" hidden$="[[!showConsiderNoLoggingEnterprise_(
                          prefs.autofill.personal_context.find_and_fill_with_gemini_settings.value)]]">
            <cr-icon icon="cr20:domain" aria-hidden="true"></cr-icon>
            <div class="cr-secondary-text">
              $i18n{suggestionsFromGeminiConsider3}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</settings-subpage><!--_html_template_end_-->`;
}
