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

{% block page_title %}
    <span class="mr-6">
        <i class="fad fa-upload fa-swap-opacity text-dark mr-2"></i>
        <span class="plus bold">{{ 'label.import_file'|trans }}</span>
    </span>
{% endblock %}

{% block content %}
    {{ form_start(form_import_file) }}
    <div class="card card-custom gutter-b">
        <div class="card-header flex-wrap border-0 pt-6 pb-0">
            <div class="card-title">
                <span class="fad fa-file-import section-icon mr-3 px-2 py-2 rounded"></span>
                <span class="plus bold grey-2">{{ 'label.import_file'|trans }}</span>
            </div>
        </div>
        <div class="card-body pt-0">
            <div class="d-flex flex-row">
                {% for item in form_import_file %}
                    {% if item.vars.name == '_token' %}
                        {{ form_row(item) }}
                    {% else %}
                        <div class="form-group mb-0 w-100 mr-8 fv-plugins-icon-container{% if not loop.first %} pl-0{% endif %}">
                            {{ form_label(item, null, {'label_attr': {'class': 'col-form-label'}}) }}
                            {{ form_widget(item, {'attr': {'class': 'form-control form-control-solid'}}) }}
                        </div>
                    {% endif %}
                {% endfor %}

                <div class="w-50">
                    <label class="col-form-label d-block">&nbsp;</label>
                    <button type="submit"
                            class="btn btn-submit w-100">{{ button_label|default('label.upload_file')|trans }}</button>
                </div>
            </div>
        </div>
    </div>
    {{ form_end(form_import_file) }}

    <div class="card card-custom gutter-b">
        <div class="card-header flex-wrap border-0 pt-6 pb-0">
            <div class="card-title">

                <span class="fad fa-download section-icon mr-3 px-2 py-2 rounded"></span>
                <span class="plus bold grey-2">{{ 'label.export_file'|trans }}</span>
            </div>
            <div class="card-toolbar">
                <button type="submit"
                        data-action="{{ path('product_import_export_template') }}"
                        class="js-ajax-download-template btn btn-submit mr-2">{{ button_label|default('label.export')|trans }}</button>
            </div>
        </div>
        <div class="card-body pt-3">
            <div class="row mb-5">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <input class="form-control" type="text" id="search-taxonomies" name="search"
                           placeholder="{{ 'label.search'|trans }}"
                           data-search-url="{{ path('product_import_category_mapping_search_tree') }}">
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <button class="btn btn-primary" id="btn-search-taxonomies"
                            type="button">{{ 'label.search'|trans }}</button>
                </div>
            </div>

            <div class="tree-ajax" id="search-container-tree"></div>

            <div id="container-tree">
                {% include 'product/catalog/import/tree/tree.html.twig' with {
                    'tree': taxonomy_tree,
                    'get_tree_url': path('product_import_category_mapping_get_tree')
                } %}
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    {{ encore_entry_script_tags('app') }}
{% endblock %}