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

                <div class="col-12 col-lg-6 mb-3">
                    <app-datetime-picker
                        [label]="'trip.end_date' | translate"
                        [inputId]="'endDate'"
                        [initialValue]="tripForm.get('endDate')?.value ?? null"
                        (dateTimeChange)="onDateChange($event, 'endDate')"
                    ></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>
