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

{% block title %}
	{{ 'app.shop_owner.pages.menus.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_shop">
		{{ 'app.global.buttons.add'|trans }}
	</a>
{% endblock %}

{% block component_body %}
	<div class="card mb-5 mb-xxl-8">
		<div class="card-body">
			{% if menus|length > 0 %}
				<div class="timeline">
					<div class="timeline-item">
						<div class="timeline-icon symbol symbol-circle symbol-40px">
							<div class="symbol-label bg-primary">
								{% include 'Extentions/Icons/layouts.html.twig' %}
							</div>
						</div>
						<div class="timeline-content mt-n1">
							<div class="pe-3 mb-5">
								<div class="fs-5 fw-bold mb-2 mt-3">{{ 'app.shop_owner.pages.menus.list.title'|trans }}</div>
							</div>
							<div class="overflow-auto pb-5">
								{% for menu in menus %}
									<div class="d-flex align-items-center border border-dashed border-gray-300 rounded min-w-750px px-7 py-3 mb-5">
										<div>
											<label class="form-check form-switch form-check-custom form-check-solid">
												<input class="form-check-input toggle-menu"
													type="checkbox" 
													{% if menu.enabled %} checked="checked" {% endif %}
													data-menu="{{ menu.id }}"
												>
											</label>
										</div>
										<a href="{{ path('foxorders_shop_menu_show', {'id': menu.id}) }}" class="fs-5 text-dark text-hover-primary fw-bold w-375px min-w-200px" style="margin-left: 5px">{{menu.name}}</a>
										<div class="symbol-group symbol-hover flex-nowrap flex-grow-1"></div>
										{{ link('show', path('foxorders_shop_menu_show', {'id': menu.id})) }}
										{{ link('edit','modal', 'success', {'entity-id' : menu.id, 'entity-name' : menu.name, 'modalId': 'foxorders_modal_form_shop' }) }}
										{% if 1 < menus.count %}
											{% include 'Includes/delete.html.twig' with {
												'route': path('foxorders_shop_menu_delete', {'id': menu.id}) ,
												'token': csrf_token('delete' ~ menu.id),
												'button': 'list_delete'
											} %}
										{% endif %}
									</div>
								{% endfor %}
							</div>
						</div>
					</div>
				</div>
			{% else %}
				<div class="pe-3 mb-5" style='color:orange'>{{ 'app.global.detail.no_record_found'|trans }}</div>
			{% endif %}
		{% include 'List/pagination.html.twig' with { 'data' : menus } %}
		</div>
	</div>
{% endblock %}

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

{% block javascripts %}
    {{ parent() }}
	<script type="text/javascript">
		var shop = {{ shop.id }};
        var translations = {
            'name': '{{ 'app.global.validation.menu.name'|trans }}',
			"modal": {
				'add': '{{ 'app.shop_owner.pages.menus.new.title'|trans }}',
				'edit': '{{ 'app.shop_owner.pages.menus.edit.title'|trans }}'
			}
        };
		modalTranslations.delete.message = '{{ 'app.global.validation.menu.delete.message'|trans|raw }}';
    </script>
    <script src="{{asset('foxorders/js/validation/rules/shop/product/menu.js')}}"></script>
	<script src="{{asset('foxorders/js/shop/menu/menus.js') }}"></script>
{% endblock %}