<div class="page-header">
    <h3>Query overview</h3>
</div>

<div class="row">
    <div class="span1 ">
        <a onclick="submit('back')" class="btn btn-primary btn-large">Back</a>
    </div>
    <div class="span1 offset10">
        <a onclick="submit('refresh')" class="btn btn-primary btn-large">Refresh</a>
    </div>
</div>

<div class="row">
    <div class="span6">
        <div># Queries: {count}</div>
        <div>Time span: {deltaTime} ({fromTime} - {toTime})</div>
        <div>Avg. time/query: {avgTime}</div>
    </div>
</div>

<div class="hero-unit">
    <p>{sql}</p>
</div>

<ul class="nav nav-pills">
    <li {if(sortTime)}class="active"{endif}><a onclick="submit('sortTime')">Timestamp</a></li>
    <li {if(sortAvgTime)}class="active"{endif}><a onclick="submit('sortAvgTime')">Avg. query time</a></li>
</ul>

<table class="table table-condensed table-striped " id="overview">
    <thead>
    <tr>
        <th></th>
        <th>Timestamp</th>
        <th>Thread id</th>
        <th>Type</th>
        <th>Time (ms)</th>
    </tr>
    </thead>
    <tbody>
    {foreach(queries as q)}
    <tr>
        <td>{if(q.stackTrace)}<a onclick="submit('stacktrace', '{q.timestamp}')"><i class=" icon-zoom-in"></i></a>{endif}</td>
        <td>{q.formattedTimestamp}</td>
        <td>{q.threadId}</td>
        <td>{q.type.description}</td>
        <td>{q.total}</td>
    </tr>
    {eachend}
    </tbody>
</table>