{% load i18n %}
<div class="djDebugPanelTitle">
  <h3>{% translate "Query Results" %}</h3>
  <button type="button" class="djDebugClose">»</button>
</div>
<div class="djDebugPanelContent">
  <div class="djdt-scroll">
    <dl>
      <dt>{% translate "Executed MQL" %}</dt>
      <dd><pre style="margin: 0; white-space: pre-wrap; word-wrap: break-word;">{{ mql }}</pre></dd>
      <dt>{% translate "Time" %}</dt>
      <dd>{{ duration|floatformat:"3" }} ms</dd>
      <dt>{% translate "Database" %}</dt>
      <dd>{{ alias }}</dd>
    </dl>

    <h4>{% translate "Query Results" %}</h4>
    <table>
      <thead>
        <tr>
          {% for h in headers %}
            <th>{{ h|upper }}</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for row in result %}
          <tr>
            {% for column in row %}
              <td>
                {% if column.type == "dict" %}
                  <table class="subtable">
                    {% for sub in column.value %}
                      <tr>
                        <th>{{ sub.key }}</th>
                        <td>
                          {% include 'mql_panel/subtype_value.html' %}
                        </td>
                      </tr>
                    {% endfor %}
                  </table>
                {% elif column.type == "list" %}
                  <ul>
                    {% for sub in column.value %}
                      <li>
                        {% include 'mql_panel/subtype_value.html' %}
                      </li>
                    {% endfor %}
                  </ul>
                {% elif column.is_json %}
                  <pre style="margin: 0; padding: 0; border: none; background: none; white-space: pre-wrap; word-wrap: break-word; font-family: inherit;">{{ column.value }}</pre>
                {% else %}
                  {{ column.value }}
                {% endif %}
              </td>
            {% endfor %}
          </tr>
        {% empty %}
          <tr><td colspan="{{ headers|length }}">{% translate "Empty set" %}</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>