{% load static %}
{% block individual_analytics_section %}

        <div class="row col-md-11 px-2 py-2 align-items-end mb-4">
            <div class="col-md-2 px-1 py-1">
                <div class="grey-text"> {{ ttl_user }} </div>
                <div class="white-bg filter-box border">
                    <select id="sltUser" class="filter-input no-focus grey-text size-13 form-control selectpicker text-start" data-style="no-focus no-border grey-text size-13" data-size="10" data-live-search="true">
                    </select>
                </div>
            </div>

            <div class="col-md-2 px-1 py-1">
                <div class="grey-text"> {{ det_from }} </div>
                <div class="white-bg filter-box border">
                    <input id="individualFromDate" type="date" class="filter-input no-focus px-2 size-13 form-control" minlength="10" maxlength="10"/>
                </div>
            </div>

            <div class="col-md-2 px-1 py-1">
                <div class="grey-text"> {{ det_to }} </div>
                <div class="white-bg filter-box border">
                    <input id="individualToDate" type="date" class="filter-input no-focus px-2 size-13 form-control" minlength="10" maxlength="10"/>
                </div>
            </div>

            {% if has_contextual_search_permission %}
                <div class="col-md-2 px-1 py-1">
                    <div class="grey-text"> {{ ttl_tags }} </div>
                    <div class="white-bg filter-box border">
                        <select id="sltTagsIndividual" class="filter-input no-focus grey-text size-13 form-control selectpicker text-start" data-style="no-focus no-border grey-text size-13" data-size="10" data-live-search="true" multiple>
                        </select>
                    </div>
                </div>
            {% endif %}

            <div class="col-md-1 px-1 py-1">
                <button id="btnIndividualRender" class="plain-btn"> {{ ins_render }} </button>
            </div>
        </div>


        <div class="py-3 light-grey-bg">

            <div class="row px-2">
                <div class="col px-1 py-2">
                    <div class="px-2 py-2 d-flex white-bg tc-height-100 justify-content-center align-items-center flex-column border rounded shadow-sm">
                        <div class="d-block grey-text size-13 bold-600 center-text px-2"> {{ ttl_incidents }} </div>
                        <div id="incidentCount" class="d-block grey-text bold-600 size-30"> </div>
                    </div>
                </div>
                <div class="col px-1 py-2">
                    <div class="px-2 py-2 d-flex white-bg tc-height-100 justify-content-center align-items-center flex-column border rounded shadow-sm">
                        <div class="d-block grey-text size-13 bold-600 center-text px-2"> {{ det_avg }} {{ ttl_acknowledgement_time }} </div>
                        <div id="acknowledgementTime" class="d-block grey-text bold-600 size-30"> </div>
                    </div>
                </div>
                <div class="col px-1 py-2">
                    <div class="px-2 py-2 d-flex white-bg tc-height-100 justify-content-center align-items-center flex-column border rounded shadow-sm">
                        <div class="d-block grey-text size-13 bold-600 center-text px-2"> {{ det_avg }} {{ ttl_resolution_time }} </div>
                        <div id="resolutionTime" class="d-block grey-text bold-600 size-30"> </div>
                    </div>
                </div>
                <div class="col px-1 py-2">
                    <div class="px-2 py-2 d-flex white-bg tc-height-100 justify-content-center align-items-center flex-column border rounded shadow-sm">
                        <div class="d-block grey-text size-13 bold-600 center-text px-2"> {{ ttl_responsiveness }} </div>
                        <div id="responsiveness" class="d-block grey-text bold-600 size-30"> </div>
                    </div>
                </div>
                <div class="col px-1 py-2">
                    <div class="px-2 py-2 d-flex white-bg tc-height-100 justify-content-center align-items-center flex-column border rounded shadow-sm">
                        <div class="d-block grey-text size-13 bold-600 center-text px-2"> {{ ttl_effectiveness }} </div>
                        <div id="effectiveness" class="d-block grey-text bold-600 size-30"> </div>
                    </div>
                </div>
            </div>


            <div class="row px-2 py-2">

                <div class="col-md-6 mb-2 px-1">
                    <div align="center" class="white-bg border rounded shadow-sm">
                        <span class="grey-text size-13 bold-600 center-text py-2"> {{ det_fatigue }} <span class="text-lowercase"> ({{ det_weekly }}) </span> </span>
                        <canvas class="w-100 px-2 pt-0 pb-2" height="145" id="chartUserFatigue"></canvas>
                    </div>
                </div>
                <div class="col-md-3 mb-2 px-1">
                    <div class="h-100 py-2 d-block justify-content-center white-bg border rounded shadow-sm" align="center">
                        <span class="d-block grey-text size-13 bold-600 center-text py-2"> {{ ttl_interruptions }} ({{ dsm_hours_per_day }}) </span>
                        <p id="interruptionHours"></p>
                        <p id="interruptionHoursQualitative" class="grey-text size-13 bold-600 center-text pb-1"></p>
                    </div>
                </div>
                <div class="col-md-3 mb-2 px-1">
                    <div class="h-100 py-2 d-block justify-content-center white-bg border rounded shadow-sm" align="center">
                        <span class="d-block grey-text size-13 bold-600 center-text py-2"> {{ ttl_rest_between_incidents }} ({{ dsm_hours }}) </span>
                        <p id="restHours"></p>
                        <p id="restHoursQualitative" class="grey-text size-13 bold-600 center-text pb-1"></p>
                    </div>

                </div>
            </div>


            <div class="row px-2 py-2 mb-2">

                <div class="col-md-8 mb-2 px-1">
                    <div class="py-2 white-bg border rounded shadow-sm" align="center">
                        <p class="grey-text size-13 bold-600 center-text py-2"> {{ ttl_hourly_effectiveness }} </p>
                        <canvas class="w-100 px-2 pt-0 pb-2" height="185" id="chartHourlyEffectiveness"></canvas>
                    </div>
                </div>

                <div class="col-md-4 mb-2 px-1 tc-height-180">
                    <div class="py-2 px-2 white-bg border rounded shadow-sm" align="center">
                        <p class="grey-text size-13 bold-600 center-text py-2"> {{ det_avg }} {{ ttl_effectiveness }} </p>
                        <div class="row align-items-center pt-1">
                            <div class="col-md-7 px-3 tc-height-180">
                                <canvas class="h-100" height="160" id="chartAvgEffectiveness"></canvas>
                            </div>
                            <div class="col-md-5 ps-3">
                                <p id="lblAvgEffectiveness"></p>
                                <p id="effectivenessQualitativeOne" class="grey-text size-13 bold-600 text-center"></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="px-2 py-2 white-bg border rounded shadow-sm" align="center">
                <div class="grey-text size-13 bold-600 center-text pt-2 pb-4"> {{ ttl_incident_assignment_distribution }} </div>
                <div id="divPolicyWorkloadCharts" class="d-flex flex-row tc-height-200"></div>
            </div>
        </div>

{% endblock %}