<byte-customer-interaction-filter (filtered)="filter($event)"></byte-customer-interaction-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="ibox" style="padding-top: 15px;">
        <div class="ibox-content b-s no-padding sankey-ibox" style="text-align: center;">
            <div class="row">
                <div class="col-5 sankey-diagram">
                    <byte-sankey-diagram [data]="data?.sessionFlow?.intent"></byte-sankey-diagram>
                </div>
                <div class="col-7 sankey-table">
                    <byte-message-by-intent-table [minDate]="startDate" [maxDate]="endDate"></byte-message-by-intent-table>
                </div>
            </div>
        </div>
    </div> -->
    <div class="row">
        <div class="col-6">
            <xdf-widget-panel [options]="intentCustomer">
                <div class="row sankey-ibox">
                    <div class="col-12 sankey-diagram">
                        <byte-sankey-diagram [identificador]="idSankeyIntent" [data]="data?.sessionFlow?.intent"></byte-sankey-diagram>
                    </div>
                    
                    
                </div>
            </xdf-widget-panel>
        </div>
        <div class="col-6">
            <xdf-widget-panel [options]="sentencesCustomer">
                <div class="row sankey-ibox">
                    
                    <div class="col-12 sankey-diagram-right">
                        <byte-sankey-diagram [identificador]="idSankeySentence" [data]="data?.sessionFlow?.sentence"></byte-sankey-diagram>
                    </div>
                    
                </div>
            </xdf-widget-panel>
        </div>
    </div>

    <div class="row" >
        <div class="col-6" >
            <!-- <div class="col-6" > -->
            <xdf-widget-panel [options]="panelTableOptions" >
                <!-- <div class="row sankey-ibox" style= "margin:auto"> -->
                    <div  class="col-12" style="margin:auto;height: 400px;"  >
                        <!-- <div class="col-6 sankey-table-left"> -->

                        <!-- <byte-unidentified-sentences-table [minDate]="startDate" [maxDate]="endDate"></byte-unidentified-sentences-table> -->
                        <byte-message-by-intent-table [minDate]="startDate" [maxDate]="endDate" 
                        ></byte-message-by-intent-table>
                    </div>
                
                <!-- </div> -->
            </xdf-widget-panel>
        </div>    
        <div class="col-6" >
            <xdf-widget-panel [options]="panelTableOptions2" style="height:inherit">
                <!-- /nota. solo utilizar margin auto lo centra pero preguntar por row sankey-ibox -->
                <!-- <div class="row sankey-ibox" style="margin:auto"> -->
                    <div class="col-12" style="margin:auto;height: 400px; "  >
                    <!-- <div class="col-12 sankey-diagram-right"> -->
                        <byte-unidentified-sentences-table [minDate]="startDate" [maxDate]="endDate"
                        
                        ></byte-unidentified-sentences-table>
                    </div>
                <!-- </div> -->
            </xdf-widget-panel>
        </div>
        
    </div>

    <div class="row">
        <div class="col-12">
            <xdf-widget-panel [options]="tracingPanelOptions">
                <div class="row">
                    <div class="col-12">
                        <byte-tracing-intent-by-customer [data]="data?.summaryIntents" [minDate]="startDate" [maxDate]="endDate"></byte-tracing-intent-by-customer>
                    </div>
                </div>
            </xdf-widget-panel>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <xdf-widget-panel [options]="avgIntentOptions">
                <div class="row">
                    <div class="col-12">
                        <byte-avg-intent-by-customer [data]="data?.intentAvgByCustomer" [minDate]="startDate"></byte-avg-intent-by-customer>
                    </div>
                </div>
            </xdf-widget-panel>
        </div>
    </div>

    <div class="row">
        <div class="col-12" style="text-align-last: center;">
            <xdf-widget-panel [options]="goalPanelOptions">
                <div class="row">
                    <div class="col-12 mx-auto" style="text-align-last: center;">
                        <byte-stacked-column-chart [data]="data?.summaryGoals"></byte-stacked-column-chart>
                    </div>
                </div>
            </xdf-widget-panel>
        </div>
    </div>
</ng-container>