{{ block title }}
    Results
{{ endblock }}

{{ block content }}

<div class="card mb-4">
    <div class="card-body">
        <h5 class="card-title">Your Results</h5>
        <p>
            You answered <strong>{{ num_correct }}</strong> out of <strong>{{ total }}</strong>
            matrices correctly.
        </p>
        <p>
            Your earnings for this task: <strong>{{ earnings }}</strong>.
        </p>
    </div>
</div>

<table class="table table-sm table-striped">
    <thead>
        <tr>
            <th>Matrix</th>
            <th>Your answer</th>
            <th>Correct answer</th>
            <th>Result</th>
        </tr>
    </thead>
    <tbody>
        {{ for d in details }}
        <tr>
            <td>{{ d.matrix }}</td>
            <td>{{ d.given }}</td>
            <td>{{ d.correct_answer }}</td>
            <td>
                {{ if d.is_correct }}
                    <span class="text-success">&#10003;</span>
                {{ else }}
                    <span class="text-danger">&#10007;</span>
                {{ endif }}
            </td>
        </tr>
        {{ endfor }}
    </tbody>
</table>

{{ next_button }}

{{ endblock }}