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

{% block body %}
    <div class="container margin-top-30">
        <div class="col">
            <h3>Question {{ questionNumber }}</h3>
        </div>
        <div class="col">
            <div class="question">
                {{ form_start(form) }}
                {{ form_row(form.response) }}
                <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 class="col">
            <p>
                <strong>Retailer:</strong> a company that sells goods to the public in stores and on the internet, rather than to stores or other
                businesses<br/>
                <strong>Charcoal Trader:</strong> a person or company that sells and buys goods, in this case charcoal products<br/>
                <strong>Charcoal producer:</strong> a producer is a manufacturer of goods, in this case charcoal<br/>
                <strong>DIY Store:</strong> a store that sells, household hardware for home improvement, including garden and charcoal articles,
                directly to consumers for use at home or in businesses.<br/>
                <strong>Barbecue Industry participant: </strong> a company associated with the manufacturing and/or distribution of barbecue fuels,
                firelighters and relevant accessories including barbecues, portable barbecues, smokers etc.<br/>
                <strong>Fuel Trading company:</strong> a company that manufactures, or distributes fuels including petrol, gas, renewable energy carriers and coal.<br/>
                <strong>Other:</strong> All companies that don't fall under one of the above definitions.
            </p>
        </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 %}