{% load i18n %}

{#<h4>{% trans 'Queries' %}</h4>#}
{% if records %}
    <dl>
    {% for record in records %}
        <dt>
        {{index}} {{ record.method }} {{record.status_code}} {{record.path}}
        </dt>
        <dd>time: {{record.duration}} ms</dd>
        <dd>full_url: {{record.full_url}}</dd>
        <dd>
            <div class="djTemplateShowContextDiv">
                <a class="elasticShowTemplate">
                <span class="toggleArrow">▶</span> Show Json Body</a>
            </div>
            <div class="djTemplateHideContextDiv" style="display: none;">
                <code>{{record.body}}</code>
            </div>
        </dd>
        <dd>
            <div class="djTemplateShowContextDiv">
                <a class="elasticShowTemplate">
                <span class="toggleArrow">▶</span> Show Json Response</a>
            </div>
            <div class="djTemplateHideContextDiv" style="display: none;">
                <code>{{record.response}}</code>
            </div>
        </dd>
        </dt>
    {% endfor %}
    </dl>
{% else %}
    {% if debug %}
        <p>No Elastic queries were recorded during this request.</p>
    {% else %}
        <p style="padding: 10px 15px;">
            <code style="display: inline;">DEBUG</code> is set to <code style="display: inline;">False</code>. This means
            that Elastic query logging is disabled.
        </p>
    {% endif %}
{% endif %}

<script>
    (function ($) {
        var uarr = String.fromCharCode(0x25b6),
            darr = String.fromCharCode(0x25bc);

        $('a.elasticShowTemplate').on('click', function() {
            var arrow = $(this).children('.toggleArrow');
            arrow.html(arrow.html() == uarr ? darr : uarr);
            $(this).parent().next().toggle();
            return false;
        });
    })(djdt.jQuery);
</script>