<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    {% tailwind_css %}
</head>
<body>

    <div class="px-6 py-4">
        <div class="flex items-center justify-between">
            <h2 class="text-xl font-medium">Query stats for {{ request.path }}</h2>
            <div class="flex items-center">
                <div class="pt-1">
                    {{ querystats.summary }}
                </div>

                <form action="." method="get">
                    <input type="hidden" name="querystats" value="store">
                    <button type="submit" class="flex items-center px-3 py-2 ml-4 text-sm rounded-full bg-zinc-600 hover:bg-zinc-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 mr-2" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>
                        reload
                    </button>
                </form>
            </div>
        </div>
        {#
        <div class="mt-2 font-mono text-xs">
            {{ querystats_resolver_match }}
            and template {{ querystats_template_name }}
        </div>
        #}

        <div class="flex w-full mt-5 overflow-auto rounded-sm">
            {% for query in querystats.queries %}
            <a href="#query-{{ loop.index }}"
                {{ loop.cycle('class=\"h-4 bg-amber-400\"', 'class="h-4 bg-amber-500"', 'class="h-4 bg-amber-600"')|safe }}
                title="[{{ query.duration_display }}] {{ query.sql_display }}"
                style="width: {{ query.duration / querystats.total_time * 100 }}%">
            </a>
            {% endfor %}
        </div>

        <div class="mt-4 space-y-4 text-sm">
            {% for query in querystats.queries %}
            <div id="query-{{ loop.index }}" class="p-2 rounded bg-zinc-800">
                <div class="float-right px-2 py-px mb-px ml-2 text-xs rounded-full bg-zinc-700">
                    <span>{{ query.duration_display }}</span>
                    {% if query.duplicate_count is defined %}
                    <span class="text-red-500">&nbsp; duplicated {{ query.duplicate_count }} times</span>
                    {% endif %}

                    {#
                    <div>many {{ query.many }}</div>
                    <div>result {{ query.result }}</div>
                    #}
                </div>
                <div>
                    <pre><code class="font-mono whitespace-pre-wrap text-zinc-100">{{ query.sql_display }}</code></pre>
                </div>
                <div class="mt-3 text-zinc-400">
                    <span class="font-medium">Parameters</span>
                    <pre><code class="font-mono">{{ query.params|pprint }}</code></pre>
                </div>
                <details class="mt-3">
                    <summary>Traceback</summary>
                    <pre><code class="block overflow-x-auto font-mono text-xs">{{ query.tb }}</code></pre>
                </details>
            </div>
            {% else %}
            <div>No queries...</div>
            {% endfor %}
        </div>
    </div>

</body>
</html>
