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

                <div *ngFor="let tripLocation of tripLocations; let i = index" class="mb-4">
                    <div class="row">
                        <div class="col-12 col-md-4 mb-3">
                            <label [for]="'location_' + i" class="form-label">Location*:</label>
                            <app-search-select
                                [formId]="'locationIri'"
                                [formLabelLangKey]="'model.location'"
                                [documentForm]="locationForms[i]"
                                [getDataFunction]="getLocations"
                                [displayedDataField]="'name'"
                                [listColDefinitions]="locationColDefinitions"
                                [dataSet]="tripLocation.locationIri"
                            >
                            </app-search-select>
                        </div>

                        <div class="col-12 col-md-2 mb-3">
                            <label class="form-label">trip.date (Date):</label>
                            <div>
                                <input
                                    type="date"
                                    class="form-control"
                                    [value]="formatDateForInput(tripLocation.date)"
                                    (change)="onDateInputChange($event, i)"
                                />
                            </div>
                        </div>

                        <div class="col-12 col-md-2 mb-3">
                            <label class="form-label">trip.date (Time):</label>
                            <div>
                                <input
                                    type="time"
                                    class="form-control"
                                    [value]="formatTimeForInput(tripLocation.date)"
                                    (change)="onTimeInputChange($event, i)"
                                />
                            </div>
                        </div>

                        <div class="col-12 col-md-2 mb-3 d-flex align-items-end">
                            <div class="form-check">
                                <input
                                    class="form-check-input"
                                    type="checkbox"
                                    [id]="'isArrival_' + i"
                                    [checked]="tripLocation.isArrival"
                                    (change)="onIsArrivalChange($event, i)"
                                >
                                <label class="form-check-label" [for]="'isArrival_' + i">
                                    {{ 'trip.is_arrival' | translate }}
                                </label>
                            </div>
                        </div>

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

                <div class="my-3">
                    <button type="button" class="btn btn-primary" (click)="addNewTripLocation()">+</button>
                </div>

                <div class="mt-4">
                    <button type="button" class="btn btn-success" (click)="saveAllTripLocations()">
                        {{ 'trip.save_itinerary' | translate }}
                    </button>
                </div>
            </div>
        </mat-tab>
        <mat-tab label="{{ 'trip.assigned_users' | translate }}">
            <div>
                <h4 class="mb-4">{{ 'trip.assigned_users' | translate }}</h4>

                <div *ngFor="let userTrip of userTrips; let i = index" class="mb-4">
                    <div class="row">
                        <div class="col-12 col-md-6 mb-3">
                            <label [for]="'user_' + i" class="form-label">{{ 'model.user' | translate }}*:</label>
                            <app-search-select
                                [formId]="'user'"
                                [formLabelLangKey]="'model.user'"
                                [documentForm]="userForms[i]"
                                [getDataFunction]="getUsers"
                                [displayedDataField]="'fullName'"
                                [listColDefinitions]="userColDefinitions"
                                [dataSet]="userTrip.userIri"
                                (change)="onUserSelectChange(i)"
                            >
                            </app-search-select>
                        </div>

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

                <div class="my-3">
                    <button type="button" class="btn btn-primary" (click)="addNewUserTrip()">+</button>
                </div>

                <div class="mt-4">
                    <button type="button" class="btn btn-success" (click)="saveAllUserTrips()">
                        {{ 'trip.save_user_assignments' | translate }}
                    </button>
                </div>
            </div>
        </mat-tab>
    </mat-tab-group>

}