<table id="sql-table" class="table table-striped table-condensed">
    <thead>
        <tr>
            <th class="table-col-index">#</th>
            <th class="table-col-time">Time (ms)</th>
            <th class="table-col-sql">SQL</th>
            <th class="table-col-rollback">Rollback?</th>
            <th class="table-col-from-rql">From RQL</th>
            <th class="table-col-stack">Stack</th>
        </tr>
    </thead>
    <tbody>
        % for i, query in enumerate(sql_queries):
            <tr>
                <th class="table-col-index">${1 + i}</th>
                <td class="table-col-time">${'%.2f' % query["time"]}</td>
                <td class="table-col-sql">${highlight(query["sql"], "SQL") | n}<br>${highlight(query["args"], "python3") | n}</td>
                <td class="table-col-rollback">${query["rollback"]}</td>
                <td class="table-col-from-rql">
                    % if query["from_rql_query"]:
                        ${highlight(query["from_rql_query"]["rql"], "rql") | n}
                    % else:
                        <i>standalone query</i>
                    % endif
                </td>
                <td class="table-col-stack">
                    <button class="btn btn-default" id="sql-toggle-stack-${i}" onclick="javascript:toggle_sql_stack(${i})">show stack</a>
                </td>
            </tr>
            <tr style="display: none" id="sql-stack-${i}">
                <td colspan="6">
                    <pre>${highlight(query["callstack"], "py3tb", linenos="inline") | n}</pre>
                </td>
            </tr>
            <tr style="display: none"></tr> <!-- css hack because of previous hidden tr for -stripped -->
        % endfor
    </tbody>
</table>

<script type="text/javascript" charset="utf-stack">
    function toggle_sql_stack(stack_id) {
        var stack = document.getElementById("sql-stack-" + stack_id);
        var button = document.getElementById("sql-toggle-stack-" + stack_id);

        // stack is hidden, display it
        if (stack.style.getPropertyValue("display") == "none") {
            stack.style.setProperty("display", "table-row");
            button.innerHTML = "hide stack"
        } else {
            stack.style.setProperty("display", "none");
            button.innerHTML = "show stack"
        }
    }
</script>

<style>
#sql-table {
    table-layout: fixed;
}

#sql-table .table-col-index {
    text-align: right;
    width: 30px;
}

#sql-table .table-col-time {
    white-space: nowrap;
    width: 73px;
    text-align: center;
}

#sql-table .table-col-rollback {
    white-space: nowrap;
    width: 73px;
    text-align: center;
}

#sql-table .table-col-stack {
    padding: 8px;
    width: 110px;
    text-align: center;
}

${generate_css() | n}

.highlight > pre {
    word-break: unset;
    border: none;
    margin: 0;
    padding: 0;
    background-color: unset;
}
</style>