{% load i18n %}
<div id="RequestHistoryPanelContent">

    <script type="text/javascript">
        function djdtClearPanels() {
            djdt.jQuery('.djDebugPanelContent .djdt-scroll').html('');
            djdt.jQuery('.djDebugPanelContent .scroll').html('');
        }

        function djdtLoadToolbar(id) {
            djdt.jQuery('#djDebug').data('store-id', id);
            djdt.jQuery('.djdt-panelContent').hide();
            djdt.jQuery('.panelContent').hide();

            for (i = 0; i < djdtSidebarContent[id].length; i++) {
                var panel = djdtSidebarContent[id][i];
                djdt.jQuery('.' + panel['panel_id']).html(panel['nav_title'] +
                    '<br /><small>' + panel['nav_subtitle'] + '</small>');
            }
            djdtClearPanels();
        }

        function djdtEmptyHistoryPanel() {
            djdt.jQuery('.RequestHistoryPanel').off( "click", djdtEmptyHistoryPanel);
            djdt.jQuery('#RequestHistoryPanelContent').parent().html('');
        }

        var djdtSidebarContent = {
            {% for id, toolbar in toolbars.items %}
                "{{ id }}": [
                    {% for dummy, panel in toolbar.content.items %}
                        {
                            "panel_id": "{{ panel.panel_id }}",
                            "nav_title": "{{ panel.nav_title|escapejs }}",
                            "nav_subtitle": "{{ panel.nav_subtitle|escapejs }}"
                        },
                    {% endfor %}
                ],
            {% endfor %}
        };

        function djdtTogglePost() {
            var button = djdt.jQuery(this);
            if (button.siblings().css('white-space') == 'pre') {
                button.html('+');
                button.siblings().css({'white-space': 'nowrap'});
            } else {
                button.html('-');
                button.siblings().css({'white-space': 'pre'});
            }
        }

        djdt.jQuery( document ).ready(function() {
            djdt.jQuery('.RequestHistoryPanel').on("click", djdtEmptyHistoryPanel);
            djdt.jQuery('.djdtTogglePost').on("click", djdtTogglePost);
        });
    </script>

    <div style="position: absolute;top: 0px;left: 10px;right: 10px;bottom: 20px;overflow-x: scroll;">
        <table style="max-height:100%;">
            <thead>
                <tr>
                    <th>#</th>
                    <th>{% trans "Time" %}</th>
                    <th>{% trans "Path" %}</th>
                    <th>{% trans "Post Variables" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for id, toolbar in toolbars.items %}
                    <tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
                        <td onclick="djdtLoadToolbar('{{ id }}');" style="cursor: pointer;">{{forloop.counter}}</td>
                    <td onclick="djdtLoadToolbar('{{ id }}');" style="cursor: pointer;">
                            {{ toolbar.toolbar.stats.RequestHistoryPanel.time|escape }}
                        </td>
                        <td onclick="djdtLoadToolbar('{{ id }}');" style="cursor: pointer;">
                            <p>{{ toolbar.toolbar.stats.RequestHistoryPanel.request_url|escape }}</p>
                        </td>
                        <td style="white-space: nowrap;">
                            <a class="djToggleSwitch djdtTogglePost" href="#">+</a>
                            {% if trunc_length %}
                                <span style="white-space: nowrap;">{{ toolbar.toolbar.stats.RequestHistoryPanel.post|truncatechars:trunc_length|escape }}</span>
                            {% else %}
                                <span style="white-space: nowrap;">{{ toolbar.toolbar.stats.RequestHistoryPanel.post|escape }}</span>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>