import { getTrustedHTML } from '//resources/js/static_types.js';
export function getTemplate() {
    return getTrustedHTML `<!--_html_template_start_--><style>
  div, td, th {
    border-color: var(--border-color);
    border-style: solid;
  }

  div {
    border-width: 1px;
    max-height: 100%;
    overflow: auto;
  }

  table {
    border-collapse: separate;
    border-spacing: 0;
    /* Per
     * https://limebrains.com/blog/2021-03-02T13:00-heigh-100-inside-table-td
     * this forces the header buttons to expand vertically, making them easier
     * to click on.
     */
    height: 1px;
    width: 100%;
  }

  thead, tfoot {
    background: var(--header-background);
    position: sticky;
    z-index: 1;
  }

  thead {
    top: 0;
  }

  tbody > tr[aria-selected="false"]:hover {
    background: var(--data-hover-background);
    cursor: pointer;
  }

  tbody > tr[aria-selected="true"] {
    background: var(--data-selected-background);
  }

  tfoot {
    bottom: 0;
  }

  tfoot th {
    text-align: right;
  }

  thead th {
    border-width: 0 0 1px 0;
  }

  td, tfoot th {
    border-width: 1px 0 0 0;
  }

  tbody > tr:first-child > td {
    border-width: 0;
  }

  td, th {
    font-weight: normal;
    padding-inline: var(--cell-padding);
    text-align: left;
    text-wrap: nowrap;
    vertical-align: top;
  }

  th[aria-sort] {
    padding: 0;
  }

  th[aria-sort] button {
    align-items: start;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    display: flex;
    font: inherit;
    height: 100%;
    padding-inline: var(--cell-padding);
    height: 100%;
    text-align: left;
    width: 100%;
  }

  th[aria-sort] button:hover {
    background: var(--header-hover-background);
  }

  th[aria-sort] button::after {
    margin-left: auto;
  }

  th[aria-sort='none'] button::after {
    content: '⇅';
  }

  th[aria-sort='ascending'] button::after {
    content: '↑';
  }

  th[aria-sort='descending'] button::after {
    content: '↓';
  }

  ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .send-error::after {
    content: ' ❌';
  }

  td.number {
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  pre {
    margin: 0;
  }
</style>
<div>
  <table>
    <thead>
      <tr></tr>
    </thead>
    <tbody></tbody>
    <tfoot>
      <tr>
        <th scope=row>Row Count</th>
        <td>0</td>
      </tr>
    </tfoot>
  </table>
</div>
<!--_html_template_end_-->`;
}
