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

{% block body %}
    <div class="container margin-top-30">
        <div class="col">
            <h3>Question {{ questionNumber }}</h3>
        </div>
        <div class="row">
            <div class="col-12">
                <p>
                    In this section we ask you for transparency information about your charcoal product supply chains.
                </p>
                <p>
                    We ask you for full transparency, from the forest to the retailer. Together with you we want to work for a transparent and
                    responsible charcoal market in Europe and world-wide. Therefore, it is of upmost importance that the
                    <strong> origin of the charcoal product</strong> as well as <strong> the wood resources used</strong> to produce the charcoal, are known, transparent
                    and communicated to the consumer .
                </p>
                <p>
                    To provide your product’s supply chain transparency information, we ask you to fill out the excel file
                    <strong>“EF_Charcoal_Supply_Chain_Questionnaire”.</strong>
                </p>

                <p><a href="{{ path('excel_survey') }}" target="_blank">1. Please download the excel file</a></p>
                <p>2. Please fill out the excel file - you can also Save your survey progress and resume later by clicking on “Save and Finish later”</p>
                <p>3. Save the excel file on your computer</p>
                <p>4. Upload the excel file again by clicking on “Browse”</p>
                <p>The information we ask comprises all elements of a thorough supply chain traceability exercise. In addition, it can be
                    understood as a first step towards a <strong> due diligence exercise</strong> as pre-determined by the <strong> European Timber Regulation (EUTR).</strong></p>
                <p>We invite you to fill the excel file with information regarding your products listed in the product section (previous section) of the survey.<br/><br/>
                    Once completed, please upload the excel file here.
                    The information we receive via the excel file will remain confidential and only be used for us to evaluate your transparency
                    level - which will appear as a scoring on the CTI platform, online available under
                    <a href="https://www.charcoal-transparency.org/" target="_blank">www.charcoal-transparency .org</a>.
                    If you wish to learn more about our scoring methodology, click <a href="{{ path('methodology') }}" target="_blank">here</a>.
                </p>
                <p>
                    None of your confidential supply chain information will be shared to any third party. You may consult our Terms & Conditions
                    regarding data confidentiality following this <a href="{{ path('terms_and_conditions') }}" target="_blank">link.</a>
                </p>

                <p style="margin-top: 50px;">
                    Thank you very much.
                </p>
            </div>
        </div>
        <div class="question">
            <div class="row">
                <div class="col-12">
                    {{ form_start(form) }}
                    {{ form_row(form.fileName) }}
                    {% if lastFilename != '' %}
                        <p>Last uploaded file: {{ lastFilename }}</p>
                    {% endif %}
                    <div class="row">
                        {{ form_start(form) }}
                        <div class="col-12">
                            <a class="btn btn-success" href="{{ path('q58',{'questionId':58,'cryptId':survey.cryptId}) }}">Previous</a>
                            {{ form_widget(form.next) }}
                            <a class="float-right" href="{{ path('q60',{'questionId':60,'cryptId':survey.cryptId}) }}">Skip and go to next question
                                >></a>
                        </div>
                        {{ form_end(form) }}
                    </div>
                    {{ form_end(form) }}
                </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>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#q59_fileName').change(function() {
                var file = $('#q59_fileName')[0].files[0].name;
                $(this).next('.custom-file-label').text(file);
            });
        });

    </script>
{% endblock %}