{% 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 id="elasticShowBody" class="djTemplateShowContextDiv">
                <a class="elasticShowTemplate">
                    <span id="jsonBodyToggle" class="toggleArrow">▶</span> Show Json Body
                </a>
            </div>
            <div id="jsonBodySelectText" class="djTemplateHideContextDiv" style="display: none;" onClick="selectText('jsonBody')">
                <a class="selectText">(Select All Json for ctrl + c)</a>
            </div>
        </dd>

        <dd>
            <div id="jsonBody" class="djTemplateHideContextDiv" style="display: none;">
                <code class="json_code" contenteditable="true" >{{record.body}}</code>
            </div>
        </dd>

        <dd>
            <div id="elasticShowResponse" class="djTemplateShowContextDiv">
                <a class="elasticShowTemplate">
                    <span id="jsonResponseToggle" class="toggleArrow">▶</span> Show Json Response
                </a>
            </div>
            <div id="jsonResponseSelectText" class="djTemplateHideContextDiv" style="display: none;" onClick="selectText('jsonBody2')">
                <a class="selectText">(Select All Json for ctrl + c)</a>
            </div>
        </dd>

        <dd>
            <div id="jsonBody2" class="djTemplateHideContextDiv" style="display: none;">
                <code class="json_code" contenteditable="true" >{{record.response}}</code>
            </div>
        </dd>

        </dt>
    {% endfor %}
    </dl>
<script type="text/javascript">
    function selectText(containerId) {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(containerId));
            range.select();
        } else if (window.getSelection) {
                var selection = window.getSelection ();
                var rangeToSelect = document.createRange ();
                rangeToSelect.selectNodeContents (document.getElementById(containerId));

                selection.removeAllRanges ();
                selection.addRange (rangeToSelect);
        }
    }
       var uarr = String.fromCharCode(0x25b6),
           darr = String.fromCharCode(0x25bc);

        var showResponseTemplate = document.getElementById('elasticShowResponse');
        showResponseTemplate.addEventListener('click', function() {
            var showJSONResponse = document.getElementById('jsonBody2');
            var showJSONResponseSelectText = document.getElementById('jsonResponseSelectText');
            var showJSONResponseToggle = document.getElementById('jsonResponseToggle');

            showJSONResponseToggle.innerHTML = showJSONResponseToggle.innerHTML == uarr ? darr : uarr;

            showJSONResponse.style.display = showJSONResponse.style.display == "none" ? "block" : "none";
            showJSONResponseSelectText.style.display = showJSONResponseSelectText.style.display == "none" ? "block" : "none";
        }, false);

        var showBodyTemplate = document.getElementById('elasticShowBody');
        showBodyTemplate.addEventListener('click', function() {
            var showJSONBody = document.getElementById('jsonBody');
            var showJSONBodySelectText = document.getElementById('jsonBodySelectText');
            var showJSONBodyToggle = document.getElementById('jsonBodyToggle');

            showJSONBodyToggle.innerHTML = showJSONBodyToggle.innerHTML == uarr ? darr : uarr;
            showJSONBody.style.display = showJSONBody.style.display == "none" ? "block" : "none";
            showJSONBodySelectText.style.display = showJSONBodySelectText.style.display == "none" ? "block" : "none";
        }, false);
</script>

{% 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 %}
