// Copyright 2025 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 { ariaLabel } from '../tab_data.js';
export function getHtml() {
    return html `<!--_html_template_start_-->
<div id="header">
  <cr-icon-button id="closeButton"
      iron-icon="tab-search:close"
      title="$i18n{splitViewCloseButtonAriaLabel}"
      @click="${this.onCloseClick_}"
      @focus="${this.onCloseButtonFocus_}"
      @blur="${this.onCloseButtonBlur_}">
  </cr-icon-button>
  <cr-tooltip for="closeButton" position="top" offset="0"
      fit-to-visible-bounds manual-mode>
    $i18n{splitViewCloseButtonAriaLabel}
  </cr-tooltip>
  ${this.allEligibleTabs_.length === 0 ? html `
        <picture>
          <source media="(prefers-color-scheme: dark)"
              srcset="./split_view/images/empty_dark.svg">
          <img id="product-logo" srcset="./split_view/images/empty.svg" alt="">
        </picture>
      ` :
        html ``}
  <h1 class="title">${this.title_}</h1>
  ${this.allEligibleTabs_.length === 0 ?
        html `<div class="body">$i18n{splitViewEmptyBody}</div>` :
        html ``}
</div>
<div class="tab-list" ?hidden="${this.allEligibleTabs_.length === 0}">
  <selectable-lazy-list id="splitTabsList" class="scroller"
      .items="${this.allEligibleTabs_}"
      item-size="66"
      max-height="${this.minViewportHeight_}"
      role="listbox"
      .template="${(item, index) => html `<tab-search-item class="mwb-list-item selectable"
          hide-close-button
          hide-timestamp
          size="large"
          .data="${item}"
          data-index="${index}"
          @click="${this.onTabClick_}"
          @focus="${this.onTabFocus_}"
          @focusout="${this.onTabFocusout_}"
          @keydown="${this.onTabKeydown_}"
          role="option"
          aria-label="${ariaLabel(item)}"
          tabindex="0">
        </tab-search-item>`}">
  </selectable-lazy-list>
</div>
<!--_html_template_end_-->`;
}
