<div class="spt-container">
    <div class="spt-headline d-flex justify-content-between align-items-start">
        <h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.location' | translate }}</h2>
    </div>
    <div class="spt-form">
        <form [formGroup]="locationForm" (ngSubmit)="onSubmit()">
            <div class="row">
                <div class="col-12 col-lg-6 mb-3">
                    <label for="name" class="form-label">{{ 'common.name' | translate }}*:</label>
                    <input type="text" class="form-control" id="name" formControlName="name" required/>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <label for="code" class="form-label">{{ 'common.code' | translate }}*:</label>
                    <input type="text" class="form-control" id="code" formControlName="code" required/>
                </div>
                <div class="col-12 mb-3">
                    <label for="zoneIri" class="form-label">{{ 'model.zone' | translate }}:</label>
                    <app-search-select #zoneSearchSelect
                                       [formId]="'zoneIri'"
                                       [formLabelLangKey]="'model.zone'"
                                       [documentForm]="form"
                                       [getDataFunction]="getZones"
                                       [displayedDataField]="'name'"
                                       [listColDefinitions]="zoneColDefinitions"
                                       [dataSet]="data?.zone"
                    >
                    </app-search-select>
                    <input id="zoneIri" type="hidden" formControlName="zoneIri"/>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3 switch-widget">
                    <p class="form-label">{{ 'location.is_zone' | translate }}:</p>
                    <label class="switch">
                        <input type="checkbox" formControlName="isZone">
                        <span class="slider round"></span>
                    </label>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3 switch-widget">
                    <p class="form-label">{{ 'location.is_place' | translate }}:</p>
                    <label class="switch">
                        <input type="checkbox" formControlName="isPlace">
                        <span class="slider round"></span>
                    </label>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3 switch-widget">
                    <p class="form-label">{{ 'location.is_port' | translate }}:</p>
                    <label class="switch">
                        <input type="checkbox" formControlName="isPort">
                        <span class="slider round"></span>
                    </label>
                </div>
                <div class="col-12 col-sm-6 col-md-4 col-lg-3 mb-3 switch-widget">
                    <p class="form-label">{{ 'location.is_start_end' | translate }}:</p>
                    <label class="switch">
                        <input type="checkbox" formControlName="isStartEnd">
                        <span class="slider round"></span>
                    </label>
                </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.location' | translate }}
                        </button>
                    }
                </div>
            </div>
        </form>
    </div>
</div>
