<div class="row">
    <div class="col-12">
        <pasajeros-header></pasajeros-header>
        <div
            class="content"
            id="backgroundStyle"
        >
            <form
                autocomplete="off"
                [formGroup]="pasajeroForm"
                (ngSubmit)="guardar()"
            >
                <div class="row">
                    <div class="col-6">
                        <mat-form-field appearance="fill">
                            <mat-label>Nombre</mat-label>
                            <input matInput formControlName="primerNombre" required />
                            <mat-error
                                *ngIf="pasajeroForm.controls['primerNombre'].invalid"
                                >{{ getErrorMessage() }}</mat-error
                            >
                        </mat-form-field>
                    </div>
                    <div class="col-6">
                        <mat-form-field appearance="fill">
                            <mat-label>Segundo Nombre</mat-label>
                            <input matInput formControlName="segundoNombre" required />
                            <mat-error
                                *ngIf="pasajeroForm.controls['segundoNombre'].invalid"
                                >{{ getErrorMessage() }}</mat-error
                            >
                        </mat-form-field>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <mat-form-field appearance="fill">
                            <mat-label>Apellido</mat-label>
                            <input matInput formControlName="apellido" required />
                            <mat-error
                                *ngIf="pasajeroForm.controls['apellido'].invalid"
                                >{{ getErrorMessage() }}</mat-error
                            >
                        </mat-form-field>
                    </div>
                    <div class="col-6">
                        <mat-form-field appearance="fill">
                            <mat-label>Telefono</mat-label>
                            <input matInput formControlName="telefono" required />
                            <mat-error
                                *ngIf="pasajeroForm.controls['telefono'].invalid"
                                >{{ getErrorMessage() }}</mat-error
                            >
                        </mat-form-field>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <mat-form-field appearance="fill">
                            <mat-label>Correo</mat-label>
                            <input matInput formControlName="correo" required />
                            <mat-error
                                *ngIf="pasajeroForm.controls['correo'].invalid"
                                >{{ getErrorMessage() }}</mat-error
                            >
                        </mat-form-field>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <mat-form-field appearance="fill">
                            <mat-label>Direccion</mat-label>
                            <input matInput formControlName="direccion" required />
                            <mat-error
                                *ngIf="pasajeroForm.controls['direccion'].invalid"
                                >{{ getErrorMessage() }}</mat-error
                            >
                        </mat-form-field>
                    </div>
                    <div class="col-6">
                        <mat-form-field appearance="fill">
                            <mat-label>Ciudad</mat-label>
                            <input matInput formControlName="ciudad" required />
                            <mat-error
                                *ngIf="pasajeroForm.controls['ciudad'].invalid"
                                >{{ getErrorMessage() }}</mat-error
                            >
                        </mat-form-field>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6">
                        <mat-form-field appearance="fill">
                            <mat-label>Estado / Provincia / Ciudad</mat-label>
                            <input matInput formControlName="provincia" required />
                            <mat-error
                                *ngIf="pasajeroForm.controls['provincia'].invalid"
                                >{{ getErrorMessage() }}</mat-error
                            >
                        </mat-form-field>
                    </div>
                    <div class="col-6">
                        <mat-form-field appearance="fill">
                            <mat-label>Pais</mat-label>
                            <input matInput formControlName="pais" required />
                            <mat-error
                                *ngIf="pasajeroForm.controls['pais'].invalid"
                                >{{ getErrorMessage() }}</mat-error
                            >
                        </mat-form-field>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <mat-form-field appearance="fill">
                            <mat-label>Detalles</mat-label>
                            <input matInput formControlName="detalles" required />
                            <mat-error
                                *ngIf="pasajeroForm.controls['detalles'].invalid"
                                >{{ getErrorMessage() }}</mat-error
                            >
                        </mat-form-field>
                    </div>
                </div>
                <div
                id="backgroundStyle"
            >
                <div class="d-flex justify-content-end">
                    <button type="submit" class="btn btn-primary">
                        {{ tipoBoton }}
                    </button>
                </div>
            </div>
            </form>
        </div>

    </div>
</div>
