chrome/browser/resources/tab_search/tab_search_group_item.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 {TabSearchGroupItemElement} from './tab_search_group_item.js';

export function getHtml(this: TabSearchGroupItemElement) {
  // clang-format off
  return html`<!--_html_template_start_-->
<div id="iconContainer">
  <!-- TODO(romanarora): Replace with a 16x16 SVG. -->
  <svg id="icon" width="32" height="32" viewBox="0 0 32 32" fill="none"
      xmlns="http://www.w3.org/2000/svg">
    <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="4"
        width="28" height="24">
      <path fill-rule="evenodd" clip-rule="evenodd"
          d="M6 5C6 4.44772 6.44772 4 7 4H29C29.5523 4 30 4.44772 30 5V23C30 23.5523 29.5523 24 29 24H7C6.44772 24 6 23.5523 6 23V5ZM7.99992 22V6.33335H17.9999V12H27.9999V22H7.99992ZM2 9C2 8.44772 2.44772 8 3 8H4V26H26V27C26 27.5523 25.5523 28 25 28H3C2.44772 28 2 27.5523 2 27V9Z"
          fill="#616161">
    </mask>
    <g mask="url(#mask0)">
      <rect width="32" height="32" fill="#5F6368">
    </g>
  </svg>
</div>
<div class="text-container" aria-hidden="true">
  <div id="primaryText" title="${this.data.tabGroup.title}"></div>
  <div id="secondaryTextContainer">
    <svg id="groupSvg" viewBox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg">
      <circle id= "groupDot" cx="0" cy="0" r="4">
    </svg>
    <div id="secondaryText">${this.tabCountText_()}</div>
    <div class="separator">•</div>
    <div id="timestamp">${this.data.tabGroup.lastActiveElapsedText}</div>
  </div>
</div>
<!--_html_template_end_-->`;
  // clang-format on
}