{% load i18n l10n %}{% load static from staticfiles %}
<div class="djdt-clearfix">
    <ul class="djdt-stats">
        {% for alias, info in databases %}
            <li>
                <strong class="djdt-label">
                    <span data-background-color="rgb({{ info.rgb_color|join:', ' }})"
                          class="djdt-color">&#160;</span>
                    {{ alias }}
                </strong>
                <span class="djdt-info">
                    {{ info.time_spent|floatformat:"2" }} ms
                    ({% blocktrans count info.num_queries as num %}{{ num }} query{% plural %}{{ num }} queries{% endblocktrans %}
                    {% if info.duplicate_count %}
                        {% blocktrans with dupes=info.duplicate_count %}including {{ dupes }} duplicates{% endblocktrans %}
                    {% endif %})
                </span>
            </li>
        {% endfor %}
    </ul>
</div>

{% if queries %}
    <table>
        <thead>
            <tr>
                <th class="djdt-color">&#160;</th>
                <th class="djdt-query" colspan="2">{% trans "Query" %}</th>
                <th class="djdt-timeline">{% trans "Timeline" %}</th>
                <th class="djdt-time">{% trans "Time (ms)" %}</th>
                <th class="djdt-actions">{% trans "Action" %}</th>
            </tr>
        </thead>
        <tbody>
            {% for query in queries %}
                <tr class="djDebugHoverable {% cycle 'djDebugOdd' 'djDebugEven' %}{% if query.is_slow %} djDebugRowWarning{% endif %}"
                    id="sqlMain_{{ forloop.counter }}">
                    <td class="djdt-color">
                        <span data-background-color="rgb({{ query.rgb_color|join:', ' }})">&#160;</span>
                    </td>
                    <td class="djdt-toggle">
                        <a class="djToggleSwitch" data-toggle-name="sqlMain" data-toggle-id="{{ forloop.counter }}" data-toggle-open="+" data-toggle-close="-" href="">+</a>
                    </td>
                    <td class="djdt-query">
                        <div class="djDebugSqlWrap">
                            <div class="djDebugSql">{{ query.sql|safe }}</div>
                        </div>
                        {% if query.duplicate_count %}
                            <strong>
                                <span data-background-color="{{ query.duplicate_color }}">&#160;</span>
                                {% blocktrans with dupes=query.duplicate_count %}Duplicated {{ dupes }} times.{% endblocktrans %}
                            </strong>
                        {% endif %}
                    </td>
                    <td class="djdt-timeline">
                        <div class="djDebugTimeline">
                            <div class="djDebugLineChart{% if query.is_slow %} djDebugLineChartWarning{% endif %}"
                                 data-left="{{ query.start_offset|unlocalize }}%">
                                <strong data-width="{{ query.width_ratio_relative|unlocalize }}%"
                                        data-background-color="{{ query.trace_color }}">
                                    {{ query.width_ratio }}%
                                </strong>
                            </div>
                        </div>
                    </td>
                    <td class="djdt-time">
                        {{ query.duration|floatformat:"2" }}
                    </td>
                    <td class="djdt-actions">
                        {% if query.params %}
                            <form method="post">
                                {{ query.form }}

                                {% if query.is_select %}
                                    <button formaction="{% url 'djdt:sql_alchemy_select' %}"
                                            class="remoteCall">
                                        Sel
                                    </button>
                                    <button formaction="{% url 'djdt:sql_alchemy_explain' %}"
                                            class="remoteCall">
                                        Expl
                                    </button>
                                {% endif %}
                            </form>
                        {% endif %}
                    </td>
                </tr>
                <tr class="djUnselected djDebugHoverable {% cycle 'djDebugOdd' 'djDebugEven' %}{% if query.is_slow %} djDebugRowWarning{% endif %} djToggleDetails_{{ forloop.counter }}"
                    id="sqlDetails_{{ forloop.counter }}">
                    <td colspan="2"></td>
                    <td colspan="4">
                        <div class="djSQLDetailsDiv">
                            <p>
                                <strong>{% trans "Connection:" %}</strong> {{ query.alias }}
                            </p>
                            {% if query.params and query.params != '[]' %}
                                <pre class="djdt-params">{{ query.params|safe }}</pre>
                            {% endif %}
                            {% if query.stacktrace %}
                                <pre class="djdt-stack">{{ query.stacktrace }}</pre>
                            {% endif %}
                            {% if query.template_info %}
                                <table>
                                    {% for line in query.template_info.context %}
                                        <tr>
                                            <td>{{ line.num }}</td>
                                            <td>
                                                <code {% if line.highlight %}class="djdt-highlighted"{% endif %}>
                                                    {{ line.content }}
                                                </code>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </table>
                                <p>
                                    <strong>{{ query.template_info.name|default:_("(unknown)") }}</strong>
                                </p>
                            {% endif %}
                        </div>
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
{% else %}
    <p>{% trans "No SQL queries were recorded during this request." %}</p>
{% endif %}

<script src="{% static 'debug_toolbar/js/toolbar.sql.js' %}"></script>

<!-- Necessary for explains to render well -->
<style type="text/css">
    .djSqlExplain tbody * {
        font-family: monospace !important;
    }
</style>