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

{% block title %}
	{{ question.title }}
	{{ bs }}
	{{ parent() }}
{% endblock %}

{% block questionnaire_content %}
	<div class="text-right">
		{{ percent }}%
	</div>
	<div class="progress progress-striped">
		<div
			class="progress-bar progress-bar-success"
			role="progressbar"
			aria-valuenow="{{ percent }}"
			aria-valuemin="0"
			aria-valuemax="100"
			style="width: {{ percent }}%"
		>
			<span class="sr-only">{{ percent }}% Complete</span>
		</div>
	</div>

	<form action="{{ path('step', {step: step}) }}" method="post">
		<article>
			<div class="panel panel-default">
				<div class="panel-heading">
					<h2 class="panel-title">{{ question.title|trans }}</h2>
				</div>
				<div class="panel-body">
					{% for key, choice in question.choices %}
						<p>
							<input
								type="radio"
								name="response"
								{% if loop.first %}
									checked
								{% endif %}
								value="{{ key }}"
								id="response_{{ key }}"
							>
							<label for="response_{{ key }}">
								{{ choice|trans|raw }}
							</label>
						</p>
					{% endfor %}
				</div>
			</div>
		</article>

		<p>
			{% if step > 1 %}
				<a class="btn btn-success" href="{{ path('step', {step: step - 1}) }}">{{ 'previous'|trans }}</a>
			{% endif %}

			<button class="btn btn-success" type="submit">{{ 'next'|trans }}</button>
		</p>
	</form>
{% endblock %}