<div class="page-header">
    <h3>Query overview</h3>
</div>
<form method="post">
<div class="row">
    <div class="col-md-6">
        <table >
            <tr>
                <th style="padding: 2px"># Queries:</th>
                <td style="padding: 2px">${count}</td>
            </tr>
            <tr>
                <th style="padding: 2px">Time span:</th>
                <td style="padding: 2px">${deltaTime} (${fromTime} - ${toTime})</td>
            </tr>
            <tr>
                <th style="padding: 2px">Avg. time/query:</th>
                <td style="padding: 2px">${avgTime}</td>
            </tr>
        </table>
    </div>

    <div class="col-md-6 pull-right">
        <input type="submit" name="action" value="Clear queries" class="btn btn-danger" />
    </div>
</div>
</form>

<div class="row">&nbsp;</div>

<ul class="nav nav-pills">
    <li ${if(sortTotalTime)}class="active"${/if}><a href="/queries/total">Total time</a></li>
    <li ${if(sortAvgTime)}class="active"${/if}><a href="/queries/average">Avg. time</a></li>
    <li ${if(sortTotalCalls)}class="active"${/if}><a href="/queries/calls"># Calls</a></li>
    <li ${if(sortLast100)}class="active"${/if}><a href="/queries/last100">Last 100</a></li>
</ul>

<div class="row">&nbsp;</div>

<table class="table table-condensed table-striped " id="overview">
    <thead>
    <tr>
        <th> </th>
        ${if(sortLast100)}
        <th>Timestamp</th>
        <th>Thread</th>
        <th>Duration (ms)</th>
        ${else}
        <th>Total time (ms)</th>
        <th>Avg. time (ms)</th>
        <th># Calls</th>
        ${/if}
        <th>Sql</th>
        ${if(sortLast100)}
        <th>Parameters</th>
        ${/if}
    </tr>
    </thead>
    <tbody>
    ${each(queries as q)}
    <tr>
        <td><a href="/query/${q.hash}"><span class="glyphicon glyphicon-zoom-in"></span></a></td>
        ${if(sortLast100)}
        <td>${q.formattedTimestamp}</td>
        <td>${q.threadId}</td>
        <td>${q.formattedNano}</td>
        ${else}
        <td>${q.total}</td>
        <td>${q.formattedNano}</td>
        <td>${q.count}</td>
        ${/if}
        <td><pre><code class="sql">${!q.sql}</code></pre></td>
        ${if(sortLast100)}
        <td><pre>${q.parameters}</pre></td>
        ${/if}
    </tr>
    ${/each}
    </tbody>
</table>