<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>
    <pa-button
      routerLink="./add"
      kind="primary"
      icon="plus"
      iconAndText>
      Add zone
    </pa-button>
  </div>

  <pa-infinite-scroll (reachAnchor)="onReachAnchor()">
    <pa-table columns="repeat(3, 1fr) repeat(2, 160px) 96px">
      <pa-table-header noBackground>
        <pa-table-cell header>Id</pa-table-cell>
        <pa-table-cell header>Slug</pa-table-cell>
        <pa-table-cell header>Title</pa-table-cell>
        <pa-table-cell header>Subdomain</pa-table-cell>
        <pa-table-cell header>Cloud provider</pa-table-cell>
        <pa-table-cell-menu header></pa-table-cell-menu>
      </pa-table-header>
      @for (zone of zones$ | async | slice: 0 : lastIndex; track zone.slug) {
        <pa-table-row
          [routerLink]="zone.id"
          clickable>
          <pa-table-cell>
            <small>{{ zone.id }}</small>
          </pa-table-cell>
          <pa-table-cell>{{ zone.slug }}</pa-table-cell>
          <pa-table-cell>{{ zone.title }}</pa-table-cell>
          <pa-table-cell>{{ zone.subdomain }}</pa-table-cell>
          <pa-table-cell>{{ zone.cloud_provider }}</pa-table-cell>
          <pa-table-cell-menu>
            <pa-button
              icon="trash"
              aspect="basic"
              size="small"
              kind="destructive"
              (click)="deleteZone($event, zone)">
              Delete zone
            </pa-button>
          </pa-table-cell-menu>
        </pa-table-row>
      }
    </pa-table>
  </pa-infinite-scroll>
</div>
