{% extends '@DWGinger/base.html.twig' %}

{% form_theme form 'bootstrap_4_layout.html.twig' %}

{% block body %}
    <div class="row heading">
        <div class="col">
            <h1>{{ 'import.heading'|trans }}</h1>
        </div>
    </div>
    <div class="row heading-desc">
        <div class="col">
            <h2 class="thin">{{ 'import.heading_desc'|trans }}</h2>
        </div>
    </div>
    <div class="row download-template mt-3 mb-3">
        <div class="col">
            <a id="import-download-template" href="{{ path('dw_ginger_import_template') }}">
                <i class="fas fa-download"></i>
                {{ 'import.download_template'|trans }}
            </a>
        </div>
    </div>
    <div class="row upload-info">
        <div class="col-sm-10">
            <p>{{ 'import.upload_info'|trans }}</p>
        </div>
    </div>
    {{ form_start(form) }}
        <div class="row file_import_upload">
            <div class="col-sm-10">
                {{ form_label(form.file) }}
                {{ form_widget(form.file) }}
            </div>
        </div>
        <div class="row heading-desc file_import_upload">
            <div class="col-sm-10 mt-4">
                <h2 class="thin">{{ 'import.new.import_settings'|trans }}
                    <a class="small" tabindex="0" role="button" data-toggle="popover" data-placement="right" data-html="true" data-trigger="focus"
                       title="{{ 'import.new.import_help.title'|trans|e('html_attr') }}"
                       data-content="{{ 'import.new.import_help.body'|trans|e('html_attr') }}">
                        <i class="fa fa-info-circle"></i>
                    </a>
                </h2>
            </div>
        </div>
        <div class="row file_import_upload">
            <div class="col-sm-10">
                {{ form_label(form.mode) }}
                {{ form_widget(form.mode) }}
            </div>
        </div>
        <div class="row">
            <div class="col-sm-10">
                <button type="submit" class="btn btn-primary float-right ml-3">
                    {{ 'import.submit'|trans }}
                </button>
            </div>
        </div>
    {{ form_end(form) }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        $(function (){
            $("input:file").on('change', function(e) {
                let inputFile = event.currentTarget;
                if (1 === inputFile.files.length) {
                    $(inputFile).parent().find('.custom-file-label').html(inputFile.files[0].name);
                } else {
                    $(inputFile).parent().find('.custom-file-label').html('');
                }
            })
        });
    </script>
{% endblock %}