<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 [StartDate] = "startDate" [EndDate]="endDate"
            [identificador]="idSesiones" [areaColor]="sessionColor"
                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 [StartDate] = "startDate" [EndDate]="endDate"
            [identificador]="idMensajesRecibidos" [areaColor]="msjRecibColor"
                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 [StartDate] = "startDate" [EndDate]="endDate"
            [identificador]="idMensajesEnviados" [areaColor]="msjEnvColor"
                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-6">
            <div class="ibox" style="padding-top: 15px;">
                <xdf-widget-panel [options]="gaugeOptions">
                    <div class="row">
                        <div class="col-12" style="text-align-last: 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>
                </xdf-widget-panel>
            </div>
            <!-- <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>

        <!-- Card Promedio de sesiones por cliente -->
        <div class="col-xs-12 col-sm-6 col-lg-6" style="padding-top: 15px; padding-bottom: 24px;">
            <div class="ccard h-100 d-flex flex-column">
                <div class="col-xs-12">
                    <div class="box">
                        <table>
                            <tr>
                                <td rowspan="2">
                                    <span class="icon fa fa-users"></span>
                                </td>
                                <td>
                                    <span class="average-desc">
                                        Promedio de sesiones
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td style="text-align: right;">
                                    <span class="average">
                                        {{ data?.averages?.sessionAverage | number : '1.0'}}
                                    </span>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="popup-footer">
                        <div class="pull-left">
                            <span class="fa fa-info-circle"></span>
                            &nbsp;
                            <span>Este valor hace referencia al promedio de sesiones que registra el cliente actualmente</span>
                        </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>