<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-12">
            <xdf-widget-panel [options]="intentCustomer">
                <div class="row sankey-ibox">
                    <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>
            </xdf-widget-panel>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <xdf-widget-panel [options]="sentencesCustomer">
                <div class="row sankey-ibox">
                    <div class="col-6 sankey-table-left">
                        <byte-unidentified-sentences-table [minDate]="startDate" [maxDate]="endDate"></byte-unidentified-sentences-table>
                    </div>
                    <div class="col-6 sankey-diagram-right">
                        <byte-sankey-diagram [data]="data?.sessionFlow?.sentence"></byte-sankey-diagram>
                    </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">
            <xdf-widget-panel [options]="goalPanelOptions">
                <div class="row">
                    <div class="col-12">
                        <byte-stacked-column-chart [data]="data?.summaryGoals"></byte-stacked-column-chart>
                    </div>
                </div>
            </xdf-widget-panel>
        </div>
    </div>
</ng-container>