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

{% block body %}
    <div class="mx-auto mt-5 max-w-7xl px-2 sm:px-6 lg:px-8 pb-10">
        <h1 class="mx-4 mb-4 font-semibold text-2xl">{{ challenge|replace({'.yaml': '', '_': ' '})|capitalize }}</h1>
        <div>
            {% for question in questions %}
                <div class="mx-4 mb-8">
                    <h2 class="mb-3 text-sm">{{ loop.index }}. {{ question.question }}</h2>
                    {% for questionanswer in question.answers %}
                        <div class="mb-2">
                            <div class="ms-4 mb-2 m-4 text-gray-800 text-sm">
                                {% if answers[question.uuid] is defined %}
                                    {% if questionanswer.value in answers[question.uuid]  and questionanswer.correct == true %}
                                        <span class="text-green-700 bg-green-200 p-2">{{ questionanswer.value }}</span>
                                    {% elseif questionanswer.value in answers[question.uuid] and questionanswer.correct == false %}
                                        <span class="text-red-700 bg-red-200 p-2">{{ questionanswer.value }}</span>
                                    {% else %}
                                        <span class="p-2">{{ questionanswer.value }}</span>
                                    {% endif %}
                                {% else %}
                                    {{ questionanswer.value }}
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                    <div class="ms-4 mt-4 mb-2 ">
                        <span class="text-gray-400 p-2 text-sm bg-gray-200">help: </span><a href="{{ question.help }}" target="_blank" class="text-gray-400 p-2 text-sm">{{ question.help }}</a>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endblock %}