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

{% block stylesheets %}
    {{ parent() }}

    <script>
        let translations_mapping = {
            'wrong_group_attribute_mapped': '{{ 'label.wrong_group_attribute_mapped'|trans }}',
            'no_attributes_to_map': '{{ 'label.no_attributes_to_map'|trans }}',
            'all_attributes_mapped': '{{ 'label.all_attributes_mapped'|trans }}',
            'attributes_still_left_to_map': '{{ 'label.attributes_still_left_to_map'|trans }}',
            'required_attribute_groups_without_attributes_or_attributes_not_mapped': '{{ 'label.required_attribute_groups_without_attributes_or_attributes_not_mapped'|trans }}',
            'mandatory_categories_left_to_map': '{{ 'label.mandatory_categories_left_to_map'|trans }}',
        }
    </script>

    {{ encore_entry_link_tags('import-file-preview-css') }}
    {{ encore_entry_link_tags('datatable') }}
    {{ encore_entry_link_tags('import-file-wizard') }}
    {{ encore_entry_link_tags('attribute-group-mapping') }}
    {{ encore_entry_link_tags('attribute-mapping') }}
    {{ encore_entry_link_tags('resume') }}
{% endblock %}

{% 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 %}
    {% include 'common/preview_file_content.twig' with {
        file: file,
        headers: headers,
        content: content,
        total_preview_lines: total_preview_lines,
    } %}
    <div class="card card-custom">
        <div class="card-body p-0">
            <div class="wizard pb-8 pt-2 px-7" id="import-wizard" data-wizard-state="first"
                 data-wizard-clickable="true">
                <div class="wizard-nav">
                    <div class="wizard-steps">
                        <div class="wizard-step" data-wizard-type="step" data-wizard-state="current"
                             data-load-url="{{ path('product_import_step_field_mapping') }}" data-step="1">
                            <div class="wizard-label">
                                <h3 class="wizard-title">
                                    <span>1.</span>{{ 'label.product_fields'|trans }}</h3>
                                <div class="wizard-bar"></div>
                            </div>
                        </div>
                        <div class="wizard-step" data-wizard-type="step" data-wizard-state="pending"
                             data-load-url="{{ path('product_import_step_category_mapping') }}" data-step="2">
                            <div class="wizard-label">
                                <h3 class="wizard-title">
                                    <span>2.</span>{{ 'label.product_categories'|trans }}</h3>
                                <div class="wizard-bar"></div>
                            </div>
                        </div>
                        <div class="wizard-step" data-wizard-type="step" data-wizard-state="pending"
                             data-load-url="{{ path('product_import_step_attribute_group_mapping') }}"
                             data-step="3">
                            <div class="wizard-label">
                                <h3 class="wizard-title">
                                    <span>3.</span>{{ 'label.attribute_groups'|trans }}</h3>
                                <div class="wizard-bar"></div>
                            </div>
                        </div>
                        <div class="wizard-step" data-wizard-type="step" data-wizard-state="pending"
                             data-load-url="{{ path('product_import_step_attribute_mapping') }}" data-step="4">
                            <div class="wizard-label">
                                <h3 class="wizard-title">
                                    <span>4.</span>{{ 'label.attributes'|trans }}</h3>
                                <div class="wizard-bar"></div>
                            </div>
                        </div>
                        <div class="wizard-step" data-wizard-type="step" data-wizard-state="pending"
                             data-load-url="{{ path('product_import_step_resume') }}" data-step="5">
                            <div class="wizard-label">
                                <h3 class="wizard-title">
                                    <span>5.</span>{{ 'label.summary'|trans }}</h3>
                                <div class="wizard-bar"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-center">
                    <div class="col-12">
                        <div class="pb-5" data-wizard-type="step-content" data-wizard-state="current">
                        </div>
                        <div class="pb-5" data-wizard-type="step-content">
                        </div>
                        <div class="pb-5" data-wizard-type="step-content">
                        </div>
                        <div class="pb-5" data-wizard-type="step-content">
                        </div>
                        <div class="pb-5" data-wizard-type="step-content">
                        </div>
                        <div class="d-flex justify-content-end border-top pt-10">
                            <div class="import-validation d-none">
                                <div class="alert alert-warning mr-6 my-0 alert-non-mapped flex" role="alert">
                                    <i class="fas fa-warning mr-4 px-2 pb-1 pt-2 flex align-items-end"></i>
                                    <span class="import-validation-text"></span>
                                </div>
                            </div>
                            <div>
                                <button id="cancel-process" type="button"
                                        class="btn btn-light text-primary bold mr-2"
                                        data-action="{{ path('product_import_cancel') }}"
                                        data-alert-title="{{ 'label.cancel_process_alert_title'|trans }}"
                                        data-alert-text="{{ 'label.cancel_process_alert_text'|trans }}"
                                        data-cancel-text="{{ 'label.cancel_process_cancel_text'|trans }}"
                                        data-confirm-text="{{ 'label.cancel_process_confirm_text'|trans }}">
                                    {{ 'label.cancel_import'|trans }}
                                </button>
                                <button type="button" class="btn btn-light text-primary bold"
                                        data-wizard-type="action-prev">{{ 'label.back'|trans }}</button>
                                <button
                                        type="submit"
                                        class="btn btn-bg-warning bold"
                                        data-wizard-type="action-submit"
                                        data-action="{{ path('product_import_submit') }}">
                                    {{ button_label|default('label.publish')|trans }}
                                </button>
                                <button type="button" class="btn btn-bg-warning bold" disabled
                                        data-wizard-type="action-next">{{ button_label|default('label.continue')|trans }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

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

    {{ encore_entry_script_tags('import-wizard') }}
{% endblock %}