{% load i18n l10n %}
<ul>
  {% for alias, info in databases %}
    <li>
      <strong><span class="djdt-color" data-djdt-styles="backgroundColor:rgb({{ info.rgb_color|join:', ' }})"></span> {{ alias }}</strong>
      {{ info.time_spent|floatformat:"3" }} ms ({% blocktrans count info.num_queries as num %}{{ num }} query{% plural %}{{ num }} queries{% endblocktrans %}
      {% if info.duplicate_count %}
        {% blocktrans with dupes=info.duplicate_count trimmed %}
          including <abbr title="Duplicate queries execute the same MQL operation and parameters.">{{ dupes }} duplicates</abbr>
        {% endblocktrans %}
      {% endif %})
    </li>
  {% endfor %}
</ul>

{% if queries %}
  <table>
    <colgroup>
      <col>
      <col>
      <col>
      <col class="djdt-width-30">
      <col>
      <col>
    </colgroup>
    <thead>
      <tr>
        <th></th>
        <th colspan="2">{% trans "Query" %}</th>
        <th>{% trans "Timeline" %}</th>
        <th>{% trans "Time" %}</th>
        <th>{% trans "Action" %}</th>
      </tr>
    </thead>
    <tbody>
      {% for query in queries %}
        <tr class="{% if query.is_slow %} djDebugRowWarning{% endif %}" id="sqlMain_{{ forloop.counter }}">
          <td><span class="djdt-color" data-djdt-styles="backgroundColor:rgb({{ query.rgb_color|join:', '}})"></span></td>
          <td class="djdt-toggle">
            <button type="button" class="djToggleSwitch" data-toggle-name="sqlMain" data-toggle-id="{{ forloop.counter }}">+</button>
          </td>
          <td>
            <div class="djDebugSql">{{ query.mql }}</div>
            {% if query.duplicate_count %}
              <strong>
                <span class="djdt-color" data-djdt-styles="backgroundColor:{{ query.duplicate_color }}"></span>
                {% blocktrans with dupes=query.duplicate_count %}Duplicated {{ dupes }} times.{% endblocktrans %}
              </strong>
            {% endif %}
          </td>
          <td>
            <svg class="djDebugLineChart{% if query.is_slow %} djDebugLineChartWarning{% endif %}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 5" preserveAspectRatio="none" aria-label="{{ query.width_ratio }}%">
              <rect x="{{ query.start_offset|unlocalize }}" y="0" height="5" width="{{ query.width_ratio|unlocalize }}" fill="{{ query.trace_color }}" />
            </svg>
          </td>
          <td class="djdt-time">{{ query.duration|floatformat:"3" }}&nbsp;ms</td>
          <td class="djdt-actions">
            {% if query.params %}
              {% if query.is_query %}
                <form method="post">
                  {{ query.form.as_div }}
                  <button formaction="{% url 'djdt:mql_query' %}" class="remoteCall">Query</button>
                  <button formaction="{% url 'djdt:mql_explain' %}" class="remoteCall">Explain</button>
                </form>
              {% endif %}
            {% endif %}
          </td>
        </tr>
        <tr class="djUnselected {% if query.is_slow %} djDebugRowWarning{% endif %} djToggleDetails_{{ forloop.counter }}" id="sqlDetails_{{ forloop.counter }}">
          <td colspan="2"></td>
          <td colspan="5">
            <div class="djSQLDetailsDiv">
              <p><strong>{% trans "Connection:" %}</strong> {{ query.alias }}</p>
              {% if query.template_info %}
                <p><strong>Template info:<strong/></p>
                  <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 %}
              <p><strong>Stacktrace:<strong/></p>
                {% if query.stacktrace %}
                <pre class="djdt-stack">{{ query.stacktrace }}</pre>
                {% endif %}
              </div>
            </td>
          </tr>
      {% endfor %}
    </tbody>
  </table>
{% else %}
  <p>{% trans "No MQL queries were recorded during this request." %}</p>
{% endif %}