<form [formGroup]="form" name="form" autocomplete="off" novalidate (ngSubmit)="submit()">
    <div class="mail-box-header detail-header" [ngClass]="{'title-border-bottom': mode !='new'}">
        <xdf-form-header [icon]="icon" title_="reserva-form.title" [recordIdentifier]="record?.id"
            titleDesc="reserva-form.title.desc" [mode]="mode" [resourceAuth]="resourceAuth"
            (optionEvent)="optionEvent($event)" [editing]="mode === 'edit'" [displaying]="mode === 'view'">
        </xdf-form-header>
    </div>

    <div class="mail-box-content">
        <div class="row">
            <div class="col-12">
                <div class="form-content">
                    <div class="hr-line-dashed"></div>
                    <!-- Configuración -->
                    <div class="legend">
                        <span class="group-title">{{ 'reserva-form.receptor' | translate}}</span>
                    </div>

                    <div class="input-together">
                        <div class="group-content">
                            <div class="row">
                                <div class="form-group col-xl-6">
                                    <xdf-select name="travelTypeClass" label="reserva-form.travelTypeClass"
                                        [values]="type" [required]="true"
                                        placeholder="reserva-form.travelTypeClass.placeholder" [formGroup]="form"
                                        [options]="{sourceValue: 'name', sourceLabel: 'name'}">
                                    </xdf-select>
                                </div>
                                <div class="form-group col-xl-6">
                                    <xdf-input name="numberInParty" label="reserva-form.numberInParty" type="number"
                                        [required]="true" placeholder="reserva-form.numberInParty.placeholder"
                                        [formGroup]="form" [options]="{maxLength: 1000, showLength: true}"></xdf-input>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-xl-6">
                                    <xdf-select name="proxyId" label="reserva-form.proxy" [values]="listProxy"
                                        [required]="true" placeholder="reserva-form.proxy.placeholder"
                                        [formGroup]="form" [options]="{sourceValue: 'id', sourceLabel: 'name'}">
                                    </xdf-select>
                                </div>
                                <div class="form-group col-xl-6">
                                    <xdf-select name="passengerId" label="reserva-form.passenger"
                                        [values]="listPassenger" [required]="true"
                                        placeholder="reserva-form.passenger.placeholder" [formGroup]="form"
                                        [options]="{sourceValue: 'id', sourceLabel: 'firstName'}">
                                    </xdf-select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12" *ngIf="mode !== 'view'">
                <div class="form-status-bar border-top">
                    <button type="submit" mat-stroked-button class="btn btn-primary" [disabled]="form?.invalid 
              || processing ">
                        <i class="fa fa-save" aria-hidden="true"></i>{{'btn.save' | translate}}
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>