{% extends "insights/base.html" %}
{% load nice_format insight_chart %}
{% block content %}
    <div class="grid gap-4 px-2 py-2 sm:grid-cols-2 lg:grid-cols-4 sm:gap-6">
        {% for counter in app.counters.all %}
            {% if counter %}
                <div class="flex flex-col border shadow-sm bg-background border-slate-200 dark:border-slate-900 text-foreground dark:bg-foreground dark:text-background rounded-xl">
                    <div class="p-4 md:p-5">
                        <div class="flex items-center gap-x-2">
                            <p class="text-xs tracking-wide text-gray-500 uppercase">{{ counter.question }}</p>
                            {% if counter.desc %}
                                <div class="hs-tooltip">
                                    <div class="hs-tooltip-toggle">
                                        <svg class="w-3.5 h-3.5 text-gray-500"
                                             xmlns="http://www.w3.org/2000/svg"
                                             width="16"
                                             height="16"
                                             fill="currentColor"
                                             viewBox="0 0 16 16">
                                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                                            <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
                                        </svg>
                                        <span class="absolute z-10 invisible inline-block px-2 py-1 text-xs font-medium text-white transition-opacity bg-gray-900 rounded-md shadow-sm opacity-0 dark:text-gray-50 hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible dark:bg-slate-900"
                                              role="tooltip">{{ counter.desc }}</span>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                        <div class="flex items-center mt-1">
                            <h3 class="text-xl font-medium text-gray-800 sm:text-2xl dark:text-gray-200">{{ counter.value }}</h3>
                            <span class="flex items-center text-gray-500">
                                <span class="inline-block p-2 text-xs">x</span>
                            </span>
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endfor %}
        {% for gauge in app.gauges.all %}
            {% if gauge %}
                <div class="flex flex-col border shadow-sm bg-background border-slate-200 dark:border-slate-900 text-foreground dark:bg-foreground dark:text-background rounded-xl">
                    <div class="p-4 md:p-5">
                        <div class="flex items-center gap-x-2">
                            <p class="text-xs tracking-wide text-gray-500 uppercase">{{ gauge.question }}</p>
                            {% if counter.desc %}
                                <div class="hs-tooltip">
                                    <div class="hs-tooltip-toggle">
                                        <svg class="w-3.5 h-3.5 text-gray-500"
                                             xmlns="http://www.w3.org/2000/svg"
                                             width="16"
                                             height="16"
                                             fill="currentColor"
                                             viewBox="0 0 16 16">
                                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                                            <path d="M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z" />
                                        </svg>
                                        <span class="absolute z-10 invisible inline-block px-2 py-1 text-xs font-medium text-white transition-opacity bg-gray-900 rounded-md shadow-sm opacity-0 dark:text-gray-50 hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible dark:bg-slate-900"
                                              role="tooltip">{{ gauge.desc }}</span>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                        <div class="flex items-center mt-1">
                            <h3 class="text-xl font-medium text-gray-800 sm:text-2xl dark:text-gray-200">{{ gauge.value }}</h3>
                            <span class="flex items-center text-gray-500">
                                <span class="inline-block p-2 text-xs">%</span>
                            </span>
                        </div>
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>
    <div class="flex flex-wrap">
        {% for bucket in app.buckets.timeseries %}
            {% if bucket %}
                <div class="px-2 w-1/1 md:w-1/2">
                    <div class="mb-5 flex flex-col bg-white border shadow-sm rounded-xl dark:bg-foreground/[.7] dark:border-foreground">
                        <div class="grid gap-3 px-6 py-4 md:flex md:justify-between md:items-center">
                            <div>
                                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">{{ bucket.question }}</h2>
                                {% if bucket.desc %}<p class="text-sm text-gray-600 dark:text-gray-400">{{ bucket.desc }}</p>{% endif %}
                            </div>
                        </div>
                        <!-- Chart -->
                        {% chart bucket bucket.label %}
                        <div id="hs-full-screen-modal-{{ bucket.label }}"
                             class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
                            <div class="w-full max-w-full mt-10 transition-all opacity-0 hs-overlay-open:mt-0 hs-overlay-open:opacity-100 hs-overlay-open:duration-500">
                                <div class="flex flex-col h-screen bg-white dark:bg-gray-800">
                                    <div class="flex items-center justify-between px-4 py-3 border-b dark:border-gray-700">
                                        <h3 class="font-bold text-gray-800 dark:text-white">{{ bucket.question }}</h3>
                                        <button type="button"
                                                class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-sm text-gray-500 transition-all rounded-md hs-dropdown-toggle hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800"
                                                data-hs-overlay="#hs-full-screen-modal-{{ bucket.label }}">
                                            <span class="sr-only">Sluiten</span>
                                            <svg class="w-3.5 h-3.5"
                                                 width="8"
                                                 height="8"
                                                 viewBox="0 0 8 8"
                                                 fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="p-4 overflow-y-auto">{% chart bucket %}</div>
                                </div>
                            </div>
                        </div>
                        <!-- End Chart -->
                        <!-- Card details -->
                        <div class="px-4">
                            <a type="button"
                               class="inline-flex items-center justify-center gap-2 px-4 py-3 m-1 ml-0 text-sm font-semibold cursor-pointer hover:text-blue-600 text-foreground dark:text-background"
                               data-hs-overlay="#insights-detail-panel-{{ bucket.label }}">Toon meer</a>
                        </div>
                        <!-- Off-grid panel -->
                        <div id="insights-detail-panel-{{ bucket.label }}"
                             class="hs-overlay hs-overlay-open:translate-x-0 translate-x-full fixed top-0 right-0 transition-all duration-100 transform h-full max-w-full md:max-w-md w-full z-[60] bg-white dark:bg-foreground hidden"
                             tabindex="-1">
                            <div class="flex items-center justify-between px-4 py-3">
                                <h3 class="font-bold text-gray-800 dark:text-white">{{ bucket.question }}</h3>
                                <button type="button"
                                        class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-sm text-gray-500 rounded-md hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white dark:text-gray-500 dark:hover:text-gray-400 dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800"
                                        data-hs-overlay="#insights-detail-panel-{{ bucket.label }}">
                                    <span class="sr-only">Close modal</span>
                                    <svg class="w-3.5 h-3.5"
                                         width="8"
                                         height="8"
                                         viewBox="0 0 8 8"
                                         fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
                                    </svg>
                                </button>
                            </div>
                            {% chart bucket %}
                            <div class="h-full p-4 overflow-y-scroll">
                                <!-- Table -->
                                <table class="min-w-full">
                                    <thead class="bg-gray-50 dark:bg-slate-900">
                                        <tr>
                                            <th scope="col" class="px-6 py-3 text-left">
                                                <div class="flex items-center gap-x-2">
                                                    <span class="text-xs font-semibold tracking-wide text-gray-800 uppercase dark:text-gray-200">{{ bucket.xlabel }}</span>
                                                </div>
                                            </th>
                                            <th scope="col" class="px-6 py-3 text-left">
                                                <div class="flex items-center gap-x-2">
                                                    <span class="text-xs font-semibold tracking-wide text-gray-800 uppercase dark:text-gray-200">{{ bucket.ylabel }}</span>
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for bucket_value in bucket.values.all %}
                                            <tr class="border-0">
                                                <td class="w-px h-px whitespace-nowrap">
                                                    <div class="px-6 py-2">
                                                        <span class="text-sm text-gray-600 dark:text-gray-400">{{ bucket_value.timestamp|date:bucket.xformat|clean_str:"%" }}</span>
                                                    </div>
                                                </td>
                                                <td class="w-px h-px whitespace-nowrap">
                                                    <div class="px-6 py-2">
                                                        <span class="text-sm text-gray-600 dark:text-gray-400">{{ bucket_value.xvalue|nice_float }}</span>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                                <!-- End Table Section -->
                            </div>
                        </div>
                        <!-- END off-grid panel -->
                    </div>
                </div>
            {% endif %}
        {% endfor %}
        {% for bucket in app.buckets.scatterplots %}
            {% if bucket %}
                <div class="px-2 w-1/1 md:w-1/2">
                    <div class="mb-5 flex flex-col bg-white border shadow-sm rounded-xl dark:bg-foreground/[.7] dark:border-foreground">
                        <div class="grid gap-3 px-6 py-4 md:flex md:justify-between md:items-center">
                            <div>
                                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">{{ bucket.question }}</h2>
                                {% if bucket.desc %}<p class="text-sm text-gray-600 dark:text-gray-400">{{ bucket.desc }}</p>{% endif %}
                            </div>
                        </div>
                        <!-- Chart -->
                        {% chart bucket bucket.label %}
                        <div id="hs-full-screen-modal-{{ bucket.label }}"
                             class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
                            <div class="w-full max-w-full mt-10 transition-all opacity-0 hs-overlay-open:mt-0 hs-overlay-open:opacity-100 hs-overlay-open:duration-500">
                                <div class="flex flex-col h-screen bg-white dark:bg-gray-800">
                                    <div class="flex items-center justify-between px-4 py-3 border-b dark:border-gray-700">
                                        <h3 class="font-bold text-gray-800 dark:text-white">{{ bucket.question }}</h3>
                                        <button type="button"
                                                class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-sm text-gray-500 transition-all rounded-md hs-dropdown-toggle hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800"
                                                data-hs-overlay="#hs-full-screen-modal-{{ bucket.label }}">
                                            <span class="sr-only">Sluiten</span>
                                            <svg class="w-3.5 h-3.5"
                                                 width="8"
                                                 height="8"
                                                 viewBox="0 0 8 8"
                                                 fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="p-4 overflow-y-auto">{% chart bucket %}</div>
                                </div>
                            </div>
                        </div>
                        <!-- End Chart -->
                        <!-- Card details -->
                        <div class="px-4">
                            <a type="button"
                               class="inline-flex items-center justify-center gap-2 px-4 py-3 m-1 ml-0 text-sm font-semibold cursor-pointer hover:text-blue-600 text-foreground dark:text-background"
                               data-hs-overlay="#insights-detail-panel-{{ bucket.label }}">Toon meer</a>
                        </div>
                        <!-- Off-grid panel -->
                        <div id="insights-detail-panel-{{ bucket.label }}"
                             class="hs-overlay hs-overlay-open:translate-x-0 translate-x-full fixed top-0 right-0 transition-all duration-100 transform h-full max-w-full md:max-w-md w-full z-[60] bg-white dark:bg-foreground hidden"
                             tabindex="-1">
                            <div class="flex items-center justify-between px-4 py-3">
                                <h3 class="font-bold text-gray-800 dark:text-white">{{ bucket.question }}</h3>
                                <button type="button"
                                        class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-sm text-gray-500 rounded-md hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white dark:text-gray-500 dark:hover:text-gray-400 dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800"
                                        data-hs-overlay="#insights-detail-panel-{{ bucket.label }}">
                                    <span class="sr-only">Close modal</span>
                                    <svg class="w-3.5 h-3.5"
                                         width="8"
                                         height="8"
                                         viewBox="0 0 8 8"
                                         fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
                                    </svg>
                                </button>
                            </div>
                            {% chart bucket %}
                            <div class="h-full p-4 overflow-y-scroll">
                                <!-- Table -->
                                <table class="min-w-full">
                                    <thead class="bg-gray-50 dark:bg-slate-900">
                                        <tr>
                                            <th scope="col" class="px-6 py-3 text-left">
                                                <div class="flex items-center gap-x-2">
                                                    <span class="text-xs font-semibold tracking-wide text-gray-800 uppercase dark:text-gray-200">{{ bucket.xlabel }}</span>
                                                </div>
                                            </th>
                                            <th scope="col" class="px-6 py-3 text-left">
                                                <div class="flex items-center gap-x-2">
                                                    <span class="text-xs font-semibold tracking-wide text-gray-800 uppercase dark:text-gray-200">{{ bucket.ylabel }}</span>
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for bucket_value in bucket.values.all %}
                                            <tr>
                                                <td class="w-px h-px whitespace-nowrap">
                                                    <div class="px-6 py-2">
                                                        <span class="text-sm text-gray-600 dark:text-gray-400">{{ bucket_value.yvalue }}</span>
                                                    </div>
                                                </td>
                                                <td class="w-px h-px whitespace-nowrap">
                                                    <div class="px-6 py-2">
                                                        <span class="text-sm text-gray-600 dark:text-gray-400">{{ bucket_value.xvalue|nice_float }}</span>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <!-- END off-grid panel -->
                    </div>
                </div>
            {% endif %}
        {% endfor %}
        {% for bucket in app.buckets.barcharts %}
            {% if bucket %}
                <div class="px-2 w-1/1 md:w-1/2">
                    <div class="mb-5 flex flex-col bg-white border shadow-sm rounded-xl dark:bg-foreground/[.7] dark:border-foreground">
                        <div class="grid gap-3 px-6 py-4 md:flex md:justify-between md:items-center">
                            <div>
                                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">{{ bucket.question }}</h2>
                                {% if bucket.desc %}<p class="text-sm text-gray-600 dark:text-gray-400">{{ bucket.desc }}</p>{% endif %}
                            </div>
                        </div>
                        <!-- Chart -->
                        {% chart bucket bucket.label %}
                        <div id="hs-full-screen-modal-{{ bucket.label }}"
                             class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
                            <div class="w-full max-w-full mt-10 transition-all opacity-0 hs-overlay-open:mt-0 hs-overlay-open:opacity-100 hs-overlay-open:duration-500">
                                <div class="flex flex-col h-screen bg-white dark:bg-gray-800">
                                    <div class="flex items-center justify-between px-4 py-3 border-b dark:border-gray-700">
                                        <h3 class="font-bold text-gray-800 dark:text-white">{{ bucket.question }}</h3>
                                        <button type="button"
                                                class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-sm text-gray-500 transition-all rounded-md hs-dropdown-toggle hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800"
                                                data-hs-overlay="#hs-full-screen-modal-{{ bucket.label }}">
                                            <span class="sr-only">Sluiten</span>
                                            <svg class="w-3.5 h-3.5"
                                                 width="8"
                                                 height="8"
                                                 viewBox="0 0 8 8"
                                                 fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="p-4 overflow-y-auto">{% chart bucket %}</div>
                                </div>
                            </div>
                        </div>
                        <!-- End Chart -->
                        <!-- Card details -->
                        <div class="px-4">
                            <a type="button"
                               class="inline-flex items-center justify-center gap-2 px-4 py-3 m-1 ml-0 text-sm font-semibold cursor-pointer hover:text-blue-600 text-foreground dark:text-background"
                               data-hs-overlay="#insights-detail-panel-{{ bucket.label }}">Toon meer</a>
                        </div>
                        <!-- Off-grid panel -->
                        <div id="insights-detail-panel-{{ bucket.label }}"
                             class="hs-overlay hs-overlay-open:translate-x-0 translate-x-full fixed top-0 right-0 transition-all duration-100 transform h-full max-w-full md:max-w-md w-full z-[60] bg-white dark:bg-foreground hidden"
                             tabindex="-1">
                            <div class="flex items-center justify-between px-4 py-3">
                                <h3 class="font-bold text-gray-800 dark:text-white">{{ bucket.question }}</h3>
                                <button type="button"
                                        class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-sm text-gray-500 rounded-md hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white dark:text-gray-500 dark:hover:text-gray-400 dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800"
                                        data-hs-overlay="#insights-detail-panel-{{ bucket.label }}">
                                    <span class="sr-only">Close modal</span>
                                    <svg class="w-3.5 h-3.5"
                                         width="8"
                                         height="8"
                                         viewBox="0 0 8 8"
                                         fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
                                    </svg>
                                </button>
                            </div>
                            {% chart bucket %}
                            <div class="h-full p-4 overflow-y-scroll">
                                <!-- Table -->
                                <table class="min-w-full">
                                    <thead class="bg-gray-50 dark:bg-slate-900">
                                        <tr>
                                            <th scope="col" class="px-6 py-3 text-left">
                                                <div class="flex items-center gap-x-2">
                                                    <span class="text-xs font-semibold tracking-wide text-gray-800 uppercase dark:text-gray-200">{{ bucket.xlabel }}</span>
                                                </div>
                                            </th>
                                            <th scope="col" class="px-6 py-3 text-left">
                                                <div class="flex items-center gap-x-2">
                                                    <span class="text-xs font-semibold tracking-wide text-gray-800 uppercase dark:text-gray-200">{{ bucket.ylabel }}</span>
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for bucket_value in bucket.values.all %}
                                            <tr>
                                                <td class="w-px h-px whitespace-nowrap">
                                                    <div class="px-6 py-2">
                                                        <span class="text-sm text-gray-600 dark:text-gray-400">{{ bucket_value.category }}</span>
                                                    </div>
                                                </td>
                                                <td class="w-px h-px whitespace-nowrap">
                                                    <div class="px-6 py-2">
                                                        <span class="text-sm text-gray-600 dark:text-gray-400">{{ bucket_value.xvalue|nice_float }}</span>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                                <!-- End Table Section -->
                            </div>
                        </div>
                        <!-- END off-grid panel -->
                    </div>
                </div>
            {% endif %}
        {% endfor %}
        {% for bucket in app.buckets.hbarcharts %}
            {% if bucket %}
                <div class="px-2 w-1/1 md:w-1/2">
                    <div class="mb-5 flex flex-col bg-white border shadow-sm rounded-xl dark:bg-foreground/[.7] dark:border-foreground">
                        <div class="grid gap-3 px-6 py-4 md:flex md:justify-between md:items-center">
                            <div>
                                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">{{ bucket.question }}</h2>
                                {% if bucket.desc %}<p class="text-sm text-gray-600 dark:text-gray-400">{{ bucket.desc }}</p>{% endif %}
                            </div>
                        </div>
                        <!-- Chart -->
                        {% chart bucket bucket.label %}
                        <div id="hs-full-screen-modal-{{ bucket.label }}"
                             class="hs-overlay hidden w-full h-full fixed top-0 left-0 z-[60] overflow-x-hidden overflow-y-auto">
                            <div class="w-full max-w-full mt-10 transition-all opacity-0 hs-overlay-open:mt-0 hs-overlay-open:opacity-100 hs-overlay-open:duration-500">
                                <div class="flex flex-col h-screen bg-white dark:bg-gray-800">
                                    <div class="flex items-center justify-between px-4 py-3 border-b dark:border-gray-700">
                                        <h3 class="font-bold text-gray-800 dark:text-white">{{ bucket.question }}</h3>
                                        <button type="button"
                                                class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-sm text-gray-500 transition-all rounded-md hs-dropdown-toggle hover:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800"
                                                data-hs-overlay="#hs-full-screen-modal-{{ bucket.label }}">
                                            <span class="sr-only">Sluiten</span>
                                            <svg class="w-3.5 h-3.5"
                                                 width="8"
                                                 height="8"
                                                 viewBox="0 0 8 8"
                                                 fill="none"
                                                 xmlns="http://www.w3.org/2000/svg">
                                                <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
                                            </svg>
                                        </button>
                                    </div>
                                    <div class="p-4 overflow-y-auto">{% chart bucket %}</div>
                                </div>
                            </div>
                        </div>
                        <!-- End Chart -->
                        <!-- Card details -->
                        <div class="px-4">
                            <a type="button"
                               class="inline-flex items-center justify-center gap-2 px-4 py-3 m-1 ml-0 text-sm font-semibold cursor-pointer hover:text-blue-600 text-foreground dark:text-background"
                               data-hs-overlay="#insights-detail-panel-{{ bucket.label }}">Toon meer</a>
                        </div>
                        <!-- Off-grid panel -->
                        <div id="insights-detail-panel-{{ bucket.label }}"
                             class="hs-overlay hs-overlay-open:translate-x-0 translate-x-full fixed top-0 right-0 transition-all duration-100 transform h-full max-w-full md:max-w-md w-full z-[60] bg-white dark:bg-foreground hidden"
                             tabindex="-1">
                            <div class="flex items-center justify-between px-4 py-3">
                                <h3 class="font-bold text-gray-800 dark:text-white">{{ bucket.question }}</h3>
                                <button type="button"
                                        class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-sm text-gray-500 rounded-md hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white dark:text-gray-500 dark:hover:text-gray-400 dark:focus:ring-gray-700 dark:focus:ring-offset-gray-800"
                                        data-hs-overlay="#insights-detail-panel-{{ bucket.label }}">
                                    <span class="sr-only">Close modal</span>
                                    <svg class="w-3.5 h-3.5"
                                         width="8"
                                         height="8"
                                         viewBox="0 0 8 8"
                                         fill="none"
                                         xmlns="http://www.w3.org/2000/svg">
                                        <path d="M0.258206 1.00652C0.351976 0.912791 0.479126 0.860131 0.611706 0.860131C0.744296 0.860131 0.871447 0.912791 0.965207 1.00652L3.61171 3.65302L6.25822 1.00652C6.30432 0.958771 6.35952 0.920671 6.42052 0.894471C6.48152 0.868271 6.54712 0.854471 6.61352 0.853901C6.67992 0.853321 6.74572 0.865971 6.80722 0.891111C6.86862 0.916251 6.92442 0.953381 6.97142 1.00032C7.01832 1.04727 7.05552 1.1031 7.08062 1.16454C7.10572 1.22599 7.11842 1.29183 7.11782 1.35822C7.11722 1.42461 7.10342 1.49022 7.07722 1.55122C7.05102 1.61222 7.01292 1.6674 6.96522 1.71352L4.31871 4.36002L6.96522 7.00648C7.05632 7.10078 7.10672 7.22708 7.10552 7.35818C7.10442 7.48928 7.05182 7.61468 6.95912 7.70738C6.86642 7.80018 6.74102 7.85268 6.60992 7.85388C6.47882 7.85498 6.35252 7.80458 6.25822 7.71348L3.61171 5.06702L0.965207 7.71348C0.870907 7.80458 0.744606 7.85498 0.613506 7.85388C0.482406 7.85268 0.357007 7.80018 0.264297 7.70738C0.171597 7.61468 0.119017 7.48928 0.117877 7.35818C0.116737 7.22708 0.167126 7.10078 0.258206 7.00648L2.90471 4.36002L0.258206 1.71352C0.164476 1.61976 0.111816 1.4926 0.111816 1.36002C0.111816 1.22744 0.164476 1.10028 0.258206 1.00652Z" fill="currentColor" />
                                    </svg>
                                </button>
                            </div>
                            {% chart bucket %}
                            <div class="h-full p-4 overflow-y-scroll">
                                <!-- Table -->
                                <table class="min-w-full">
                                    <thead class="bg-gray-50 dark:bg-slate-900">
                                        <tr>
                                            <th scope="col" class="px-6 py-3 text-left">
                                                <div class="flex items-center gap-x-2">
                                                    <span class="text-xs font-semibold tracking-wide text-gray-800 uppercase dark:text-gray-200">{{ bucket.xlabel }}</span>
                                                </div>
                                            </th>
                                            <th scope="col" class="px-6 py-3 text-left">
                                                <div class="flex items-center gap-x-2">
                                                    <span class="text-xs font-semibold tracking-wide text-gray-800 uppercase dark:text-gray-200">{{ bucket.ylabel }}</span>
                                                </div>
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for bucket_value in bucket.values.all %}
                                            <tr>
                                                <td class="w-px h-px whitespace-nowrap">
                                                    <div class="px-6 py-2">
                                                        <span class="text-sm text-gray-600 dark:text-gray-400">{{ bucket_value.category }}</span>
                                                    </div>
                                                </td>
                                                <td class="w-px h-px whitespace-nowrap">
                                                    <div class="px-6 py-2">
                                                        <span class="text-sm text-gray-600 dark:text-gray-400">{{ bucket_value.xvalue|nice_float }}</span>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                                <!-- End Table Section -->
                            </div>
                        </div>
                        <!-- END off-grid panel -->
                    </div>
                </div>
            {% endif %}
        {% endfor %}
    </div>
    <!-- End Grid Section -->
{% endblock content %}