<div class="spt-container">
    @if (!isEditMode()) {
        <div class="spt-headline d-flex justify-content-between align-items-start">
            <h2>{{ ('basic.new') | translate }} {{ 'model.user' | translate }}</h2>
        </div>
    }
    <div class="spt-form">
        <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
            <input type="hidden" formControlName="imageIri" />
            <div class="row">
                <div class="col-12 col-lg-6 mb-3">
                    <label for="firstName" class="form-label">{{ 'users.firstname' | translate }}:</label>
                    <input type="text" class="form-control" id="firstName" formControlName="firstName"/>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <label for="lastName" class="form-label">{{ 'users.lastname' | translate }}:</label>
                    <input type="text" class="form-control" id="lastName" formControlName="lastName"/>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <label for="email" class="form-label">{{ 'users.email' | translate }}:</label>
                    <input type="text" class="form-control" id="email" formControlName="email"/>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <label for="password" class="form-label">{{ 'users.password' | translate }}:</label>
                    <input type="text" class="form-control" id="password" formControlName="password"/>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <label for="referenceId" class="form-label">{{ 'users.pilotIdNo' | translate }}:</label>
                    <input type="text" class="form-control" id="referenceId" formControlName="referenceId"/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3 switch-widget">
                    <p class="form-label">{{ 'users.active' | translate }}:</p>
                    <label class="switch">
                        <input type="checkbox" formControlName="active">
                        <span class="slider round"></span>
                    </label>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3 switch-widget">
                    <p class="form-label">{{ 'users.is_admin' | translate }}:</p>
                    <label class="switch">
                        <input type="checkbox" formControlName="isAdmin">
                        <span class="slider round"></span>
                    </label>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3 switch-widget">
                    <p class="form-label">{{ 'users.is_pilot' | translate }}:</p>
                    <label class="switch">
                        <input type="checkbox" formControlName="isPilot">
                        <span class="slider round"></span>
                    </label>
                </div>
            </div>

            <app-image-upload
                #imageUpload
                [imageUrl]="data?.imageUrl"
                [label]="'users.image' | translate"
                (fileSelected)="handleFileSelected($event)"
                (fileDeleted)="handleFileDeleted()">
            </app-image-upload>
            <div class="row">
                <div class="col-12 mb-3">
                    <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
                        {{ 'basic.save' | translate }}
                    </button>

                    @if (isEditMode()) {
                        <button type="button" class="ms-3 btn btn-primary" (click)="onDelete()">
                            {{ 'basic.delete' | translate }} {{ 'model.user' | translate }}
                        </button>
                    }
                </div>
            </div>
        </form>
    </div>
</div>