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

{% block title %}{{ 'app.shop_owner.pages.kitchens.head_title'|trans }}{% 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 mb-5 mb-xxl-8">
						<div class="card-body">
							<div class="row">
								{% for kitchen in kitchens %}
									<div class="col-lg-3 min-w-175px pb-5">
										<div class="notice d-flex bg-light-primary rounded border-primary border border-dashed mb-9 p-6">
											<div class="d-flex flex-stack flex-grow-1">
												<div class="me-5 fw-bold">
													<label class="fs-6">{{ kitchen.name|capitalize }}</label>
													<div class="fs-7 text-muted" data-bs-original-title="{{ kitchen.description|capitalize }}" data-bs-toggle="tooltip" data-bs-trigger="hover" style="cursor : pointer"></div>
												</div>
												<label class="form-check form-switch form-check-custom form-check-solid">
													<input
														class="form-check-input toggle-kitchen"
														type="checkbox"
														{% if shop.hasKitchen(kitchen.id) %}checked="checked"{% endif %}
														data-shop="{{ shop.id }}"
														data-kitchen="{{ kitchen.id }}"
													>
												</label>
											</div>
										</div>
									</div>
								{% else %}
									<div style='color:orange'>{{ 'app.global.detail.no_record_found'|trans }}</div>
								{% endfor %}
							</div>
        					{% include 'List/pagination.html.twig' with { 'data' : kitchens } %}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('foxorders/js/shop/kitchens.js') }}"></script>
{% endblock %}