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

{% block title %}{{ 'app.global.pages.header.menu'|trans }} {% endblock %}

{% block toolbar_actions %}
    {% if categories|length == 0 and true == is_granted('ROLE_SUPPORT') %}
        {{ link('import', 'modal', 'primary', {'entity-id' : menu.id, 'modalId': 'foxorders_modal_form_shop' }) }}
    {% endif %}
{% endblock %}

{% block component_body %}
<div class="d-flex flex-row flex-column-fluid bg-white mb-10">
    <div class="card">
        <div class="card-header">
            <div class="card-title m-0">
                <h3> {{ 'app.global.pages.header.menu'|trans }} : {{menu.name|capitalize}}</h3>
            </div>
        </div>
    </div>
</div>

<div class="d-flex flex-row flex-column-fluid bg-white p-10">
    <!--  start categories parent -->
    <div class="d-flex--- flex-row-auto w-150px flex-center scroll h-1000px">
        {% include 'Shop/Menu/categories.html.twig' %}
    </div>
    <!--  end categories parent -->
    
    <!--  start sub categories parent -->
    <div class="d-flex--- flex-row-auto w-150px flex-center scroll h-1000px" id="subcategories">
		{% set subCategories = categories.0 is defined ? categories.0.categories : []  %}
        {% include 'Shop/Menu/subcategories.html.twig' with {'categories' : subCategories } %}
    </div>
    <!-- end sub categories parent -->
    
    <!-- start products -->
    <div class="products-section">
        <div class="d-flex flex-wrap d-grid gap-2 gap-xxl-15 draggable-zone" id="products">
            {% include 'Product/Category/show_products.html.twig' %}
        </div>
    </div>
    <!--  end products -->
</div>
{% endblock %}

{% block modals %}
    {% include 'Modal/form.html.twig' with {
        'title': 'app.global.operations.edit'|trans,
        'id': 'edit',
    } %}

    {% include 'Modal/form.html.twig' with {
        'title': 'app.shop_owner.pages.menus.import.title'|trans,
        'id': 'shop',
    } %}
    
{% endblock %}

{% block stylesheets %}
	<link href="{{asset('foxorders/css/nestable.css')}}" rel="stylesheet" type="text/css"/>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
	<script>
		var menu = {{ menu.id }};
        var categoryId = {{ app.session.get('categoryId') ?? 0 }};
        var translations = {
            "file": {
                "empty": '{{ 'app.global.validation.menu.file.empty'|trans }}',
                "invalid": '{{ 'app.global.validation.menu.file.invalid'|trans }}',
            },
            "modal": {
                "show": '{{ 'global.titles.product.details'|trans }}',
				"import": '{{ 'app.shop_owner.pages.menus.import.title'|trans }}'
            },
        }
	</script>
	<script src="{{asset('assets/js/custom/menu/menu-show.js')}}"></script>
    <script src="{{asset('foxorders/js/validation/rules/shop/menu/menu.js')}}"></script>
	<script src="{{asset('foxorders/js/global/jquery.nestable.js')}}"></script>
{% endblock %}