<div class="spt-container">
    <div class="spt-form">
        @if (data !== undefined) {
            <form [formGroup]="userTripForm" (ngSubmit)="onSubmit()">
                <input type="hidden" formControlName="tripIri" />
                <input type="hidden" formControlName="userIri" />
                <input type="hidden" formControlName="signatureIri" />
                <div class="row">
                    <div class="col-12 col-lg-6 mb-3">
                        <label for="captainName" class="form-label">{{ 'trip.captain_name' | translate }}:</label>
                        <input type="text" class="form-control" id="captainName" formControlName="captainName"/>
                    </div>
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3 switch-widget">
                        <p class="form-label">{{ 'user_trip.completed' | translate }}:</p>
                        <label class="switch">
                            <input type="checkbox" formControlName="completed" [disabled]="data.completed">
                            <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">{{ 'user_trip.approved' | translate }}:</p>
                        <label class="switch">
                            <input type="checkbox" formControlName="approved" [disabled]="data.approved">
                            <span class="slider round"></span>
                        </label>
                    </div>
                </div>


                <!-- Verwende die neue ImageUpload-Komponente -->
                <app-image-upload
                    #imageUpload
                    [imageUrl]="data.signatureUrl"
                    [label]="'user_trip.signature' | translate"
                    [disabled]="data.completed"
                    (fileSelected)="handleFileSelected($event)"
                    (fileDeleted)="handleFileDeleted()">
                </app-image-upload>
            </form>
        }

    </div>

    <div class="row">
        <div class="col-12 mb-3">
            <button type="submit" class="btn btn-primary" (click)="onSubmit()">
                {{ 'basic.save' | translate }}
            </button>

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