@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>
                <app-trip-location-list
                    [trip]="trip"
                >
                </app-trip-location-list>
            </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="p-2 mb-2 changing-list">
                    <div class="row">
                        <div class="col-12 col-md-10 mb-1">
                            <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.user"
                                (change)="onUserSelectChange(i)"
                            >
                            </app-search-select>
                        </div>
                    </div>
                </div>

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

                <div class="row">
                    <div class="col-12 mb-3">
                        <button type="button" class="btn btn-primary" (click)="saveAllUserTrips()">
                            {{ 'basic.save' | translate }}
                        </button>
                    </div>
                </div>
            </div>
        </mat-tab>
        <mat-tab label="{{ 'trip.events' | translate }}">
            <div>
                <app-user-trip-event-list
                    [trip]="trip"
                >
                </app-user-trip-event-list>
            </div>
        </mat-tab>
    </mat-tab-group>

}