@if (hasPermissionToUpdateOwnAccessToken) {
  <div class="container">
    <h1 class="h3 mb-3 text-center" i18n>Security Token</h1>
    <form
      class="w-100"
      [formGroup]="updateOwnAccessTokenForm"
      (ngSubmit)="onGenerateAccessToken()"
    >
      <div class="align-items-center d-flex justify-content-center mb-5">
        <mat-form-field
          appearance="outline"
          class="without-hint w-50"
          [hideRequiredMarker]="true"
        >
          <mat-label i18n>Security Token</mat-label>
          <input
            formControlName="accessToken"
            matInput
            [type]="isAccessTokenHidden ? 'password' : 'text'"
          />
          <button
            mat-button
            matSuffix
            type="button"
            (click)="isAccessTokenHidden = !isAccessTokenHidden"
          >
            <ion-icon
              [name]="isAccessTokenHidden ? 'eye-outline' : 'eye-off-outline'"
            />
          </button>
        </mat-form-field>
        <div class="pl-2">
          <button
            color="warn"
            mat-flat-button
            type="submit"
            [disabled]="
              !(
                updateOwnAccessTokenForm.dirty && updateOwnAccessTokenForm.valid
              )
            "
          >
            <span i18n>Generate</span>
          </button>
        </div>
      </div>
    </form>
  </div>
}

<div class="container">
  @if (accessesGet.length > 0) {
    <h1 class="h3 mb-3 text-center" i18n>Received Access</h1>
    <gf-access-table class="mb-5" [accesses]="accessesGet" [user]="user" />
  }
  <h1 class="align-items-center d-flex h3 justify-content-center mb-3">
    <span i18n>Granted Access</span>
    @if (user?.subscription?.type === 'Basic') {
      <gf-premium-indicator class="ml-1" />
    }
  </h1>
  <gf-access-table
    [accesses]="accessesGive"
    [showActions]="hasPermissionToDeleteAccess"
    [user]="user"
    (accessDeleted)="onDeleteAccess($event)"
  />
  @if (hasPermissionToCreateAccess) {
    <div class="fab-container">
      <a
        class="align-items-center d-flex justify-content-center"
        color="primary"
        mat-fab
        [queryParams]="{ createDialog: true }"
        [routerLink]="[]"
      >
        <ion-icon name="add-outline" size="large" />
      </a>
    </div>
  }
</div>