<md-card>
    <md-card-title>Registration</md-card-title>
    <md-card-content>
        <md-list>
            <md-list-item>
                <md-input-container class="full-width-input">
                    <input mdInput placeholder="{{'[user name]' | translate}}" [(ngModel)]="user.userName" [type]="'text'" required/>
                </md-input-container>
            </md-list-item>
            <md-list-item>
                <md-input-container class="full-width-input">
                    <input mdInput placeholder="Password" [(ngModel)]="user.password" [type]="'password'" required/>
                </md-input-container>
            </md-list-item>
            <md-list-item>
                <md-input-container class="full-width-input">
                    <input mdInput placeholder="First name" [(ngModel)]="user.firstName" [type]="'text'" required/>
                </md-input-container>
            </md-list-item>
            <md-list-item>
                <md-input-container class="full-width-input">
                    <input mdInput placeholder="Last name" [(ngModel)]="user.lastName" [type]="'text'" required/>
                </md-input-container>
            </md-list-item>
            <md-list-item>
                <md-input-container class="full-width-input">
                    <input mdInput placeholder="Email" [type]="'mail'" [(ngModel)]="user.email" required/>
                </md-input-container>
            </md-list-item>
            <md-list-item>
                <md-input-container class="full-width-input">
                    <span md-prefix>+</span>
                    <input mdInput placeholder="Phone" [type]="tel" [(ngModel)]="user.phone" required/>
                </md-input-container>
            </md-list-item>
            <md-list-item>
                <div class="full-width-input">
                    <md-select placeholder="The interface language" [(ngModel)]="user.languageCode">
                        <md-option *ngFor="let option of languages" [value]="option.id" class="mat-primary">{{option.value}}</md-option>
                    </md-select>
                </div>
            </md-list-item>
            <md-list-item style="height:40px;">
                <md-radio-group [(ngModel)]="user.gender">
                    <md-radio-button *ngFor="let gender of [{val:'F',label:'Female'},{val:'M', label:'Male'}]" [value]="gender.val" aria-label="{{ gender.label }}">
                        {{ gender.label }}
                    </md-radio-button>
                </md-radio-group>
            </md-list-item>
        </md-list>
        <button md-button (click)="register($event)">Register</button>
    </md-card-content>
</md-card>
<md-card *ngIf="registrationError" class="registration-error mat-elevation-z0">
    <md-card-content>
        <pre>{{registrationError.msg}}</pre>
    </md-card-content>
</md-card>

<div>
    <h1>{{user.firstName | lowercase }}</h1>
    <h1>{{user.firstName | slice:3 }}</h1>
</div>

