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

{% block title %}{{ 'app.shop_owner.pages.categories.head_title'|trans }}{% endblock %}

{% block toolbar_actions %}
	<a class="btn btn-sm fw-bold btn-primary new-entity" data-bs-toggle="modal" data-bs-target="#foxorders_modal_form_menu">
        {{ 'app.global.buttons.add'|trans }}
    </a>
{% endblock %}

{% block component_body %}
	<div class="post d-flex flex-column-fluid" id="kt_post">
		<div id="kt_content_container" class="container-xxl">
			<div class="row g-5 g-xxl-8">
				<div class="col-xl-12">
					<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="col-xl-12">
					<div class="card card-xl-stretch mb-xl-8">
						<div class="card-body mb-5 mb-xxl-8">
							{% if categories|length > 0 %}
								{{ include('Product/Category/category_tree.html.twig') }}
							{% else %}
								<div style='color:orange'>{{ 'app.global.detail.no_record_found'|trans }}</div>
							{% endif %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block modals %}
    {% include 'Modal/form.html.twig' with {
        'title': 'app.shop_owner.pages.categories.new.title'|trans,
        'id': 'menu',
    } %}
{% endblock %}

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

{% block javascripts %}
	{{ parent() }}
	<script type="text/javascript">
		var menu = {{ menu.id }};
		var shop = {{ menu.shop.id }};
        var translations = {
            'name': '{{ 'app.global.validation.category.name'|trans }}',
			'external_id': {
				'exist': '{{ 'app.global.validation.external_id.exist'|trans }}',
			},
			'modal': {
				'add': '{{ 'app.shop_owner.pages.categories.new.title'|trans }}',
				'edit': '{{ 'app.shop_owner.pages.categories.edit.title'|trans }}',
			},
			'translation_failed': '{{ 'app.global.translation.messages.error'|trans }}',
			"ok": '{{ 'app.global.buttons.ok'|trans }}',
        }
		modalTranslations['delete']['message'] = '{{ 'app.global.validation.modal.delete.category.message' |trans|nl2br|e("js") }}'
	</script>
    <script src="{{asset('foxorders/js/shop/product/category.js') }}"></script>
	<script src="{{asset('foxorders/js/global/jquery.nestable.js')}}"></script>
{% endblock %}