<div class="widget-list-page page-spacing">
  <header>
    <div>
      <div class="page-title">
        {{ 'search.widgets.title' | translate }}
      </div>
      <div class="page-description">{{ 'search.widgets.page-description' | translate }}</div>
    </div>
    <pa-button (click)="createWidget()">{{ 'search.widgets.action.create-widget-button' | translate }}</pa-button>
  </header>

  @if (emptyList | async) {
    <nsi-info-card>{{ 'search.widgets.page-empty-message' | translate }}</nsi-info-card>
  } @else {
    <pa-table
      border
      [columns]="(inArag | async) ? '3fr 1fr 72px' : 'repeat(4, 1fr) 72px'">
      <pa-table-header>
        <pa-table-cell header>
          <span class="title-xxs">{{ 'search.widgets.table-columns.name' | translate }}</span>
        </pa-table-cell>
        @if (!(inArag | async)) {
          <pa-table-cell header>
            <span class="title-xxs">{{ 'search.widgets.table-columns.search-config' | translate }}</span>
          </pa-table-cell>
          <pa-table-cell header>
            <span class="title-xxs">{{ 'search.widgets.table-columns.model' | translate }}</span>
          </pa-table-cell>
        }
        <pa-table-cell header>
          <span class="title-xxs">{{ 'search.widgets.table-columns.date' | translate }}</span>
        </pa-table-cell>
        <pa-table-cell header>
          <span class="title-xxs">{{ 'search.widgets.table-columns.actions' | translate }}</span>
        </pa-table-cell>
      </pa-table-header>

      @for (widget of widgetList | async; track widget.slug) {
        <pa-table-row>
          <pa-table-cell>
            <a
              class="table-link"
              [routerLink]="'./' + widget.slug">
              {{ widget.name }}
            </a>
          </pa-table-cell>
          @if (!(inArag | async)) {
            <pa-table-cell>
              <span class="body-s">{{ widget.searchConfigId }}</span>
            </pa-table-cell>
            <pa-table-cell>
              @if (widget.generativeModel) {
                <span class="body-s">
                  {{ (modelNames | async)?.[widget.generativeModel] || widget.generativeModel }}
                </span>
              }
            </pa-table-cell>
          }
          <pa-table-cell>
            <span class="body-s"><pa-datetime [datetime]="widget.creationDate"></pa-datetime></span>
          </pa-table-cell>
          <pa-table-cell-menu center>
            <div>
              <pa-button
                icon="more-vertical"
                aspect="basic"
                size="small"
                [paPopup]="itemMenu">
                {{ 'search.widgets.action.list-item-menu' | translate }}
              </pa-button>

              <pa-dropdown #itemMenu>
                <pa-option (selectOption)="openPreview(widget.slug)">
                  {{ 'search.widgets.action.preview' | translate }}
                </pa-option>
                <pa-option (selectOption)="rename(widget.slug, widget.name)">
                  {{ 'search.widgets.action.rename' | translate }}
                </pa-option>
                <pa-option (selectOption)="duplicateAsNew(widget)">
                  {{ 'search.widgets.action.duplicate' | translate }}
                </pa-option>
                <pa-option
                  destructive
                  (selectOption)="delete(widget.slug, widget.name)">
                  {{ 'search.widgets.action.delete' | translate }}
                </pa-option>
              </pa-dropdown>
            </div>
          </pa-table-cell-menu>
        </pa-table-row>
      }
    </pa-table>
  }
</div>
