<form [formGroup]="form" (ngSubmit)="register()" *ngIf="!success">
    <mat-card>
        <mat-card-content>
            <h2>{{'register' | i18n}}</h2>
            <mat-error *ngIf="missingToken">
                <a routerLink="/tokens">{{'register.token.missing' | i18n}}</a>
            </mat-error>
            <mat-form-field>
                <input matInput placeholder="{{'username' | i18n}}" formControlName="username"
                    [(ngModel)]="model.username">
                <mat-error>
                    {{'username.error' | i18n}}
                </mat-error>
                <a mat-button matSuffix mat-icon-button (click)="genUsername()">
                    <mat-icon>autorenew</mat-icon>
                </a>
            </mat-form-field>
            <mat-form-field>
                <input matInput type="email" placeholder="{{'email' | i18n}}" formControlName="email"
                    [(ngModel)]="model.email">
                <mat-error>
                    {{'email.invalid' | i18n}}
                </mat-error>
            </mat-form-field>
            <mat-slide-toggle formControlName="primaryEmail" [(ngModel)]="model.primaryEmail" *ngIf="model.email">
                {{'email.primary' | i18n}}
            </mat-slide-toggle>
            <mat-form-field>
                <input matInput type="password" placeholder="{{'password' | i18n}}" formControlName="password"
                    [(ngModel)]="model.password">
                <mat-error>
                    <div *ngFor="let error of form.get('password').errors | keyvalue">
                        {{'password.error.' + error.key | i18n}}<br>
                    </div>
                </mat-error>
            </mat-form-field>
            <mat-form-field>
                <input matInput type="password" placeholder="{{'password.confirm' | i18n}}" formControlName="password2"
                    [(ngModel)]="model.password2">
                <mat-error>
                    {{'password.not-match' | i18n}}
                </mat-error>
            </mat-form-field>

            <mat-list *ngIf="items && items[0]">
                <mat-list-item *ngFor="let item of items">
                    <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>
            <button *ngIf="!working" mat-raised-button color="primary" [disabled]="form.invalid">
                {{'register' | i18n}}
            </button>

            <mat-progress-bar *ngIf="working" mode="indeterminate"></mat-progress-bar>
        </mat-card-actions>
    </mat-card>
</form>

<mat-card *ngIf="success">
    <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>