{% load silk_filters %}
{# Request overview (KPIs, usual line, likely fix, slowest queries): shared by the full page and the side panel. #}
    {% with sc=silk_request.response.status_code ins=insights %}

    <section class="rd-overview" aria-label="Overview">
        <div class="kpis">
            <div class="kpi"><span>Total time</span><b>{{ silk_request.time_taken|dur }}</b></div>
            <div class="kpi"><span>DB time</span><b>{{ ins.db_ms|dur }}</b></div>
            <div class="kpi"><span>Queries</span><b>{{ silk_request.num_sql_queries }}</b></div>
            <div class="kpi"><span>Repeated</span><b>{{ ins.repeat_queries }}</b></div>
        </div>
        {% if silk_request.time_taken %}
        <div class="split">
            <div class="split__bar"><i style="width:{{ ins.sql_pct|floatformat:'0' }}%;background:var(--bar-sql)"></i><i style="flex:1;background:var(--bar-py)"></i></div>
            <div class="split__legend"><span style="--c:var(--bar-sql)">SQL {{ ins.sql_pct|floatformat:"0" }}%</span><span style="--c:var(--bar-py)">Python and other</span></div>
        </div>
        {% endif %}
        {% if ins.usual %}
        <p class="usualline">Usual for <code>{{ ins.usual.endpoint }}</code>: {{ ins.usual.ms|dur }}, {{ ins.usual.queries|floatformat:"0" }} queries
            <span class="muted">(median of {{ ins.usual.n }} requests)</span>
            {% if ins.usual.slower_x %}<b class="usual">{{ ins.usual.slower_x|floatformat:"1" }}× slower</b>{% endif %}
            {% if ins.usual.extra_queries %}<b class="usual">+{{ ins.usual.extra_queries|floatformat:"0" }} queries</b>{% endif %}
        </p>
        {% endif %}

        {% if ins.repeated %}{% with g=ins.repeated.0 %}
        <div class="alert alert--warn" role="status">
            <span><b>{% if g.kind == 'dup' %}Duplicate query:{% else %}Possible N+1:{% endif %}</b>
            {% if g.kind == 'dup' %}identical query ran{% else %}the same query shape ran{% endif %} {{ g.count }} times ({{ g.total_ms|dur }} total){% if ins.repeated|length > 1 %}, plus {{ ins.repeated|length|add:"-1" }} more repeated pattern(s){% endif %}.</span>
            <a class="alert__link" href="{% url 'silk:request_sql' request_id=silk_request.pk %}">Show in SQL</a>
        </div>
        <div class="fix">
            <div class="fix__head"><b>Likely fix</b>
                {% if g.frame %}<a class="fix__loc" data-editor-file="{{ g.frame.file }}" data-editor-line="{{ g.frame.line }}" href="vscode://file{{ g.frame.file }}:{{ g.frame.line }}" title="Open in editor"><svg class="silk-icon silk-icon--sm" aria-hidden="true"><use href="#i-code"></use></svg>{{ g.frame.file|app_path }}:{{ g.frame.line }}</a>{% endif %}
            </div>
            {% if g.frame.code %}<code class="fix__line">{{ g.frame.code }}</code>{% endif %}
            <p>{{ g.fix.text }}</p>
            <div class="fix__code"><pre id="copy-fix">{{ g.fix.code }}</pre>
                <button class="btn btn--sm" type="button" data-copy-from="#copy-fix" data-copy-label="Fix copied"><svg class="silk-icon silk-icon--sm" aria-hidden="true"><use href="#i-copy"></use></svg>Copy</button></div>
        </div>
        {% endwith %}{% endif %}

        {% if ins.slowest %}
        <h2 class="h3">Slowest queries</h2>
        <div class="wf">
            {% for item in ins.slowest %}
            <a class="wf__row" href="{% url 'silk:request_sql_detail' request_id=silk_request.pk sql_id=item.query.pk %}">
                <span class="wf__sql">{{ item.query.query|truncatechars:160 }}</span>
                <span class="wf__track"><i style="width:{{ item.pct|floatformat:'0' }}%"></i></span>
                <span class="wf__ms">{{ item.query.time_taken|dur }}</span>
            </a>
            {% endfor %}
        </div>
        {% endif %}
    </section>
    {% endwith %}