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="Lorem Ipsum" class="multi-card">
  <div class="card">
    <!-- TODO(crbug.com/512202637) Add strings and make them translatable.-->
    <!-- TODO(crbug.com/519142450) Fix styling to match the mocks. -->
    <settings-toggle-button id="suggestionsFromGeminiToggle"
        pref="{{prefs.autofill.personal_context.settings_toggle_status}}"
        label="Lorem Ipsum">
    </settings-toggle-button>
    <cr-link-row id="manageConnectedAppsLinkRow"
        label="Lorem ipsum"
        sub-label="Lorem Ipsum"
        on-click="onManageConnectedAppsClick_"
        external>
    </cr-link-row>
  </div>
  <div class="card" hidden$="[[!atMemoryTriggerSettingEnabled_()]]">
    <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>
  <template is="dom-if"
      if="[[showQualityLogging_(prefs.autofill.personal_context.settings_toggle_status.value, isAtMemoryEnabled_)]]"
      restamp>
    <div id="qualityLoggingCard" class="card">
      <div class="cr-row first">
        <h2 class="flex">$i18n{suggestionsFromGeminiQualityLoggingTitle}</h2>
      </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>
              <cr-icon icon="cr20:domain" aria-hidden="true"></cr-icon>
              <div class="cr-secondary-text">
                $i18n{suggestionsFromGeminiConsider3}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </template>
</settings-subpage><!--_html_template_end_-->`;
}
