{% 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="col">
                {{ form_start(form) }}
                {{ form_row(form.response) }}
                <div class="row">
                    <div class="col-12">
                        <p>Of course, the price distribution depends on the context e.g. country of origin of the product and associated supply
                            chain. However, please answer to the best of your knowledge, an overall estimation is appreciated</p>
                    </div>
                </div>
                <div class="row">
                    <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>
                </div>
                {{ form_end(form) }}
            </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 %}