<div>
  <cd-table
    #table
    [data]="hosts"
    [columns]="columns"
    columnMode="flex"
    (fetchData)="getHosts($event)"
    [selectionType]="selectionType"
    [searchableObjects]="true"
    [serverSide]="false"
    [maxLimit]="25"
    identifier="hostname"
    forceIdentifier="true"
    (updateSelection)="updateSelection($event)"
    emptyStateTitle="No nodes available"
    i18n-emptyStateTitle
    emptyStateMessage="Add your first gateway node to start using NVMe over Fabrics. Nodes provide the resources required to expose NVMe/TCP block storage."
    i18n-emptyStateMessage
  >
    <cd-table-actions
      class="table-actions"
      [permission]="permission"
      [selection]="selection"
      [tableActions]="tableActions">
    </cd-table-actions>
  </cd-table>
</div>

<ng-template
  #hostNameTpl
  let-value="data.value"
>
  <span class="cds-ml-2">{{ value }}</span>
</ng-template>

<ng-template
  #addrTpl
  let-value="data.value"
>
  <span>{{ value || '-' }}</span>
</ng-template>

<ng-template
  #statusTpl
  let-value="data.value"
  let-row="data.row"
>
@if (value) {
  <div
    [cdsStack]="'horizontal'"
    gap="4"
  >
  @if (value === HostStatus.AVAILABLE || value === HostStatus.RUNNING) {
    <cd-icon type="success"></cd-icon>
  } @else {
    <cd-icon type="error"></cd-icon>
  }
  <span class="cds-ml-3">{{ value | titlecase }}</span>
  </div>
} @else {
  <span>-</span>
}
</ng-template>

<ng-template
  #labelsTpl
  let-value="data.value"
>
@if (value && value.length > 0) {
  <cds-tag *ngFor="let label of value"
           class="tag tag-dark">{{ label }}</cds-tag>
} @else {
  <span>-</span>
}
</ng-template>


