<div class="spt-container">
    @if (!isEditMode()) {
        <div class="spt-headline d-flex justify-content-between align-items-start">
            <h2>{{ ('basic.create') | translate }} {{ 'model.event' | translate }}</h2>
        </div>
    } @else {
        <div class="spt-headline d-flex justify-content-between align-items-start">
            <h2>{{ ('basic.edit') | translate }} {{ 'model.trip' | translate }}: {{ data?.event?.name }}</h2>
        </div>
    }
    <div class="spt-form">
        @if (data !== undefined) {
            <form [formGroup]="userTripEventForm" (ngSubmit)="onSubmit()">
                <input id="userTripIri" type="hidden" formControlName="userTripIri" required/>
                <div class="col-12 mb-3">
                    <label for="eventIri" class="form-label">{{ 'model.event' | translate }}*:</label>
                    <app-search-select #eventSearchSelect
                                       [formId]="'eventIri'"
                                       [formLabelLangKey]="'model.event'"
                                       [documentForm]="form"
                                       [getDataFunction]="getEvents"
                                       [displayedDataField]="'name'"
                                       [listColDefinitions]="eventColDefinitions"
                                       [dataSet]="data.event"
                    >
                    </app-search-select>
                    <input id="eventIri" type="hidden" formControlName="eventIri" required/>
                </div>
                <div class="col-12 mb-3">
                    <label for="locationIri" class="form-label">{{ 'model.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]="'common.date' | translate"
                        [inputId]="'startDate'"
                        [initialValue]="form.get('date')?.value ?? null"
                        (dateTimeChange)="onDateChange($event, 'date')"
                    ></app-datetime-picker>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <label for="note" class="form-label">{{ 'common.note' | translate }}:</label>
                    <textarea class="form-control" id="note" formControlName="note"></textarea>
                </div>
            </form>
        }
    </div>

    <div class="row">
        <div class="col-12 mb-3">
            <button type="submit" class="btn btn-primary" (click)="onSubmit()">
                {{ 'basic.save' | translate }}
            </button>

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