<table id="rql-table" class="pDebugSortable table table-striped table-condensed">
    <thead>
        <tr>
            <th class="table-col-1">#</th>
            <th class="table-col-2">Time (ms)</th>
            <th class="table-col-3">RQL</th>
            <th class="table-col-5">Result</th>
            <th class="table-col-6">SQL</th>
            <th class="table-col-7">Description</th>
            <th class="table-col-8">Stack</th>
        </tr>
    </thead>
    <tbody>
        % for i, query in enumerate(rql_queries):
            <tr>
                <th class="table-col-1">${1 + i}</th>
                <td class="table-col-2">${'%.2f' % query["time"]}</td>
                <td class="table-col-3">${highlight(query["rql"], "RQL") | n}<br>${highlight(query["args"], "python3") | n}</td>
                % if len(str(query["result"])) > 50:
                <td id="result-${i}" class="table-col-5">
                    <span id="result-${i}-short">
                    ${highlight(str(query["result"])[:50], "python3") | n}...
                    <a title="display more" href="javascript:show_result(${i})"><span class="badge progress-bar-default">+</span></a>
                    </span>
                    <span id="result-${i}-long" style="display: none">
                    ${highlight(query["result"], "python3") | n}
                    <a title="display less" href="javascript:hide_result(${i})"><span class="badge progress-bar-warning">←</span></a>
                    </span>
                </td>
                % else:
                <td class="table-col-5">${highlight(query["result"], "python3") | n}</td>
                % endif
                <td>
                    % for sql in query["generated_sql_queries"]:
                    <div class="well" style="padding: 3px">
                        ${highlight(sql['sql'], "SQL") | n}
                        <br>
                        ${highlight(sql['args'], "python3") | n}
                    </div>
                    % endfor
                </td>
                <td class="table-col-7">${highlight(query["description"], "python3") | n}</td>
                <td class="table-col-8">
                    <a class="btn btn-default" id="show-stack-${i}" href="javascript:show_stack(${i})">show stack</a>
                    <a class="btn btn-default" id="hide-stack-${i}" href="javascript:hide_stack(${i})" style="display: none">hide stack</a>
                </td>
            </tr>
            <tr style="display: none" id="stack-${i}">
                <td colspan="7">
                    <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-8">
    function show_result(result_id) {
        element = document.querySelector("#result-" + result_id + "-long");
        element.style.setProperty("display", "inline");

        element = document.querySelector("#result-" + result_id + "-short");
        element.style.setProperty("display", "none");
    }

    function hide_result(result_id) {
        element = document.querySelector("#result-" + result_id + "-short");
        element.style.setProperty("display", "inline");

        element = document.querySelector("#result-" + result_id + "-long");
        element.style.setProperty("display", "none");
    }

    function show_stack(stack_id) {
        element = document.querySelector("#stack-" + stack_id);
        element.style.setProperty("display", "table-row");

        element = document.querySelector("#show-stack-" + stack_id);
        element.style.setProperty("display", "none");

        element = document.querySelector("#hide-stack-" + stack_id);
        element.style.setProperty("display", "inline");
    }

    function hide_stack(stack_id) {
        element = document.querySelector("#stack-" + stack_id);
        element.style.setProperty("display", "none");

        element = document.querySelector("#show-stack-" + stack_id);
        element.style.setProperty("display", "inline");

        element = document.querySelector("#hide-stack-" + stack_id);
        element.style.setProperty("display", "none");
    }
</script>

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

#rql-table .table-col-1 {
    text-align: right;
    width: 30px;
}

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

#rql-table .table-col-8 {
    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>