@if (!success) {
  <form [formGroup]="form" (ngSubmit)="register()">
    <mat-card>
      <mat-card-header>
        <mat-card-title>{{'register' | i18n}}</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        @if (missingToken) {
          <mat-error>
            {{'register.token.missing' | i18n}}
            <a routerLink="/tokens" mat-raised-button color="warn">{{'register.token.missing.action' |
            i18n}}</a>
          </mat-error>
        }
        @if (lockedToken) {
          <mat-error>
            {{'register.token.locked' | i18n}}
            <a routerLink="/login" [queryParams]="{ target:'/tokens' }" mat-raised-button
            color="warn">{{'register.token.locked.action' | i18n}}</a>
          </mat-error>
        }
        <mat-form-field>
          <mat-label>{{'username' | i18n}}</mat-label>
          <input matInput  formControlName="username"
            [(ngModel)]="model.username" required matAutofocus tabindex="1">
          <mat-error>
            {{'username.error' | i18n}}
          </mat-error>
          <a mat-icon-button matSuffix (click)="genUsername()" tabindex="8">
            <mat-icon>autorenew</mat-icon>
          </a>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{'password' | i18n}}</mat-label>
          <input matInput type="password"   formControlName="password"
            [(ngModel)]="model.password" required tabindex="2">
          <mat-error>
            @for (error of form.get('password').errors | keyvalue; track error) {
              <div>
                {{'password.error.' + error.key | i18n}}<br>
              </div>
            }
          </mat-error>
        </mat-form-field>
        <mat-form-field>
          <mat-label>{{'password.confirm' | i18n}}</mat-label>
          <input matInput type="password"   formControlName="password2"
            [(ngModel)]="model.password2" required tabindex="3">
          <mat-error>
            {{'password.not-match' | i18n}}
          </mat-error>
        </mat-form-field>
        <mat-slide-toggle formControlName="primaryEmail" [(ngModel)]="model.primaryEmail"
          (change)="onPrimaryChange()" tabindex="4">
          {{'email.primary' | i18n}}
        </mat-slide-toggle>
        <mat-icon #primaryHint="matTooltip" (click)="primaryHint.toggle()" inline="true"
        matTooltip="{{'email.primary.hint' | i18n:model.username}}">info</mat-icon>
        @if (model.primaryEmail) {
          <mat-form-field>
            <mat-label>{{'email' | i18n}}</mat-label>
            <input matInput type="email"   formControlName="email"
              [(ngModel)]="model.email" required tabindex="5">
            <mat-error>
              {{'email.invalid' | i18n}}
            </mat-error>
          </mat-form-field>
        }
        @if (items && items[0]) {
          <mat-list>
            @for (item of items; track item) {
              <mat-list-item>
                <mat-icon mat-list-icon>plus_one</mat-icon>
                {{ item.name[currentLocale] || 'missing' }}
              </mat-list-item>
            }
          </mat-list>
        }
        <mat-divider></mat-divider>
      </mat-card-content>
      <mat-card-actions>
        @if (!working) {
          <button type="submit" mat-raised-button color="primary" [disabled]="form.invalid" tabindex="6">
            {{'register' | i18n}}
          </button>
        }
        @if (working) {
          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
        }
      </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"
          tabindex="7">
          <mat-icon>contact_support</mat-icon>
        </a>
      </mat-card-footer>
    </mat-card>
  </form>
}


@if (!success && permissions && permissions[0]) {
  <div>
    <h3>{{'permissions' | i18n}}</h3>
    <app-permissions [permissions]="permissions"></app-permissions>
  </div>
}
@if (!success && quotas && quotas[0]) {
  <div>
    <h3>{{'quotas' | i18n}}</h3>
    <app-quotas [quotas]="quotas"></app-quotas>
  </div>
}

@if (success) {
  <mat-card>
    <mat-card-content>
      <h2>{{'register.success.title' | i18n}}</h2>
      <p>{{'register.success.text' | i18n}}</p>
    </mat-card-content>
    <mat-card-actions>
      <a routerLink="/login" mat-raised-button color="primary">
        {{'register.login' | i18n}}
      </a>
    </mat-card-actions>
  </mat-card>
}