{% load i18n l10n %}

<div class="clearfix">
    <ul class="stats">
        <li>
            <span class="info">{{ call_time|floatformat:"2" }} ms ({% blocktrans count calls|length as num %}{{ num }}
                query{% plural %}{{ num }} queries{% endblocktrans %})</span>
        </li>
    </ul>
</div>

{% if calls %}
    <table>
        <thead>
        <tr>
            <th class="query" colspan="2">{% trans "Function name" %}</th>
            <th class="timeline">{% trans "Timeline" %}</th>
            <th>{% trans "Params" %}</th>
            <th class="time">{% trans "Time (ms)" %}</th>
            <th class="size">{% trans "Size (kb)" %}</th>
        </tr>
        </thead>

        <tbody>
        {% for query in calls %}
            <tr class="djDebugHoverable{% cycle 'djDebugOdd' 'djDebugEven' %}"
                id="apicallMain_{{ forloop.counter }}">
                <td class="toggle">
                    <a class="djToggleSwitch" data-toggle-name="apicallMain" data-toggle-id="{{ forloop.counter }}"
                       data-toggle-open="+" data-toggle-close="-" href="javascript:void(0)">+</a>
                </td>
                <td class="query">
                    {{ query.name|safe }}
                </td>
                <td class="timeline">
                    <div class="djDebugTimeline">
                        <div class="djDebugLineChart{% if query.is_slow %} djDebugLineChartWarning{% endif %}"
                             style="left:{{ query.start_offset|unlocalize }}%;"><strong
                                style="width:{{ query.width_ratio_relative|unlocalize }}%; background-color:{{ query.trace_color }};">
                            {{
                                    query.width_ratio_relative }}%</strong>
                        </div>
                    </div>
                </td>
                <td>
                    {{ query.params }}
                </td>
                <td class="time">
                    {{ query.duration_ms|floatformat:"2" }} мс
                </td>

                <td class="size">
                    {{ query.size|filesizeformat }}
                </td>
            </tr>
            <tr class="djUnselected djDebugHoverable{% cycle 'djDebugOdd' 'djDebugEven' %} djToggleDetails_{{ forloop.counter }}"
                id="sqlDetails_{{ forloop.counter }}">
                <td></td>
                <td colspan="4">
                    <div class="djSQLDetailsDiv">
                        <p><a href="{{ query.url }}">{{ query.url }}</a></p>

                        {% if query.post %}
                            <p>POST data:</p>
                            <pre>{{ query.post }}</pre>
                            <p>POST data JSON:</p>
                            <pre>{{ query.post_json }}</pre>
                        {% endif %}

                        <pre>{{ query.data }}</pre>
                    </div>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
{% else %}
    <p>No api calls was logged</p>
{% endif %}