<div class="spt-container">
    <div class="spt-headline d-flex justify-content-between align-items-start">
        <h2>{{ (isEditMode() ? 'basic.edit' : 'basic.new') | translate }} {{ 'model.vessel' | translate }}</h2>
    </div>
    <div class="spt-form">
        <form [formGroup]="form" (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="companyIri" class="form-label">{{ 'model.shipping_company' | translate }}:</label>
                    <app-search-select #shippingCompanySearchSelect
                                       [formId]="'companyIri'"
                                       [formLabelLangKey]="'model.shipping_company'"
                                       [documentForm]="form"
                                       [getDataFunction]="getShippingCompanies"
                                       [displayedDataField]="'name'"
                                       [listColDefinitions]="shippingCompanyColDefinitions"
                                       [dataSet]="data?.company">
                    </app-search-select>
                    <input id="companyIri" type="hidden" formControlName="companyIri"/>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-lg-6 mb-3">
                    <label for="length" class="form-label">{{ 'vessel.length' | translate }}:</label>
                    <input type="number"
                           class="form-control"
                           id="length"
                           formControlName="length"/>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <label for="breadth" class="form-label">{{ 'vessel.breadth' | translate }}:</label>
                    <input type="number"
                           class="form-control"
                           id="breadth"
                           formControlName="breadth"/>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <label for="draft" class="form-label">{{ 'vessel.draft' | translate }}:</label>
                    <input type="number"
                           class="form-control"
                           id="draft"
                           formControlName="draft"/>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <label for="grossTonnage" class="form-label">{{ 'vessel.grossTonnage' | translate }}:</label>
                    <input type="number"
                           class="form-control"
                           id="grossTonnage"
                           formControlName="grossTonnage"/>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <label for="imoNo" class="form-label">{{ 'vessel.imoNo' | translate }}:</label>
                    <input type="text"
                           class="form-control"
                           id="imoNo"
                           formControlName="imoNo"/>
                </div>
                <div class="col-12 col-lg-6 mb-3">
                    <label for="callSign" class="form-label">{{ 'vessel.callSign' | translate }}:</label>
                    <input type="text"
                           class="form-control"
                           id="callSign"
                           formControlName="callSign"/>
                </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.vessel' | translate }}
                        </button>
                    }
                </div>
            </div>
        </form>
    </div>
</div>