{% extends 'base.html.twig' %}

{% block content %}
    <header class="page-header">
        <h1>Change blindness results</h1>
    </header>
    <div class="alert alert-info">{% if records == 1 %}Retrieved 1 result.{% else %}Retrieved {{ records }} results.{% endif %}</div>
    {% if allow_filtering %}
    <div class="btn-group">
        <a class="btn{% if filtered %} active{% endif %}" href="index.php?mode=results&filtered=1">Filtered results</a>
        <a class="btn{% if not filtered %} active{% endif %}" href="index.php?mode=results">All results</a>
    </div>
    {% endif %}

    <h2 id="statistics">Statistics</h2>
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Notable</th>
                <th>Unnoted</th>
                <th>Renoted</th>
            </tr>
        </thead>
        <tbody>
            {% for record in stats %}
            <tr>
                <td>{{ loop.index }}.</td>
                {% if record.scene1.correct %}<td class="alert-success"><i class="icon-ok"></i>{% else %}<td class="alert-danger"><i class="icon-remove"></i>{% endif %}&nbsp;{{ record.scene1.time / 1000 }} seconds</td>
                {% if record.scene2.correct %}<td class="alert-success"><i class="icon-ok"></i>{% else %}<td class="alert-danger"><i class="icon-remove"></i>{% endif %}&nbsp;{{ record.scene2.time / 1000 }} seconds</td>
                {% if record.scene3.correct %}<td class="alert-success"><i class="icon-ok"></i>{% else %}<td class="alert-danger"><i class="icon-remove"></i>{% endif %}&nbsp;{{ record.scene3.time / 1000 }} seconds</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    
<!--Doing some debugging.
<pre>{{ dump(stats) }}</pre>
<pre>{{ dump(data) }}</pre> -->
    
	<h2 id="raw-results">Raw results</h2>
    <p><a class="btn" href="index.php?mode=result&download=1"><i class="icon-download-alt"></i> Download results</a></p>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>#</th>
                <th colspan="3">Notable</th>
                <th colspan="3">Unnoted</th>
                <th colspan="3">Renoted</th>
            </tr>
            <tr>
                <th></th>
                <th>x</th>
                <th>y</th>
                <th>time</th>
                <th>x</th>
                <th>y</th>
                <th>time</th>
                <th>x</th>
                <th>y</th>
                <th>time</th>
            </tr>
        </thead>
        <tbody>
            {% for record in data %}
            <tr class="{% if record.result.host == '192.168.0.1' %}muted{% endif %}">
                <td>{{ loop.index }}.</td>
                <td>{{ record.notable.xcoordinate }}</td>
                <td>{{ record.notable.ycoordinate }}</td>
                <td>{{ record.notable.responsetime }}</td>
                <td>{{ record.unnoted.xcoordinate }}</td>
                <td>{{ record.unnoted.ycoordinate }}</td>
                <td>{{ record.unnoted.responsetime }}</td>
                <td>{{ record.renoted.xcoordinate }}</td>
                <td>{{ record.renoted.ycoordinate }}</td>
                <td>{{ record.renoted.responsetime }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}