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

{% block body %}
    <div class="container margin-top-30">
        <div class="col">
            <h3>Question {{ questionNumber }}</h3>
        </div>
        <div class="question">
            <div class="row">
                <div class="col">
                    {{ form_start(form) }}
                    <p>
                        <legend class="col-form-label">Do you think that criteria for responsible charcoal sourcing should be integrated into the
                            European Norm
                            EN-1860-2?
                        </legend>
                    </p>
                    {{ form_row(form.answer1) }}
                    {{ form_row(form.answer2) }}
                    {{ form_row(form.answer3) }}
                    {{ form_row(form.answer4) }}
                    <div class="row" style="margin-top: 1rem">
                        {{ form_start(form) }}
                        <div class="col-12">
                            <a class="btn btn-success"
                                    {% set previousRoute = 'q'~previousResponseId %}
                               href="{{ path(previousRoute ,{ 'cryptId' : survey.cryptId , 'questionId' : previousResponseId}) }}"
                            >Previous </a>
                            {{ form_widget(form.next) }}
                        </div>
                        {{ form_end(form) }}
                    </div>
                    {{ form_end(form) }}
                    <div class="row" style="margin-top: 1rem">
                        <div class="col-12">
                            <p>
                                <strong>Note:</strong> The EU Norm EN 1860-2 :2005 “Appliances, solid fuels and firelighters - - Part 2: Barbecue
                                charcoal and barbecue charcoal briquettes. Requirements and test methods”
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}
{% block progressBar %}
    <div class="fixedElement">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated"
                             role="progressbar"
                             aria-valuenow="{{ questionNumber }}"
                             aria-valuemin="0"
                             aria-valuemax="60"
                             style="width: {{ percentage }}%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block customjavascript %}
    <script type="text/javascript" src="{{ asset('src/js/fixed-bar.js') }}"></script>
{% endblock %}