chrome/browser/resources/side_panel/customize_chrome/cards.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 {CardsElement} from './cards.js';

export function getHtml(this: CardsElement) {
  // clang-format off
  return html`<!--_html_template_start_-->
<div id="showToggleContainer" @click="${this.onShowToggleClick_}">
  <div id="showToggleTitle">$i18n{showCardsToggleTitle}</div>
  <cr-policy-indicator indicator-type="devicePolicy"
      ?hidden="${!this.managedByPolicy_}">
  </cr-policy-indicator>
  <cr-toggle title="$i18n{showCardsToggleTitle}" ?checked="${this.show_}"
      ?disabled="${this.managedByPolicy_}"
      @change="${this.onShowChange_}">
  </cr-toggle>
</div>
<div id="cards">
  <cr-collapse ?opened="${this.show_}" ?no-animation="${!this.initialized_}">
    <hr class="sp-hr">
    ${this.modules_.map((item, index) => html`
      <div class="card" data-index="${index}" @click="${this.onCardClick_}">
        <cr-checkbox class="card-checkbox label-first" data-index="${index}"
            ?checked="${item.enabled}" ?disabled="${this.managedByPolicy_}"
            title="${item.name}" @change="${this.onCardCheckboxChange_}">
          <div class="card-name">${item.name}</div>
        </cr-checkbox>
      </div>
    `)}
  </cr-collapse>
</div>
<!--_html_template_end_-->`;
  // clang-format on
}