<div class="main-content" style="width: 800px">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card ">

                    <ng-template [ngIf]="crudType === 'edit' || crudType === 'new'">
                        <!-- Modal Create or Edit -->
                        <div class="card-header card-header-rose card-header-icon">
                            <div class="card-icon">
                                <i class="material-icons">{{modalIcon}}</i>
                            </div>
                            <h4 class="card-title">{{modalTitle}} <label class="col-md-4 col-form-id">{{idText}}</label>
                            </h4>

                        </div>
                        <div class="card-body mb-3">
                            <mat-dialog-content [formGroup]="form">

                                <div class="card-body mb-3">

                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="row">
                                                <label class="col-md-4 col-form-label">Customer</label>
                                                <div class="col-md-8">
                                                  <mat-form-field class="col-md-12">
                                                    <mat-select formControlName="customer">
                                                        <mat-option *ngFor="let customer of airlines" [value]="customer.value">
                                                            {{ customer.label }}
                                                        </mat-option>
                                                  </mat-select>
                                                  </mat-form-field>
                                                </div>
                                            </div>

                                        </div>

                                        <div class="col-md-4">

                                        </div>
                                        <div class="col-md-5">

                                        </div>
                                    </div>
                                    <mat-divider class="mt-3"></mat-divider>
                                    <div class="row">
                                        <div class="col-md-3">

                                        </div>

                                        <div class="col-md-4">

                                        </div>
                                        <div class="col-md-5">

                                        </div>
                                    </div>


                                </div>
                            </mat-dialog-content>

                            <mat-divider class="mt-3"></mat-divider>

                            <mat-dialog-actions>
                                <button mat-raised-button type="submit" class="btn btn-success btn-fill"
                                    (click)="save()">Save</button>
                                <button class="btn btn-next btn-fill btn-rose btn-wd ml-auto"
                                    mat-dialog-close>Close</button>
                            </mat-dialog-actions>
                        </div>
                        <!-- End Edit -->
                    </ng-template>

                    <ng-template [ngIf]="crudType === 'view'">
                        <!-- Modal View -->

                        <div class="card-header card-header-rose card-header-icon">
                            <div class="card-icon">
                                <i class="material-icons">{{modalIcon}}</i>
                            </div>
                            <h4 class="card-title">{{modalTitle}} <label class="col-md-4 col-form-id">{{idText}}</label>
                            </h4>
                        </div>
                        <div class="card-body mb-3">

                            <div class="row">
                                <div class="col-md-3">
                                    <label class="">JobNo <b>{{params.data.job_no}}</b></label>
                                    <label class="">Customer (id{{params.data.customer.id}})
                                        <b>{{params.data.customer.name}}</b></label>
                                    <label class="">Address <b>{{params.data.customer.address}}</b></label>
                                    <label class="">Email <b>{{params.data.customer.email}}</b></label>
                                </div>

                                <div class="col-md-4">
                                    <label class="">Quay
                                        (id{{params.data.quay.id}})<b>{{params.data.quay.name}}</b></label><br />
                                    <label class="">Length <b>{{params.data.quay.length}}</b></label>
                                </div>
                                <div class="col-md-5">
                                    <label class="">Vessel
                                        (id{{params.data.vessel_name.id}})<b>{{params.data.vessel_name.name}}</b></label><br />
                                    <label class="">Vessel <b>{{params.data.vessel_name.reference}}</b></label>
                                </div>
                            </div>
                            <mat-divider class="mt-3"></mat-divider>
                            <div class="row">
                                <div class="col-md-3">
                                    <label class="">Shore Tank <b>{{params.data.shore_tank_no}}</b></label>
                                    <label class="">Quantity <b>{{params.data.quantity}}</b></label>
                                    <label class="">Delivery <b>{{params.data.delivery_method}}</b></label>
                                </div>

                                <div class="col-md-4">
                                    <label class="">Connection <b>{{params.data.connection_type}}</b></label>
                                    <label class="">ETA <b>{{params.data.eta}}</b></label>
                                    <label class="">Trolley <b>{{params.data.trolley_no}}</b></label>
                                </div>
                                <div class="col-md-5">
                                    <label class="">Average Flow Rate
                                        <b>{{params.data.average_flow_rate}}</b></label><br />
                                    <label class="">Meter Start <b>{{params.data.meter_start}}</b></label><br />
                                    <label class="">Meter End <b>{{params.data.meter_end}}</b></label>
                                </div>
                            </div>

                            <mat-dialog-actions>
                                <button class="btn btn-next btn-fill btn-rose btn-wd ml-auto"
                                    mat-dialog-close>Close</button>
                            </mat-dialog-actions>
                        </div>
                        <!-- End View -->
                    </ng-template>

                </div>
            </div>
        </div>
    </div>
</div>