{% 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>

        <form method="post">
            <div>
                {% for question in questions %}
                    <input name="question_id[]" type="hidden" value="{{ question.uuid }}"/>
                    <div class="mx-4 mb-8">
                        <h2 class="mb-3 text-sm">{{ loop.index }}. {{ question.question }}</h2>
                        {% for answer in question.answers %}
                            <div class="mb-2">
                                <label class="ms-4 mb-2 text-gray-800 text-sm">
                                    <input type="{% if question.type == 'single' %}radio{% else %}checkbox{% endif %}" class="rounded text-pink-500" value="{{ answer.value }}"
                                           name="answer[{{ question.uuid }}][]">
                                    {{ answer.value }}
                                </label>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}

                <span class="sm:ml-3">
      <button type="submit"
              class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
        <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
          <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z"
                clip-rule="evenodd"/>
        </svg>
        Submit
      </button>
    </span>
                <span class="sm:ml-3">

                   <button type="reset"
                           class="inline-flex items-center rounded-md bg-gray-200 px-3 py-2 text-sm font-semibold text-gray-400 shadow-sm hover:bg-gray-400 hover:text-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="-ml-0.5 mr-1.5 h-5 w-5" >
  <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
</svg>
Reset
                   </button>

    </span>

            </div>
        </form>

    </div>
{% endblock %}