<div class="service-access-container">
  <div>
    <form
      [formGroup]="addForm"
      (ngSubmit)="addServiceAccess()">
      <h4>{{ 'api-key-management.create-key.title' | translate }}</h4>
      <div class="form-content">
        <pa-input formControlName="title">{{ 'generic.name' | translate }}</pa-input>

        <pa-select
          formControlName="role"
          [label]="'generic.role' | translate">
          @for (role of roles; track role) {
            <pa-option
              [value]="role">
              {{ roleTitles[role] | translate }}
            </pa-option>
          }
        </pa-select>
        <pa-button
          type="submit"
          [disabled]="addForm.invalid">
          {{ 'generic.add' | translate }}
        </pa-button>
      </div>
    </form>

    @if (serviceAccess && serviceAccess.length > 0) {
      <div class="container">
        <h4>{{ 'api-key-management.view-edit-keys.title' | translate }}</h4>
        <div class="service-access-list">
          @for (sa of serviceAccess; track sa) {
            <div
              class="service-access"
              >
              <div class="service-access-header">
                <div class="service-access-title">
                  <pa-button
                    aspect="basic"
                    icon="chevron-right"
                    size="small"
                    class="service-access-title-arrow"
                    [disabled]="!sa.keys || sa.keys.length === 0"
                    [class.expanded]="isExpanded(sa.id)"
                  (click)="toggleSA(sa.id)"></pa-button>
                  <span>{{ sa.title }}</span>
                </div>
                <div class="service-access-actions">
                  <pa-button
                    (click)="createKey(sa.id)"
                    aspect="basic"
                    icon="plus"
                    size="small"
                    paTooltip="api-key-management.create-key.button">
                    {{ 'api-key-management.create-key.button' | translate }}
                  </pa-button>
                  <pa-button
                    (click)="deleteServiceAccess(sa)"
                    aspect="basic"
                    icon="trash"
                    size="small"
                    paTooltip="generic.delete">
                    {{ 'generic.delete' | translate }}
                  </pa-button>
                </div>
              </div>
              @if (sa.keys && sa.keys.length > 0) {
                <div
                  class="service-access-keys"
                  [class.expanded]="isExpanded(sa.id)">
                  @for (key of sa.keys; track key) {
                    <div
                      class="service-access-key"
                      >
                      <div class="service-access-key-id">
                        {{ key.id }}
                      </div>
                      <div>
                        {{ key.expires + 'Z' | date: 'mediumDate' }}
                      </div>
                      <div class="service-access-key-actions">
                        <pa-button
                          (click)="deleteKey(sa, key)"
                          class="delete-key"
                          aspect="basic"
                          icon="trash"
                          size="small"
                          paTooltip="generic.delete">
                          {{ 'generic.delete' | translate }}
                        </pa-button>
                      </div>
                    </div>
                  }
                </div>
              }
            </div>
          }
        </div>
      </div>
    }
  </div>
  @if (isTrial | async) {
    <ncom-hint
      label="How to use your API key in the API"
      learnMore="https://docs.nuclia.dev/docs/ingestion/resource#how-to-create-a-resource">
      <p>
        The API key can be used on any call to the API. It goes in the
        <code>X-NUCLIA-SERVICEACCOUNT</code>
        header and replaces the
        <code>Authorization</code>
        header
      </p>
      <pre><code>curl $$KB_URL$$/upload \
        -X POST \
        -H "content-type: video/mp4"
        -H "x-language: fr"
        -H "X-NUCLIA-SERVICEACCOUNT: Bearer YOUR-API-KEY" \
      -T /path/to/file.mp4</code></pre>
    </ncom-hint>
  }
</div>
