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

{% block title %}{{ 'app.shop_owner.pages.qrcodes_tables.title'|trans }}{% endblock %}
{% block headerPageTitle %}{{ 'app.shop_owner.pages.qrcodes_tables.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="post d-flex flex-column-fluid" id="kt_post">
		<div id="kt_content_container" class="container-xxl">
            <div class="col-xl-12">
                <div class="card mb-xl-9">
                    <div class="card-header border-0">
                        <div class="card-title m-0">
                            <h3>{{ 'app.shop_owner.pages.qrcodes_tables.title'|trans }}</h3>
                        </div>
                        {% if tables is not empty %}
                            <div class="card-toolbar">
                                {{ link('download_qr_codes_table', path('foxorders_shop_qrcodes_tables_download_qrcodes', {'shop': shop.id}), 'primary') }}
                            </div>
					    {% endif %}
                    </div>
                </div>
            </div>
			<div class="row g-5 g-xxl-8">
				<div class="col-xl-12">
					<div class="row">
                        {{ include('Shop/QrCode/Tables/list.html.twig') }}
                        {% include 'List/pagination.html.twig' with { 'data' : tables } %}
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

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

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        var shop = {{ shop.id }}
        var translations = {
            "tables": {
                "empty": '{{ 'app.global.validation.qrcodes_tables.empty'|trans }}',
            },
			"modal": {
				'add': '{{ 'app.shop_owner.pages.qrcodes_tables.new.title'|trans }}',
			}
        }
    </script>
    <script src="{{ asset('foxorders/js/shop/qrcode/tables.js') }}"></script>
    <script src="{{ asset('foxorders/js/validation/rules/shop/tables.js') }}"></script>
{% endblock %}