chromium/chrome/browser/resources/tab_search/tab_organization_selector.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 {TabOrganizationSelectorElement} from './tab_organization_selector.js';
import {OrganizationFeature} from './tab_organization_selector.js';

export function getHtml(this: TabOrganizationSelectorElement) {
  // clang-format off
  return html`
<!--_html_template_start_-->
<div ?hidden=${this.selectedState_ !== OrganizationFeature.NONE}>
  <div id="buttonContainer">
    <tab-organization-selector-button id="autoTabGroupsButton"
        top="true"
        heading="Auto tab groups"
        subheading="Check for suggestions"
        icon="cr:group"
        @click="${this.onAutoTabGroupsClick_}">
    </tab-organization-selector-button>
    <tab-organization-selector-button id="declutterButton"
        bottom="true"
        heading="Declutter"
        subheading="No inactive tabs"
        icon="cr:delete"
        @click="${this.onDeclutterClick_}">
    </tab-organization-selector-button>
  </div>
</div>

<div ?hidden=${this.selectedState_ !== OrganizationFeature.AUTO_TAB_GROUPS}>
  <auto-tab-groups-page></auto-tab-groups-page>
</div>

<div ?hidden=${this.selectedState_ !== OrganizationFeature.DECLUTTER}>
  <declutter-page></declutter-page>
</div>
<!--_html_template_end_-->`;
  // clang-format on
}