chromium/chrome/browser/resources/tab_search/auto_tab_groups/auto_tab_groups_results.html.ts

// Copyright 2024 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {html} from '//resources/lit/v3_0/lit.rollup.js';

import type {AutoTabGroupsResultsElement} from './auto_tab_groups_results.js';

export function getHtml(this: AutoTabGroupsResultsElement) {
  // clang-format off
  return html`<!--_html_template_start_-->
<div class="auto-tab-groups-container">
  <div id="header"
      class="auto-tab-groups-header"
      aria-live="polite"
      aria-relevant="all">
    ${this.getTitle()}
  </div>
  <div id="scrollable">
    ${this.getOrganizations_().map(item => html`
      <auto-tab-groups-group
        name="${this.getName_(item)}"
        .tabs="${item.tabs}"
        first-new-tab-index="${item.firstNewTabIndex}"
        organization-id="${item.organizationId}"
        ?multi-tab-organization="${this.multiTabOrganization}"
        ?show-reject="${this.hasMultipleOrganizations_()}">
      </auto-tab-groups-group>
    `)}
  </div>
  ${this.multiTabOrganization ? html`
    <auto-tab-groups-results-actions show-clear
        ?multiple-organizations="${this.hasMultipleOrganizations_()}"
        @create-group-click="${this.onCreateAllGroupsClick_}">
    </auto-tab-groups-results-actions>
  ` : ''}
  <div class="feedback" role="toolbar" @keydown="${this.onFeedbackKeyDown_}">
    <div class="button-row">
      <div class="auto-tab-groups-body">
        $i18n{learnMoreDisclaimer1}
      </div>
      <cr-feedback-buttons id="feedbackButtons"
          tabindex="-1"
          selected-option="${this.feedbackSelectedOption_}"
          @selected-option-changed="${this.onFeedbackSelectedOptionChanged_}">
      </cr-feedback-buttons>
    </div>
    <div class="auto-tab-groups-body">
      $i18n{learnMoreDisclaimer2}
      <div id="learnMore" class="auto-tab-groups-link"
          @click="${this.onLearnMoreClick_}"
          @keydown="${this.onLearnMoreKeyDown_}"
          role="link"
          tabindex="0"
          aria-label="$i18n{learnMoreAriaLabel}">
        $i18n{learnMore}
      </div>
    </div>
  </div>
</div>
<!--_html_template_end_-->`;
  // clang-format on
}