@if (userTrip) {
    <div class="spt-container">
        <div class="spt-headline d-flex justify-content-between align-items-start">
            <h2>{{ ('basic.edit') | translate }} {{ 'model.user_trip' | translate }}
                {{ userTrip.trip?.pilotageReference }} ({{ userTrip.user?.fullName }})</h2>
        </div>
    </div>
    <mat-tab-group>
        <mat-tab label="{{ 'model.user_trip' | translate }}">
            <app-user-trip-form
                [data]="userTrip"
                [mode]="FormMode.Edit"
                [id]="appHelperService.extractId(userTrip.id!)"
                (submit)="onFormUpdate($event)"
            >
            </app-user-trip-form>
        </mat-tab>
        <mat-tab label="{{ 'user_trip.events' | translate }}">
            <div>
                <h4 class="mb-4">{{ 'user_trip.events' | translate }}</h4>

                <div *ngFor="let userTripEvent of userTripEvents; let i = index" class="p-2 mb-2 changing-list">
                    <div class="row">
                        <div class="col-12 col-md-6 mb-3">
                            <label [for]="'event_' + i" class="form-label">{{ 'model.event' | translate }}*:</label>
                            <app-search-select
                                [formId]="'eventIri'"
                                [formLabelLangKey]="'model.event'"
                                [documentForm]="eventForms[i]"
                                [getDataFunction]="getEvents"
                                [displayedDataField]="'name'"
                                [listColDefinitions]="eventColDefinitions"
                                [dataSet]="userTripEvent.event"
                            >
                            </app-search-select>
                        </div>

                        <div class="col-12 col-md-6 mb-3">
                            <label [for]="'location_' + i" class="form-label">{{ 'model.location' | translate }}*:</label>
                            <app-search-select
                                [formId]="'locationIri'"
                                [formLabelLangKey]="'model.location'"
                                [documentForm]="eventForms[i]"
                                [getDataFunction]="getLocations"
                                [displayedDataField]="'name'"
                                [listColDefinitions]="locationColDefinitions"
                                [dataSet]="userTripEvent.location"
                            >
                            </app-search-select>
                        </div>

                        <div class="col-12 col-md-3 mb-1">
                            <label class="form-label">{{ 'user_trip.event_date' | translate }} ({{ 'common.date' | translate }}):</label>
                            <div>
                                <input
                                    type="date"
                                    class="form-control"
                                    [value]="formatDateForInput(userTripEvent.date)"
                                    (change)="onDateInputChange($event, i)"
                                />
                            </div>
                        </div>

                        <div class="col-12 col-md-3 mb-1">
                            <label class="form-label">{{ 'user_trip.event_date' | translate }} ({{ 'common.time' | translate }}):</label>
                            <div>
                                <input
                                    type="time"
                                    class="form-control"
                                    [value]="formatTimeForInput(userTripEvent.date)"
                                    (change)="onTimeInputChange($event, i)"
                                />
                            </div>
                        </div>

                        <div class="col-12 col-md-4 mb-1">
                            <label [for]="'note_' + i" class="form-label">{{ 'common.note' | translate }}:</label>
                            <textarea
                                    class="form-control"
                                    [id]="'note_' + i"
                                    rows="2"
                                    [(ngModel)]="userTripEvent.note"
                            ></textarea>
                        </div>

                        <div class="col-12 col-md-2 mb-1 d-flex align-items-end">
                            <button type="button" class="btn btn-danger" (click)="removeUserTripEvent(i)">X</button>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 col-lg-6 mb-3">
                        <button type="button" class="btn btn-primary" (click)="addNewUserTripEvent()">+</button>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 col-lg-6 mb-3">
                        <button type="button" class="btn btn-primary" (click)="saveAllUserTripEvents()">
                            {{ 'basic.save' | translate }}
                        </button>
                    </div>
                </div>
            </div>
        </mat-tab>
    </mat-tab-group>
}