<div class="account-models page-spacing">
  <div class="account-models-header">
    <div>
      <h1 class="page-title">{{ 'account.models.title' | translate }}</h1>
      <p class="page-description">{{ 'account.models.description' | translate }}</p>
    </div>
  </div>

  <pa-tabs notFullWidth>
    <pa-tab
      [active]="selectedTab === 'settings'"
      (click)="selectedTab = 'settings'">
      {{ 'generic.settings' | translate }}
    </pa-tab>
    <pa-tab
      [active]="selectedTab === 'restrictions'"
      (click)="selectedTab = 'restrictions'">
      {{ 'account.models.restrictions.title' | translate }}
    </pa-tab>
  </pa-tabs>

  @if (selectedTab === 'settings') {
    <nsi-two-columns-configuration-item
      itemTitle="account.models.model-configs.title"
      description="account.models.model-configs.description"
      noTopBorder>
      <div class="configs">
        @if (modelConfigs | async; as configs) {
          @if (configs.length > 0) {
            <pa-table
              columns="1fr 35% 1fr 60px"
              border>
              <pa-table-header>
                <pa-table-cell header>
                  {{ 'account.models.model-configs.generative-model' | translate }}
                </pa-table-cell>
                <pa-table-cell header>{{ 'generic.description' | translate }}</pa-table-cell>
                <pa-table-cell header>{{ 'generic.zone' | translate }}</pa-table-cell>
                <pa-table-cell header></pa-table-cell>
              </pa-table-header>
              @for (config of configs; track config.id) {
                <pa-table-row
                  clickable
                  (click)="displayConfig(config)">
                  <pa-table-cell class="body-m">{{ config.default_model_id }}</pa-table-cell>
                  <pa-table-cell class="body-s">
                    <span paEllipsisTooltip>{{ config.description }}</span>
                  </pa-table-cell>
                  <pa-table-cell class="body-m">{{ config.zone }}</pa-table-cell>
                  <pa-table-cell>
                    <pa-button
                      icon="trash"
                      kind="destructive"
                      aspect="basic"
                      size="small"
                      (click)="deleteConfig(config, $event)">
                      {{ 'generic.delete' | translate }}
                    </pa-button>
                  </pa-table-cell>
                </pa-table-row>
              }
            </pa-table>
          }
        }
        <div class="create">
          <pa-button
            iconAndText
            icon="circle-plus"
            aspect="basic"
            (click)="createConfig()">
            {{ 'account.models.model-configs.create' | translate }}
          </pa-button>
        </div>
      </div>
    </nsi-two-columns-configuration-item>

    @if ((isBedrockIntegrationEnabled | async) && ((awsZones | async) || []).length > 0) {
      <nsi-two-columns-configuration-item
        itemTitle="account.models.bedrock.title"
        description="account.models.bedrock.description">
        @if (loadingBedrock) {
          <nsi-spinner></nsi-spinner>
        } @else {
          <div>
            @if (bedrockIntegrations | async; as integrations) {
              <pa-table
                columns="1fr 1fr 1fr"
                border>
                <pa-table-header>
                  <pa-table-cell header>{{ 'generic.zone' | translate }}</pa-table-cell>
                  <pa-table-cell header>{{ 'generic.status' | translate }}</pa-table-cell>
                  <pa-table-cell header></pa-table-cell>
                </pa-table-header>
                @for (integration of integrations; track integration.zone.slug) {
                  <pa-table-row>
                    <pa-table-cell class="body-m">{{ integration.zone.slug }}</pa-table-cell>
                    <pa-table-cell class="body-m">
                      <div class="status">
                        @if (integration.status === 'none') {
                          -
                        } @else {
                          {{ 'account.models.bedrock.status.' + integration.status | translate }}
                          @if (integration.errorMessage) {
                            <pa-icon
                              class="error"
                              name="info"
                              size="small"
                              [paPopover]="error"></pa-icon>
                            <pa-popover #error>
                              <div class="body-s">{{ integration.errorMessage }}</div>
                            </pa-popover>
                          }
                        }
                      </div>
                    </pa-table-cell>
                    <pa-table-cell>
                      <div class="align-right">
                        @if (integration.status === 'none') {
                          <pa-button
                            iconAndText
                            icon="gear"
                            aspect="basic"
                            size="small"
                            (click)="setupIntegration(integration.zone.slug)">
                            {{ 'account.models.bedrock.set-up' | translate }}
                          </pa-button>
                        } @else {
                          <pa-button
                            icon="trash"
                            kind="destructive"
                            aspect="basic"
                            size="small"
                            (click)="deleteIntegration(integration.zone.slug)">
                            {{ 'generic.delete' | translate }}
                          </pa-button>
                        }
                      </div>
                    </pa-table-cell>
                  </pa-table-row>
                }
              </pa-table>
            }
          </div>
        }
      </nsi-two-columns-configuration-item>
    }
  }
  @if (selectedTab === 'restrictions') {
    <app-model-restrictions></app-model-restrictions>
  }
</div>
