{% macro html_import(formImport, title, index = 0) %}
<div class="reveal" id="modalStepFile_{{ index }}" data-reveal>
    <div class="reveal-title">{{ title }} - 1/3</div>
    <div class="reveal-body" >
        <div class="grid-x">
            <div class="cell text-center mb-1-5">{{'import.modal_file.message'|trans}}</div>
            <div class="cell">
                {{ form_start(formImport,{'attr':{'id':'formAddFile_'~ index,'class':'not-monitored'}}) }}
                <div class="grid-x grid-padding-x">
                    <div class="cell small-8 small-offset-4 no-pr mb-1">
{#                        {{ form_label(formImport.file, {'labeL_attr':{'class':'button small download mb-1'}}) }}#}
                        {{ form_label(formImport.file) }}
                        {{ form_widget(formImport.file) }}
                        <div id="file_name_import_{{ index }}" class="text-azur"></div>
                    </div>
                    <div class="cell small-8 small-offset-4 no-pr">{{ form_widget(formImport.first_line )}}&nbsp;{{ form_label(formImport.first_line )}}</div>
                    <div class="cell small-4 text-right">{{ form_label(formImport.separator) }}</div>
                    <div class="cell small-8 no-pr">{{ form_widget(formImport.separator) }}</div>
                    <div class="cell small-4 text-right">{{ form_label(formImport.origin) }}</div>
                    <div class="cell small-8 no-pr">{{ form_widget(formImport.origin) }}</div>
                    <div class="small-9 small-offset-3 cell"><p id="helper" class="help-text"></p></div>
                </div>
                {{ form_end(formImport) }}
            </div>
        </div>
    </div>
    <div class="reveal-footer">
        <button data-close class="button small cancel cancel_import_{{ index }}">{{ 'cancel'|trans }}</button>
        <button class="button small red" id="modalStepFile_submit_{{ index }}">{{ 'next'|trans }}</button>
    </div>
    <button class="close-button"  data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="reveal large" id="modalImportStep1_{{ index }}" data-reveal>
    <div class="reveal-title">{{ title }} - 2/3</div>
    <div class="reveal-body" id="modalImportStep1_body_{{ index }}"></div>
    <div class="reveal-footer">
        <button data-close class="button small cancel cancel_import_{{ index }}">{{ 'cancel'|trans }}</button>
        <button class="button small orange" data-open="modalStepFile_{{ index }}">{{ 'previous'|trans }}</button>
        <button class="button small red" id="modalImportStep1_submit_{{ index }}" disabled="disabled">{{ 'apply'|trans }}</button>
    </div>
    <button class="close-button"  data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="reveal large" id="modalImportStep2_{{ index }}" data-reveal>
    <div class="reveal-title">{{ title }} - 3/3</div>
    <div class="reveal-body" id="modalImportStep2_body_{{ index }}"></div>
    <div class="reveal-footer">
        <button data-close class="button small cancel cancel_import_{{ index }}">{{ 'cancel'|trans }}</button>
        <button class="button small update" id="modalImportStep2_submit_{{ index }}">{{ 'confirm'|trans }}</button>
    </div>
    <button class="close-button"  data-close aria-label="Close modal" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
{% endmacro %}

{% macro html_import_not_allowed( title, index = 0) %}
    <div class="reveal red" id="modalImportNotAllowed_{{ index }}" data-reveal>
        <div class="reveal-title">{{ title }}</div>
        <div class="reveal-body" >
            <div class="grid-x">
                <div class="cell">
                   {{ 'modal.title.import_not_allowed' }}
                </div>
            </div>
        </div>
        <div class="reveal-footer">
            <button data-close class="button small cancel cancel_import_{{ index }}">{{ 'cancel'|trans }}</button>
        </div>
        <button class="close-button"  data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
{% endmacro %}