chromium/chrome/browser/resources/ash/settings/os_search_page/search_and_assistant_settings_card.html

<style include="settings-shared">
  :host-context(body.revamp-wayfinding-enabled) settings-toggle-button {
    --cr-icon-button-margin-end: 16px;
    --iron-icon-fill-color: var(--cros-sys-primary);
  }

  .sub-item {
    padding-inline-start: var(--cr-section-indent-width);
  }
</style>

<settings-card header-text="$i18n{osSearchPageTitle}">
  <!-- Search -->
  <template is="dom-if" if="[[!isQuickAnswersSupported_]]">
    <settings-search-engine
        deep-link-focus-id$="[[Setting.kPreferredSearchEngine]]">
    </settings-search-engine>
  </template>
  <template is="dom-if" if="[[isQuickAnswersSupported_]]">
    <cr-link-row
        id="searchRow"
        start-icon="[[rowIcons_.searchEngine]]"
        label="$i18n{searchSubpageTitle}"
        on-click="onSearchClick_"
        role-description="$i18n{subpageArrowRoleDescription}">
    </cr-link-row>
  </template>

  <!-- Google Assistant -->
  <template is="dom-if" if="[[isAssistantAllowed_]]">
    <cr-link-row
        id="assistantRow"
        start-icon="[[rowIcons_.assistant]]"
        class="hr"
        label="$i18n{searchGoogleAssistant}"
        sub-label="[[getAssistantEnabledDisabledLabel_(
            prefs.settings.voice_interaction.enabled.value)]]"
        on-click="onGoogleAssistantClick_"
        role-description="$i18n{subpageArrowRoleDescription}">
    </cr-link-row>
  </template>
  <template is="dom-if" if="[[isRevampWayfindingEnabled_]]">
    <settings-toggle-button id="contentRecommendationsToggle"
        class="hr"
        icon="[[rowIcons_.contentRecommendations]]"
        pref="{{prefs.settings.suggested_content_enabled}}"
        label="$i18n{enableSuggestedContent}"
        sub-label="$i18n{enableSuggestedContentDesc}"
        learn-more-url="$i18n{suggestedContentLearnMoreURL}">
    </settings-toggle-button>
  </template>

  <template is="dom-if" if="[[isMahiEnabled_]]">
    <settings-toggle-button id="mahiToggle"
        class="hr"
        icon="[[rowIcons_.mahi]]"
        pref="{{prefs.settings.mahi_enabled}}"
        label="$i18n{enableHelpMeRead}"
        sub-label="$i18n{enableHelpMeReadDesc}"
        deep-link-focus-id$="[[Setting.kMahiOnOff]]"
        >
    </settings-toggle-button>
  </template>

  <!--TODO(b:337868408) deep-link and learn more link for magicboost-->
  <template is="dom-if" if="[[isMagicBoostFeatureEnabled_]]">
    <settings-toggle-button id="magicBoostToggle"
        class="hr"
        icon="[[rowIcons_.magicBoost]]"
        pref="{{prefs.settings.magic_boost_enabled}}"
        label="$i18n{enableMagicBoost}"
        sub-label="$i18n{enableMagicBoostDesc}"
        deep-link-focus-id$="[[Setting.kMagicBoostOnOff]]"
        >
    </settings-toggle-button>
    <iron-collapse opened="[[prefs.settings.magic_boost_enabled.value]]"
        id="magicBoostCollapse">
      <div class="sub-item">
        <settings-toggle-button id="helpMeReadToggle"
            class="hr"
            icon="[[rowIcons_.helpMeRead]]"
            pref="{{prefs.settings.mahi_enabled}}"
            label="$i18n{enableHelpMeRead}"
            sub-label="$i18n{enableHelpMeReadDesc}"
            deep-link-focus-id$="[[Setting.kMahiOnOff]]"
            learn-more-url="$i18n{helpMeReadWriteLearnMoreUrl}">
        </settings-toggle-button>
      </div>
      <div class="sub-item">
        <settings-toggle-button id="helpMeWriteToggle"
            class="hr"
            icon="[[rowIcons_.helpMeWrite]]"
            pref="{{prefs.assistive_input.orca_enabled}}"
            label="$i18n{enableHelpMeWrite}"
            sub-label="$i18n{enableHelpMeWriteDesc}"
            deep-link-focus-id$="[[Setting.kShowOrca]]"
            learn-more-url="$i18n{helpMeReadWriteLearnMoreUrl}">
        </settings-toggle-button>
      </div>
    </iron-collapse>
  </template>

</settings-card>