<byte-operative-dashboard-filter (filtered)="filter($event)"></byte-operative-dashboard-filter>
<ng-container *ngIf="isLoading">
    <div class="spiner-example">
        <div class="sk-spinner sk-spinner-circle">
            <div class="sk-circle1 sk-circle"></div>
            <div class="sk-circle2 sk-circle"></div>
            <div class="sk-circle3 sk-circle"></div>
            <div class="sk-circle4 sk-circle"></div>
            <div class="sk-circle5 sk-circle"></div>
            <div class="sk-circle6 sk-circle"></div>
            <div class="sk-circle7 sk-circle"></div>
            <div class="sk-circle8 sk-circle"></div>
            <div class="sk-circle9 sk-circle"></div>
            <div class="sk-circle10 sk-circle"></div>
            <div class="sk-circle11 sk-circle"></div>
            <div class="sk-circle12 sk-circle"></div>
        </div>
    </div>
</ng-container>
<ng-container *ngIf="!isLoading && isDataLoaded">
    <div class="row">
        <div class="col-lg-3 col-sm-6 col-xs-12">
            <byte-inactivity-sesion header="dashboards.operative.inactivity.sessions" [value]="data?.summary?.sessionInactivity"
                [options]="optionsInactivitySesion"></byte-inactivity-sesion>
        </div>
        <div class="col-lg-3 col-sm-6 col-xs-12">
            <byte-summary-peti-widget header="dashboards.operative.sessions" [value]="data?.summary?.totalSessions"
                [options]="totalSesionsOptions" tooltip="dashboards.operative.session.total.desc">
            </byte-summary-peti-widget>
        </div>
        <div class="col-lg-3 col-sm-6 col-xs-12">
            <byte-summary-peti-widget header="dashboards.operative.receveid"
                [value]="data?.summary?.totalReceivedMessages" [options]="totalReceivedOptions"
                tooltip="dashboards.operative.message.received.desc" format="true" [formatter]="formatterNumber">
            </byte-summary-peti-widget>
        </div>
        <div class="col-lg-3 col-sm-6 col-xs-12">
            <byte-summary-peti-widget header="dashboards.operative.sended" [value]="data?.summary?.totalSentMessages"
                [options]="totalSentOptions" tooltip="dashboards.operative.message.sended.desc" format="true"
                [formatter]="formatterNumber"></byte-summary-peti-widget>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-lg-8">
            <div class="ibox" style="padding-top: 15px;">
                <div class="ibox-content b-s" style="text-align: center;">
                    <byte-gauge-chart [value]="data?.averages?.firstResponseAverage" unit="s"
                        name="{{ 'Tiempo promedio de primera respuesta' | translate }}" style="display: inline-block;">
                    </byte-gauge-chart>
                </div>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-lg-4"> 
            <div class="ibox" style="padding-top: 15px;">
                <div class="ibox-content b-s" style="text-align: center;">
                    <!-- <byte-gauge-chart [value]="data?.averages?.sessionAverage" name="{{ 'dashboards.operative.avg.sessions' | translate }}" style="display: inline-block;">
                    </byte-gauge-chart> -->
                    <div class="widget style1">
                        <div class="row">
                            <div class="col-12 text-center">
                                <i class="fa fa-user fa-5x"></i>
                            </div>
                            <div class="col-12 text-center">
                                <span> {{ 'dashboards.operative.avg.sessions' | translate }} </span>
                                <h2 class="font-bold">{{ data?.averages?.sessionAverage | number : '1.1-1'}}</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row" *ngIf="startDate && endDate">
        <div class="col-12">
            <xdf-widget-panel [options]="panelOptions">
                <div class="row">
                    <div class="col-12">
                        <byte-heat-map [data]="data?.customerMessageDetail" [minDate]="startDate" [maxDate]="endDate">
                        </byte-heat-map>
                    </div>
                </div>
            </xdf-widget-panel>
        </div>
    </div>
</ng-container>