chromium/chrome/browser/resources/tab_search/auto_tab_groups/auto_tab_groups_group.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 {AutoTabGroupsGroupElement} from './auto_tab_groups_group.js';

export function getHtml(this: AutoTabGroupsGroupElement) {
  // clang-format off
  return html`<!--_html_template_start_-->
<div class="group">
  ${this.multiTabOrganization ? html`
    <div class="group-header-row">
      ${this.showInput_ ? html`
        <cr-input id="multiOrganizationInput" type="text" .value="${this.name}"
            @value-changed="${this.onNameChanged_}"
            aria-label="${this.getInputAriaLabel_()}"
            @focus="${this.onInputFocus_}"
            @blur="${this.onInputBlur_}"
            @keydown="${this.onInputKeyDown_}">
        </cr-input>
      ` : html`
        <div class="group-name-row">
          <div class="auto-tab-groups-header group-name">${this.name}</div>
          <cr-icon-button class="icon-edit"
              aria-label="${this.getEditButtonAriaLabel_()}"
              title="${this.getEditButtonAriaLabel_()}"
              @click="${this.onEditClick_}">
          </cr-icon-button>
        </div>
      `}
      ${this.showReject ? html`
        <cr-icon-button id="rejectButton"
            aria-label="${this.getRejectButtonAriaLabel_()}"
            title="${this.getRejectButtonAriaLabel_()}"
            iron-icon="tab-search:close"
            @click="${this.onRejectGroupClick_}">
        </cr-icon-button>
      ` : ''}
    </div>
    <div class="divider"></div>
  ` : html`
    <cr-input id="singleOrganizationInput" type="text" .value="${this.name}"
        @value-changed="${this.onNameChanged_}"
        aria-label="${this.getInputAriaLabel_()}"
        @focus="${this.onInputFocus_}"
        @keydown="${this.onInputKeyDown_}">
    </cr-input>
  `}
  <cr-page-selector id="selector" role="listbox" show-all
      @keydown="${this.onListKeyDown_}"
      selectable="tab-search-item"
      @iron-select="${this.onSelectedChanged_}">
    ${this.tabDatas_.map((item, index) => html`
      ${this.showNewTabSectionHeader_(index) ? html`
        <auto-tab-groups-new-badge></auto-tab-groups-new-badge>
      ` : ''}
      <tab-search-item class="mwb-list-item" .data="${item}"
          role="option"
          ?compact="${this.multiTabOrganization}"
          tabindex="${this.getTabIndex_(index)}"
          data-index="${index}"
          @close="${this.onTabRemove_}"
          @focus="${this.onTabFocus_}"
          @blur="${this.onTabBlur_}"
          in-suggested-group>
      </tab-search-item>
    `)}
  </cr-page-selector>
  ${!this.multiTabOrganization ? html`
    <auto-tab-groups-results-actions
        @create-group-click="${this.onCreateGroupClick_}">
    </auto-tab-groups-results-actions>
  ` : ''}
</div>
<!--_html_template_end_-->`;
  // clang-format on
}