{% extends "insights/base.html" %}
{% block content %}
    <!-- Card Section -->
    <div class="max-w-[85rem]">
        <!-- Grid -->
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 sm:gap-6">
            {% for counter in counter_list %}
                <div class="flex flex-col border shadow-sm border-slate-200 dark:border-slate-900 bg-background 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>
            {% endfor %}
            {% for gauge in gauges %}
                <div class="flex flex-col border shadow-sm border-slate-50 bg-background 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>
                            <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>
                        </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 class="flex flex-col justify-center overflow-hidden bg-blue-500"
                                     role="progressbar"
                                     style="width: 25%"
                                     aria-valuenow="{{ gauge.value }}"
                                     aria-valuemin="0"
                                     aria-valuemax="100">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
            <!-- End Card -->
        </div>
        <!-- End Grid -->
    </div>
    <!-- End Card Section -->
{% endblock content %}
