<div
    [translateParams]="{
        type: !!user() ? 'edit' : 'create',
    }"
    [translate]="'add-edit-user.title'"
    class="dialog-header heading-l"
></div>

<form (submit)="save()" [formGroup]="form">
    <div class="dialog-content">
        <div class="iqser-input-group required w-300">
            <label [translate]="'add-edit-user.form.first-name'"></label>
            <input formControlName="firstName" name="firstName" type="text" />
        </div>

        <div class="iqser-input-group required w-300">
            <label [translate]="'add-edit-user.form.last-name'"></label>
            <input formControlName="lastName" name="lastName" type="text" />
        </div>

        <div class="iqser-input-group required w-300">
            <label [translate]="'add-edit-user.form.email'"></label>
            <input formControlName="email" name="email" type="email" />
        </div>

        <div class="iqser-input-group">
            <label [translate]="'add-edit-user.form.role'"></label>
            <div class="roles-wrapper">
                <mat-checkbox
                    (change)="setRolesRequirements($event.checked, role)"
                    *ngFor="let role of ROLES"
                    [formControlName]="role"
                    color="primary"
                >
                    {{ translations[role] | translate }}
                </mat-checkbox>
            </div>
        </div>

        @if (!user()) {
            <div class="iqser-input-group">
                <label [translate]="'add-edit-user.form.account-setup'"></label>
                <mat-checkbox formControlName="sendSetPasswordMail">{{ 'add-edit-user.form.send-email' | translate }}</mat-checkbox>
                <span [translate]="'add-edit-user.form.send-email-explanation'" class="hint"></span>
            </div>
        }

        <div
            (click)="toggleResetPassword.emit()"
            *ngIf="!!user()"
            [translate]="'add-edit-user.form.reset-password'"
            class="mt-24 fit-content link-action"
        ></div>
    </div>

    <div class="dialog-actions">
        <iqser-icon-button
            [disabled]="form.invalid || !changed"
            [label]="(user() ? 'add-edit-user.actions.save-changes' : 'add-edit-user.actions.save') | translate"
            [submit]="true"
            [type]="iconButtonTypes.primary"
        ></iqser-icon-button>

        <iqser-icon-button
            (action)="delete()"
            *ngIf="user() && !disabledDelete(user())"
            [label]="'add-edit-user.actions.delete' | translate"
            [type]="iconButtonTypes.dark"
            icon="iqser:trash"
        ></iqser-icon-button>

        <div (click)="cancel.emit()" [translate]="'add-edit-user.actions.cancel'" class="all-caps-label cancel"></div>
    </div>
</form>
