<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>${source_code_url_in_stack(highlight(query["callstack"], "py3tb", linenos="inline"), highlighted=has_pygments) | 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>