<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="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>

                <!-- Neues File-Upload-Feld für MediaObject -->
                <div class="mb-3">
                    <label for="mediaFile" class="form-label">{{ 'user_trip.signature' | translate }}:</label>

                    <!-- File-Input ist deaktiviert, wenn ein Bild existiert und nicht zum Löschen markiert ist -->
                    <input type="file" class="form-control" id="mediaFile"
                           [disabled]="data.signatureUrl && showSignatureImage"
                           (change)="onFileSelected($event)"/>

                    @if (selectedFile) {
                        <small class="text-muted">{{ selectedFile.name }}</small>
                    }

                    @if (data.signatureUrl && showSignatureImage) {
                        <div class="mt-1 d-flex align-items-start gap-2">
                            <img [src]="data.signatureUrl" alt="Signatur" class="img-fluid" />
                            <button type="button" class="btn btn-sm btn-danger" (click)="markSignatureForRemoval()">
                                {{ 'basic.remove' | translate }}
                            </button>
                        </div>
                    }
                </div>
            </form>
        }

    </div>

    <div class="flex gap-2">
<!--        <button type="submit" class="btn btn-primary" [disabled]="form.invalid" (click)="onSubmit()">-->
        <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>