<form (submit)="save()" [formGroup]="form">
    <div class="dialog-content">
        <div class="dialog-content-left">
            <div class="iqser-input-group required">
                <label [translate]="'user-profile-screen.form.email'"></label>
                <input formControlName="email" name="email" type="email" />
            </div>

            <div class="iqser-input-group">
                <label [translate]="'user-profile-screen.form.first-name'"></label>
                <input formControlName="firstName" name="firstName" type="text" />
            </div>

            <div class="iqser-input-group">
                <label [translate]="'user-profile-screen.form.last-name'"></label>
                <input formControlName="lastName" name="lastName" type="text" />
            </div>

            <div *ngIf="devMode" class="iqser-input-group">
                <label [translate]="'top-bar.navigation-items.my-account.children.language.label'"></label>
                <mat-form-field>
                    <mat-select formControlName="language">
                        <mat-option *ngFor="let language of languages" [value]="language">
                            {{ translations[language] | translate }}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
            </div>

            <div class="iqser-input-group">
                <a [href]="changePasswordUrl" target="_blank"> {{ 'user-profile-screen.actions.change-password' | translate }}</a>
            </div>

            <div *ngIf="devMode" class="iqser-input-group">
                <mat-slide-toggle color="primary" formControlName="darkTheme">
                    {{ 'user-profile-screen.form.dark-theme' | translate }}
                </mat-slide-toggle>
            </div>
        </div>
    </div>

    <div class="dialog-actions">
        <iqser-icon-button
            [disabled]="form.invalid || !(profileChanged || languageChanged || themeChanged)"
            [label]="'user-profile-screen.actions.save' | translate"
            [submit]="true"
            [type]="iconButtonTypes.primary"
        ></iqser-icon-button>
    </div>
</form>
