{% extends "silk/base/base.html" %}
{% load silk_assets %}
{% load silk_filters %}
{% load silk_inclusion %}

{% block pagetitle %}Silky - SQL query{% endblock %}

{% block style %}
    <link rel="stylesheet" href="{% silk_asset 'silk/lib/highlight/silk-theme.css' %}"/>
{% endblock %}

{% block js %}
    <script src="{% silk_asset 'silk/lib/highlight/highlight.pack.js' %}" defer></script>
    <script src="{% silk_asset 'silk/js/pages/request.js' %}" defer></script>
{% endblock %}

{% block menu %}
<nav class="subtabs" aria-label="SQL query">
    <a class="subtab subtab--back" 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 %}{% else %}{% url 'silk:sql' %}{% endif %}" title="Back to the queries" aria-label="Back to the queries"><svg class="silk-icon silk-icon--sm" aria-hidden="true"><use href="#i-chevron-left"></use></svg></a>
    <span class="subtab" aria-current="page">Query</span>
</nav>
{% endblock %}

{% block data %}
<div class="rd-overview">
    <div class="req-head">
        <div>
            <h1><span class="sqltype t-{{ sql_query.query|sql_type }}">{{ sql_query.query|sql_type }}</span> {{ sql_query.tables_involved|join:", "|default:"query" }}</h1>
            <p class="sub">{% if silk_request %}In <a href="{% url 'silk:request_detail' request_id=silk_request.pk %}">{{ silk_request.method }} {{ silk_request.path }}</a>, {% endif %}{% if offset_ms is not None and offset_ms >= 0 %}started {{ offset_ms|dur }} into the request.{% else %}recorded {{ sql_query.start_time|silk_date_time }}.{% endif %}</p>
        </div>
        {% if sql_query.pattern_hash %}<a class="btn" href="{% url 'silk:sql' %}?p={{ sql_query.pattern_hash }}">This pattern across requests</a>{% endif %}
    </div>

    <div class="kpis">
        <div class="kpi"><span>Time</span><b>{{ sql_query.time_taken|dur }}</b></div>
        <div class="kpi"><span>Joins</span><b>{{ sql_query.num_joins }}</b></div>
        <div class="kpi"><span>Tables</span><b>{{ sql_query.tables_involved|length }}</b></div>
        <div class="kpi"><span>App frames</span><b>{{ app_frames }}</b></div>
    </div>

    {% include 'silk/inclusion/code_block.html' with title='Query' id='q-sql' text=sql_query.formatted_query lang='sql' %}
    {% if analysis %}{% include 'silk/inclusion/code_block.html' with title='Query plan' id='q-plan' text=analysis %}{% endif %}

    <section class="card codeblock">
        <div class="codeblock__head"><h2>Traceback</h2><span class="muted small">innermost call first · your code is highlighted, library frames are muted</span></div>
        <div class="frames">
            {% for f in frames %}
            <div class="tb{% if f.app %} tb--app{% endif %}{% if f.is_top %} is-top{% endif %}">
                <div class="tb__loc">
                    {% if f.app %}<a class="tb__file" data-editor-file="{{ f.file }}" data-editor-line="{{ f.line }}" href="vscode://file{{ f.file }}:{{ f.line }}" title="Open in editor">{{ f.file|app_path }}:{{ f.line }}</a>{% else %}<span class="tb__file">{{ f.file|app_path }}:{{ f.line }}</span>{% endif %}
                    <em>{{ f.func }}</em>
                    {% if f.is_top %}<span class="flag">ran the query</span>{% endif %}
                    <a class="tb__src" href="?pos={{ f.pos }}&amp;file_path={{ f.file|urlencode }}&amp;line_num={{ f.line }}#f{{ f.pos }}" id="f{{ f.pos }}">source</a>
                </div>
                {% if f.code %}<code class="tb__code">{{ f.code }}</code>{% endif %}
                {% if f.pos == pos and code %}{% code code actual_line %}{% endif %}
            </div>
            {% endfor %}
        </div>
    </section>
</div>
{% endblock %}