chromium/chrome/browser/resources/side_panel/reading_list/reading_list_app.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 {ReadingListAppElement} from './reading_list_app.js';

export function getHtml(this: ReadingListAppElement) {
  return html`<!--_html_template_start_-->
<div id="content" ?hidden="${this.loadingContent_}">
  <sp-empty-state
      ?hidden="${!this.isReadingListEmpty_()}"
      image-path="./images/read_later_empty.svg"
      dark-image-path="./images/read_later_empty_dark.svg"
      heading="$i18n{emptyStateHeader}"
      body="${this.getEmptyStateSubheaderText_()}">
  </sp-empty-state>
  <div id="readingListList" class="sp-scroller sp-scroller-top-of-page"
      @keydown="${this.onItemKeyDown_}"
      ?hidden="${!this.shouldShowList_()}">
    <div class="sp-card" ?hidden="${!this.unreadItems_.length}">
      <sp-heading compact hide-back-button>
        <h2 slot="heading">$i18n{unreadHeader}</h2>
      </sp-heading>
      ${this.unreadItems_.map((item, index) => html`
        <reading-list-item data-url="${item.url.url}" data-index="${index}"
            @focus="${this.onItemFocus_}"
            aria-label="${this.ariaLabel_(item)}" class="unread-item"
            .data="${item}" ?button-ripples="${this.buttonRipples}">
        </reading-list-item>
      `)}
    </div>
    <div class="sp-cards-separator" ?hidden="${!this.shouldShowHr_()}"></div>
    <div class="sp-card" ?hidden="${!this.readItems_.length}">
      <sp-heading compact hide-back-button>
        <h2 slot="heading">$i18n{readHeader}</h2>
      </sp-heading>
      ${this.readItems_.map((item, index) => html`
        <reading-list-item data-url="${item.url.url}" data-index="${index}"
            @focus="${this.onItemFocus_}"
            aria-label="${this.ariaLabel_(item)}"
            .data="${item}" ?button-ripples="${this.buttonRipples}">
        </reading-list-item>
      `)}
    </div>
  </div>
  <sp-footer ?pinned="${!this.isReadingListEmpty_()}">
    <cr-button id="currentPageActionButton" class="floating-button"
        aria-label="${this.getCurrentPageActionButtonText_()}"
        @click="${this.onCurrentPageActionButtonClick_}"
        ?disabled="${this.getCurrentPageActionButtonDisabled_()}">
      <cr-icon id="currentPageActionButtonIcon" aria-hidden="true"
          slot="prefix-icon"
          icon="${this.getCurrentPageActionButtonIcon_()}">
      </cr-icon>
      <div id="currentPageActionButtonText" aria-hidden="true">
        ${this.getCurrentPageActionButtonText_()}
      </div>
    </cr-button>
  </sp-footer>
</div>
<!--_html_template_end_-->`;
}