{# This template is used to display detailed view data, when the QueryProfilerType is QUERY #}

<!DOCTYPE html>
<html lang="en">
    {% load number_formatter %}

    <head>
        <title>Query Profiled Data</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

        <link rel="stylesheet"
              href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
        <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>
    </head>
    <body>

        <div class="container-fluid">
            <h2>Summary of the API</h2>

            <table class="table table-striped table-dark table-bordered">
                <thead>
                    <tr>
                        <th></th>
                        <th>Queries</th>
                        <th>Database time spent</th>
                        <th>Database rows fetched</th>
                        <th>Exact query duplicates</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>Total</th>
                        <th>{{ summary.total_query_count|commafy }}</th>
                        <th>{{ summary.total_query_execution_time_in_micros|commafy }} μs</th>
                        <th>{{ summary.total_db_row_count|commafy }}</th>
                        <th>{{ summary.exact_query_duplicates|commafy }}</th>
                    </tr>
                </tbody>
            </table>
        </div>


        <div class="container-fluid">
            <h2>Api Details by query</h2>

            <div class="panel-group">
                <div class="panel panel-default">

                    <div class="panel-heading container-fluid bg-3">
                        <h3 class="panel-title">
                            <div class="col-sm-4">
                                <strong><em>Number of queries</em></strong>
                            </div>
                            <div class="col-sm-4">
                                <strong><em>Query time</em></strong>
                            </div>
                            <div class="col-sm-4">
                                <strong><em>Database rows</em></strong>
                            </div>
                        </h3>
                    </div>


                    {%  for query_signature, query_signature_statistics in query_signature_to_statistics.items %}
                        <div class="panel-heading container-fluid bg-3">
                            <h4 class="panel-title">

                                <!-- Sql frequency -->
                                <div class="col-sm-4">
                                    <a data-toggle="collapse" href="#{{ forloop.counter0 }}">
                                        <span style="border-bottom: 1px solid;">
                                            {{ query_signature_statistics.frequency|commafy }}
                                        </span>
                                    </a>
                                </div>

                                <!-- Sql TIME -->
                                <div class="col-sm-4">
                                    <span class="badge">
                                        {{ query_signature_statistics.query_execution_time_in_micros|commafy }} ms
                                    </span>
                                </div>

                                <!-- Db rows fetched -->
                                <div class="col-sm-4">
                                    <span class="badge">
                                        {{ query_signature_statistics.db_row_count|commafy }}
                                    </span>
                                </div>
                            </h4>
                        </div>

                        <!-- Query and StackTrace expandable part -->
                        <div id="{{ forloop.counter0 }}" class="panel-collapse collapse">
                            <pre><code class="sql" style="font-family:monospace;">{{ query_signature.query_without_params }}</code></pre>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

    </body>
</html>
