{% extends "silk/base/detail_base.html" %}
{% load static %}
{% load silk_filters %}
{% load silk_nav %}
{% load silk_inclusion %}

{% block pagetitle %}Silky - SQL Detail - {{ silk_request.path }}{% endblock %}

{% block js %}
    {{ block.super }}
    <script src="{% static 'silk/js/pages/sql_detail.js' %}"></script>
{% endblock %}

{% block style %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'silk/css/pages/sql_detail.css' %}"/>
{% endblock %}

{% block menu %}
<a href="{% if silk_request and profile %}{% url "silk:request_and_profile_sql" silk_request.id profile.id %}{% elif silk_request %}{% url "silk:request_sql" silk_request.pk %}{% elif profile %}{% url "silk:profile_sql" profile.pk %}{% endif %}">
    <div class="menu-item menu-item--back selectable-menu-item" title="Back to SQL">
        <div class="menu-item-outer">
            <div class="menu-item-inner">
                <i data-lucide="chevron-left" class="silk-icon"></i>
            </div>
        </div>
    </div>
</a>
<div class="menu-item menu-item-selected">
    <div class="menu-item-outer">
        <div class="menu-item-inner">
            <i data-lucide="database" class="silk-icon"></i> SQL Query
        </div>
    </div>
</div>
{% endblock %}

{% block data %}
<div class="silk-detail-page">
<div class="silk-detail-body">

    {# ── Query ── #}
    <section class="silk-section">
        <h3 class="silk-section__heading">
            <i data-lucide="database" class="silk-icon silk-icon--sm"></i> Query
        </h3>
        <pre class="silk-pre"><code class="language-sql">{{ sql_query.formatted_query }}</code></pre>
        <div class="silk-sql-meta">
            <span class="silk-hero__metric">
                <i data-lucide="clock" class="silk-icon silk-icon--sm"></i>
                <span class="silk-num {% if sql_query.time_taken >= 1000 %}silk-num--very-bad{% elif sql_query.time_taken >= 500 %}silk-num--bad{% elif sql_query.time_taken >= 100 %}silk-num--ok{% else %}silk-num--very-good{% endif %}">{{ sql_query.time_taken }}</span><span class="silk-unit">ms</span>
            </span>
            <span class="silk-hero__metric">
                <i data-lucide="git-merge" class="silk-icon silk-icon--sm"></i>
                {{ sql_query.num_joins }} joins
            </span>
        </div>
    </section>

    {# ── Query Plan ── #}
    {% if analysis %}
    <section class="silk-section">
        <h3 class="silk-section__heading">
            <i data-lucide="list-tree" class="silk-icon silk-icon--sm"></i> Query Plan
        </h3>
        <pre class="silk-pre"><code>{{ analysis }}</code></pre>
    </section>
    {% endif %}

    {# ── Traceback ── #}
    <section class="silk-section">
        <h3 class="silk-section__heading">
            <i data-lucide="layers" class="silk-icon silk-icon--sm"></i> Traceback
        </h3>
        <p class="silk-detail-note">Python stack trace leading to this SQL query. Your code is highlighted; library frames are muted.</p>
        <div class="silk-traceback">
            {% for ln in traceback %}
                {% if ln %}
                <div class="silk-traceback__line {% if virtualenv_path not in ln %}silk-traceback__line--app not-third-party{% else %}silk-traceback__line--lib is-third-party{% endif %}">{{ ln }}</div>
                {% if forloop.counter == pos %}{% code code actual_line %}{% endif %}
                {% endif %}
            {% endfor %}
        </div>
    </section>

</div>
</div>
{% endblock %}