<form [formGroup]="form" (ngSubmit)="redeemSecret()" #formDirective="ngForm">
    <mat-card>
        <mat-card-content>
            <h2>{{'tokens.enter' | i18n}}</h2>
            <mat-error *ngIf="tokenInvalid">
                {{'tokens.invalid' | i18n}}
            </mat-error>
            <mat-error *ngIf="tokenRedeemed">
                {{'tokens.redeemed' | i18n}}
            </mat-error>
            <mat-form-field>
                <input matInput placeholder="{{'token' | i18n}}" formControlName="token">
                <mat-error>
                    {{'tokens.provide-valid' | i18n}}
                </mat-error>
            </mat-form-field>
        </mat-card-content>
        <mat-card-actions>
            <button mat-raised-button color="primary" [disabled]="form.invalid">{{'tokens.validate' | i18n}}</button>
        </mat-card-actions>
    </mat-card>
</form>


<mat-card *ngIf="items && items[0]">
    <mat-card-content>

        <mat-list>
            <mat-list-item *ngFor="let item of items">
                <mat-icon mat-list-icon>plus_one</mat-icon>
                {{ item.name[currentLocale] || 'missing' }}
                <button mat-icon-button (click)="removeSecret(item.secret)">
                    <mat-icon>delete</mat-icon>
                </button>
            </mat-list-item>
        </mat-list>

        <mat-divider></mat-divider>

    </mat-card-content>
    <mat-card-actions>
        <button *ngIf="auth.authenticated" mat-raised-button color="accent" (click)="redeem()">
            <mat-icon>redeem</mat-icon> {{'tokens.redeem' | i18n}}
        </button>

        <a *ngIf="!auth.authenticated" routerLink="/register" mat-raised-button color="accent">
            <mat-icon>how_to_reg</mat-icon> {{'register' | i18n}}
        </a>
        <a *ngIf="!auth.authenticated" routerLink="/login" [queryParams]="{ target:'tokens' }" mat-raised-button
            color="primary">
            <mat-icon>login</mat-icon> {{'login' | i18n}}
        </a>
    </mat-card-actions>
</mat-card>

<div *ngIf="permissions && permissions[0]">
    <h3>{{'permissions' | i18n}}</h3>
    <app-permissions [permissions]="permissions"></app-permissions>
</div>
<div *ngIf="quotas && quotas[0]">
    <h3>{{'quotas' | i18n}}</h3>
    <app-quotas [quotas]="quotas"></app-quotas>
</div>