--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cubicweb/pyramid/debug_toolbar_templates/sql.dbtmako	Thu Nov 14 01:01:00 2019 +0100
@@ -0,0 +1,93 @@
+<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>