<div class="content containerFlex">
    <fieldset class="contentFlex">
        <legend>Profile</legend>
        <form [formGroup]="userForm" (ngSubmit)="onSubmit(userForm.value)">
            <p>
                <mat-form-field>
                    <mat-label>{{ "UserProfile_Login" | translate }}</mat-label>
                    <input
                        matInput
                        type="text"
                        formControlName="login"
                        readonly
                    />
                </mat-form-field>
            </p>
            <p>
                <mat-form-field>
                    <mat-label>{{
                        "UserProfile_Firstname" | translate
                    }}</mat-label>
                    <input matInput type="text" formControlName="firstName" />
                </mat-form-field>
            </p>
            <p>
                <mat-form-field>
                    <mat-label>{{
                        "UserProfile_Lastname" | translate
                    }}</mat-label>
                    <input matInput type="text" formControlName="lastName" />
                </mat-form-field>
            </p>
            <p>
                <mat-form-field>
                    <mat-label>{{ "UserProfile_Mail" | translate }}</mat-label>
                    <input matInput type="text" formControlName="email" />
                </mat-form-field>
            </p>

            <p>
                <mat-form-field>
                    <mat-label>{{
                        "UserProfile_CurrentPassword" | translate
                    }}</mat-label>
                    <input
                        matInput
                        type="text"
                        formControlName="currentPassword"
                    />
                </mat-form-field>
            </p>
            <p>
                <mat-form-field>
                    <mat-label>{{
                        "UserProfile_NewPassword" | translate
                    }}</mat-label>
                    <input matInput type="text" formControlName="newPassword" />
                </mat-form-field>
            </p>

            <button type="submit" mat-raised-button color="accent">
                {{ "UserProfile_Update" | translate }}
            </button>
        </form>
    </fieldset>

    <fieldset class="contentFlex">
        <legend>Images</legend>
        <app-list-of-images></app-list-of-images>
    </fieldset>
</div>
