<div class="page-header">
    <h3>Transaction detail</h3>
</div>

<div class="row">
    <div class="span1 ">
        <a onclick="return Sjs.submit('back')" class="btn btn-primary">Back</a>
    </div>
</div>

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

<div class="row">
    <div class="span12">
        <div># Queries: {transaction.count}</div>
        <div>Total time: {transaction.formattedTotalTime}</div>
        <div>Query time: {transaction.formattedQueryTime}</div>
        <div>Avg. time/query: {transaction.formattedAvgTime}</div>
    </div>
</div>

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

        <!--
<ul class="nav nav-pills">
    <li {if(sortTotalTime)}class="active"{/if}><a onclick="return Sjs.submit('sortTotalTime')">Total time</a></li>
    <li {if(sortQueryTime)}class="active"{/if}><a onclick="return Sjs.submit('sortQueryTime')">Query time</a></li>
    <li {if(sortAvgTime)}class="active"{/if}><a onclick="return Sjs.submit('sortAvgTime')">Avg. time</a></li>
    <li {if(sortTotalCalls)}class="active"{/if}><a onclick="return Sjs.submit('sortTotalCalls')"># Queries</a></li>
</ul>-->

<table class="table table-condensed table-striped " id="overview">
    <thead>
    <tr>
        <th> </th>
        <th>Type</th>
        <th>Timestamp</th>
        <th>Total time (ms)</th>
        <th>Sql</th>
    </tr>
    </thead>
    <tbody>
    {each(transaction.queries as q)}
    <tr>
        <td>{if(q.stackTrace)}<a onclick="return Sjs.submit('stacktrace', '{q.timestamp}')"><i class=" icon-zoom-in"></i></a>{/if}</td>
        <td>{q.type}</td>
        <td>{q.formattedTimestamp}</td>
        <td>{q.formattedNano}</td>
        {escape(none)}
        <td><pre><code class="sql">{q.sql}</code></pre></td>
        {/escape}
    </tr>
    {/each}
    </tbody>
</table>