<div class="row">
    <div class="col-12">

        <div class="mail-box-content consult pb-3" style="margin: -15px -15px 15px -15px;">
            <div class="expansion-content pull-right">
                <mat-form-field>
                    <mat-label>{{'query.filters.startDate' | translate }}</mat-label>
                    <input matInput [ngxMatDatetimePicker]="startPicker" [(ngModel)]="startDateTime" id="startPickerCIP" (click)="startPicker.open()"
                        onkeyup="this.value=this.value.replace(/.*/gi, '');">
                    <mat-datepicker-toggle matSuffix [for]="startPicker"></mat-datepicker-toggle>
                    <ngx-mat-datetime-picker #startPicker></ngx-mat-datetime-picker>
                </mat-form-field>
                <mat-form-field style="margin-left: 20px;">
                    <mat-label>{{'query.filters.endDate' | translate }}</mat-label>
                    <input matInput [ngxMatDatetimePicker]="endPicker" [(ngModel)]="endDateTime" (click)="endPicker.open()" onkeyup="this.value=this.value.replace(/.*/gi, '');">
                    <mat-datepicker-toggle matSuffix [for]="endPicker"></mat-datepicker-toggle>
                    <ngx-mat-datetime-picker #endPicker></ngx-mat-datetime-picker>
                </mat-form-field>
                <!-- <mat-form-field style="margin-left: 20px;">
                    <mat-label>{{'query.filters.channel' | translate }}</mat-label>
                    <mat-select [(ngModel)]="selectedChannel" name="food">
                        <mat-option *ngFor="let channel of channels" [value]="channel.value">
                            {{ channel.label | translate }}
                        </mat-option>
                    </mat-select>
                </mat-form-field> -->
                <button class="btn btn-primary btn-sm ng-star-inserted" style="margin-left: 15px;
                        margin-top: 0px !important;" type="button" [disabled]="!startDateTime || !endDateTime"
                    (click)="search()">
                    <i class="fa fa-search"></i><span class="btn-label">Buscar</span>
                </button>
            </div>
            <div class="pull-left icon" *ngIf="icon">
                <div [innerHTML]="icon"></div>
            </div>
            <h3 class="grid-title">
                <span>{{ header | translate }}</span>
            </h3>
            <span *ngIf="headerDesc" class="small">{{ headerDesc | translate }}</span>
        </div>
    </div>
</div>