@if (items && items[0]) {
  <div>
    <h2>{{'tokens.active' | i18n}}</h2>
    <mat-card>
      <mat-card-content>
        <mat-list>
          @for (item of items; track item) {
            <mat-list-item>
              <mat-icon mat-list-icon>plus_one</mat-icon>
              {{ item.name[currentLocale] || 'missing' }}
              <a mat-icon-button (click)="removeSecret(item.secret)">
                <mat-icon>delete</mat-icon>
              </a>
            </mat-list-item>
          }
        </mat-list>
        <mat-divider></mat-divider>
      </mat-card-content>
      <mat-card-actions>
        @if (auth.authenticated) {
          <a mat-raised-button color="accent" (click)="redeem()">
            <mat-icon>redeem</mat-icon> {{'tokens.redeem' | i18n}}
          </a>
        }
        @if (!auth.authenticated) {
          <div class="flex column">
            @if (canRegister()) {
              <p>{{'tokens.register' | i18n}}</p>
            }
            @if (canRegister()) {
              <a routerLink="/register" mat-raised-button color="accent">
                <mat-icon>how_to_reg</mat-icon> {{'register' | i18n}}
              </a>
            }
            @if (canRegister()) {
              <p>{{'tokens.login' | i18n}}</p>
            }
            @if (!canRegister()) {
              <p>{{'tokens.loginRequired' | i18n}}</p>
            }
            <a routerLink="/login" [queryParams]="{ target:'/tokens' }" mat-raised-button color="primary">
              <mat-icon>login</mat-icon> {{'login' | i18n}}
            </a>
          </div>
        }
      </mat-card-actions>
      <mat-card-footer>
        <a href="https://wiki.bstly.de/services/webstly#registration" class="help-button"
          matTooltip="{{'help-button' | i18n}}" matTooltipPosition="above" target="_blank" mat-fab color="accent">
          <mat-icon>contact_support</mat-icon>
        </a>
      </mat-card-footer>
    </mat-card>
    @if (permissions && permissions[0]) {
      <div>
        <h3>{{'permissions' | i18n}}</h3>
        <app-permissions [permissions]="permissions" [startsVisible]="canRegister() || auth.authenticated" [expiresVisible]="canRegister() || auth.authenticated"></app-permissions>
      </div>
    }
    @if (quotas && quotas[0]) {
      <div>
        <h3>{{'quotas' | i18n}}</h3>
        <app-quotas [quotas]="quotas"></app-quotas>
      </div>
    }
  </div>
}

<form [formGroup]="form" (ngSubmit)="redeemSecret()" #formDirective="ngForm">
  <mat-card>
    <mat-card-header>
      <mat-card-title>{{'tokens.enter' | i18n}}</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      @if (tokenInvalid) {
        <mat-error>
          {{'tokens.invalid' | i18n}}
        </mat-error>
      }
      @if (tokenRedeemed) {
        <mat-error>
          {{'tokens.redeemed' | i18n}}
        </mat-error>
      }
      <mat-form-field>
        <mat-label>{{'token' | i18n}}</mat-label>
        <input matInput formControlName="token" matAutofocus>
        <mat-error>
          {{'tokens.provide-valid' | i18n}}
        </mat-error>
      </mat-form-field>
    </mat-card-content>
    <mat-card-actions>
      <button type="submit" mat-raised-button color="primary" [disabled]="form.invalid">{{ (items && items[0] ?
      'tokens.validate.other' : 'tokens.validate') | i18n}}</button>
    </mat-card-actions>
    <mat-card-footer>
      <a href="https://wiki.bstly.de/services/webstly#token" class="help-button"
        matTooltip="{{'help-button' | i18n}}" matTooltipPosition="above" target="_blank" mat-fab color="accent">
        <mat-icon>contact_support</mat-icon>
      </a>
    </mat-card-footer>
  </mat-card>
</form>