<div class="spt-container">
    @if (!isEditMode()) {
        <div class="spt-headline d-flex justify-content-between align-items-start">
            <h2>{{ ('basic.new') | translate }} {{ 'model.trip_location' | translate }}</h2>
        </div>
    }
    <div class="spt-form">
        <form [formGroup]="tripLocationForm" (ngSubmit)="onSubmit()">
            <div class="row">
                <div class="col-12 mb-3">
                    <label for="locationIri" class="form-label">{{ 'trip.start_location' | translate }}*:</label>
                    <app-search-select #locationSearchSelect
                                       [formId]="'locationIri'"
                                       [formLabelLangKey]="'model.location'"
                                       [documentForm]="form"
                                       [getDataFunction]="getLocations"
                                       [displayedDataField]="'name'"
                                       [listColDefinitions]="locationColDefinitions"
                                       [dataSet]="data?.location"
                    >
                    </app-search-select>
                    <input id="locationIri" type="hidden" formControlName="locationIri" required/>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <app-datetime-picker
                        [label]="'trip_location.arrival_date_time' | translate"
                        [inputId]="'arrivalDateTime'"
                        [initialValue]="tripLocationForm.get('arrivalDateTime')?.value ?? null"
                        (dateTimeChange)="onDateChange($event, 'arrivalDateTime')"
                    ></app-datetime-picker>
                </div>

                <div class="col-12 col-lg-6 mb-3">
                    <app-datetime-picker
                        [label]="'trip_location.departure_date_time' | translate"
                        [inputId]="'departureDateTime'"
                        [initialValue]="tripLocationForm.get('departureDateTime')?.value ?? null"
                        (dateTimeChange)="onDateChange($event, 'departureDateTime')"
                    ></app-datetime-picker>
                </div>
            </div>
            <div class="row">
                <div class="col-12 mb-3">
                    <button type="submit" class="btn btn-primary" [disabled]="form.invalid">
                        {{ 'basic.save' | translate }}
                    </button>

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