<div style="width: 400px">
    <h1 mat-dialog-title class="centre">Detalles de la Solicitud</h1>
    <div mat-dialog-content>
        <form [formGroup]="formGroup">

            <mat-grid-list cols="12" rowHeight="75px">
                
                <mat-grid-tile colspan="12" >
                    <mat-form-field appearance="standard" class="input-large">
                        <mat-label>Nombre del Solicitante</mat-label>
                        <input matInput formControlName="solicitante" />
                        <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
                        <mat-error *ngIf="solicitante!.invalid">{{ solicitante!.hasError("required") ? "Debe ingresar este campo" : "" }}
                        </mat-error>
                    </mat-form-field>
                </mat-grid-tile>
                <mat-grid-tile colspan="6">
                    <mat-form-field appearance="standard">
                        <mat-label>Número de Solicitud</mat-label>
                        <input matInput formControlName="numero_solicitud" />
                        <mat-icon matSuffix>tag</mat-icon>
                        <mat-error *ngIf="numero_solicitud!.invalid">{{ numero_solicitud!.hasError("required") ? "Debe ingresar este campo" : "" }}
                        </mat-error>
                    </mat-form-field>
                </mat-grid-tile>
                <mat-grid-tile colspan="6">
                    <mat-form-field appearance="standard">
                        <mat-label>Vacaciones Tomadas</mat-label>
                        <input matInput formControlName="vacaciones_tomadas" />
                        <mat-icon matSuffix>date_range</mat-icon>
                        <mat-error *ngIf="vacaciones_tomadas!.invalid">{{ vacaciones_tomadas!.hasError("required") ? "Debe ingresar este campo" : "" }}
                        </mat-error>
                    </mat-form-field>
                </mat-grid-tile>
                <mat-grid-tile colspan="6">
                    <mat-form-field appearance="standard">
                        <mat-label>Fecha Inicio</mat-label>
                        <input matInput formControlName="fecha_inicio" />
                        <mat-icon matSuffix>today</mat-icon>
                        <mat-error *ngIf="fecha_inicio!.invalid">{{ fecha_inicio!.hasError("required") ? "Debe ingresar este campo" : "" }}
                        </mat-error>
                    </mat-form-field>
                </mat-grid-tile>
                <mat-grid-tile colspan="6">
                    <mat-form-field appearance="standard">
                        <mat-label>Fecha Fin</mat-label>
                        <input matInput formControlName="fecha_final" />
                        <mat-icon matSuffix>event</mat-icon>
                        <mat-error *ngIf="fecha_final!.invalid">{{ fecha_final!.hasError("required") ? "Debe ingresar este campo" : "" }}
                        </mat-error>
                    </mat-form-field>
                </mat-grid-tile>
               
            </mat-grid-list>

        </form>

        <div class="centre" style="padding-top: 20px">
            <button mat-raised-button class="mr-2" color="warn" [mat-dialog-close]="false" matTooltip="Cerrar">
        Cerrar
      </button>
        </div>
    </div>
</div>