<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>