<div class="page-spacing">
  <header>
    <div class="page-title">
      {{ 'retrieval-agents.drivers.title' | translate }}
      <div class="add-driver-container">
        <nsi-dropdown-button
          icon="circle-plus"
          iconAndText
          fullWidth
          [popupRef]="driverTypes">
          {{ 'retrieval-agents.drivers.add.button' | translate }}
        </nsi-dropdown-button>
        <pa-dropdown #driverTypes>
          @for (driver of driverOptions() || {}; track driver.key) {
            <pa-option
              (selectOption)="addDriver(driver.key)"
              [description]="getDriverDescription(driver.key)"
              [disabled]="isDriverDisabled(driver.key)">
              {{ driver.title }}
            </pa-option>
          }
        </pa-dropdown>
      </div>
    </div>
    <div class="page-description">{{ 'retrieval-agents.drivers.description' | translate }}</div>
  </header>

  <div class="driver-list">
    @if (!drivers || drivers().length === 0) {
      <nsi-info-card>
        {{ 'retrieval-agents.drivers.empty' | translate }}
      </nsi-info-card>
    } @else {
      <pa-table
        columns="3fr 1fr 96px"
        border
        class="driver-list">
        <pa-table-header>
          <pa-table-cell header>{{ 'retrieval-agents.drivers.table.name' | translate }}</pa-table-cell>
          <pa-table-cell header>{{ 'retrieval-agents.drivers.table.provider' | translate }}</pa-table-cell>
          <pa-table-cell-menu header>{{ 'retrieval-agents.drivers.table.actions' | translate }}</pa-table-cell-menu>
        </pa-table-header>
        @for (driver of drivers(); track driver.identifier) {
          <pa-table-row>
            <pa-table-cell>{{ driver.name }}</pa-table-cell>
            <pa-table-cell>
              {{ driver.provider }}
            </pa-table-cell>
            <pa-table-cell-menu>
              <div>
                <pa-button
                  aspect="basic"
                  size="small"
                  icon="more-vertical"
                  [paPopup]="menu"></pa-button>
                <pa-dropdown #menu>
                  <pa-option (selectOption)="onEditClick(driver, $event)">
                    {{ 'retrieval-agents.drivers.table.edit' | translate }}
                  </pa-option>
                  <pa-option
                    destructive=""
                    (selectOption)="onDeleteClick(driver, $event)">
                    {{ 'retrieval-agents.drivers.table.delete' | translate }}
                  </pa-option>
                </pa-dropdown>
              </div>
            </pa-table-cell-menu>
          </pa-table-row>
        }
      </pa-table>
    }
  </div>
</div>
