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

{% block body %}
    <div class="d-flex flex-column-reverse flex-lg-row container w-100">

        <div class="container pt-3">
            <h4>You finished trial: <strong>{{ test.getName() }}</strong></h4>
            <h5>Your results <a href="{{ url('test_results', {'test_id': test.getId(), 'uuid': uuid}) }}">link</a></h5>
            <div class="row">
                <ul class="list-group col">
                {% for correctAnswer in correctAnswers %}
                    <li class="list-group-item {% if not correctAnswer.isCorrect() %}list-group-item-danger{% else %}list-group-item-success{% endif %}">
                        {{ service.getQuestionModel(correctAnswer.question).getPrompt() }}
                        {% for answer in correctAnswer.getAnswer() %}
                            {{ service.assembleString(answer) }}{% if not loop.last %},{% endif %}
                        {% endfor %}
                    </li>
                {% endfor %}
                </ul>
                <ul class="list-group col">
                    {% for incorrectAnswer in incorrectAnswers %}
                        <li class="list-group-item {% if not incorrectAnswer.isCorrect() %}list-group-item-danger{% else %}list-group-item-success{% endif %}">
                            {{ service.getQuestionModel(incorrectAnswer.question).getPrompt() }}
                            {% for answer in incorrectAnswer.getAnswer() %}
                                {{ service.assembleString(answer) }}{% if not loop.last %},{% endif %}
                            {% endfor %}
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
{% endblock %}