<div class="wide-table-container">
  <div class="table-actions">
    <div class="filter-container">
      <pa-input
        [value]="filter$ | async"
        (valueChange)="filter$.next($event)">
        Filter
      </pa-input>
    </div>
    @if (canCreateAccount | async) {
      <pa-button
        routerLink="./add"
        kind="primary"
        icon="plus"
        iconAndText>
        Add account
      </pa-button>
    }
  </div>

  <pa-infinite-scroll (reachAnchor)="onReachAnchor()">
    <pa-table columns="repeat(6, 1fr) 96px">
      <pa-table-header noBackground>
        <pa-table-cell header>Id</pa-table-cell>
        <pa-table-cell header>Email</pa-table-cell>
        <pa-table-cell header>Title</pa-table-cell>
        <pa-table-cell header>Slug</pa-table-cell>
        <pa-table-cell header>Type</pa-table-cell>
        <pa-table-cell header>Creation</pa-table-cell>
        <pa-table-cell-menu header></pa-table-cell-menu>
      </pa-table-header>
      @for (account of accounts$ | async | slice: 0 : lastIndex; track account) {
        <pa-table-row
          [routerLink]="account.id"
          clickable>
          <pa-table-cell>
            <small>{{ account.id }}</small>
          </pa-table-cell>
          <pa-table-cell>{{ account.email }}</pa-table-cell>
          <pa-table-cell>{{ account.title }}</pa-table-cell>
          <pa-table-cell>{{ account.slug }}</pa-table-cell>
          <pa-table-cell>{{ account.type }}</pa-table-cell>
          <pa-table-cell>
            <pa-datetime
              [datetime]="account.created + '+00:00'"
              format="numerical"
              dateOnly></pa-datetime>
          </pa-table-cell>
          <pa-table-cell-menu>
            @if (canDelete | async) {
              <pa-button
                icon="trash"
                aspect="basic"
                size="small"
                kind="destructive"
                (click)="deleteAccount($event, account)">
                Delete account
              </pa-button>
            }
          </pa-table-cell-menu>
        </pa-table-row>
      }
    </pa-table>
  </pa-infinite-scroll>
</div>
