{% extends 'Franchise/base.html.twig' %}
{% set maxSlides = constant('App\\Entity\\Franchise\\Slide::MAX_SLIDE_ITEMS') %}

{% block title %}
	{{ 'app.manager.menu.link.slides'|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_slide">
		{{ 'app.global.buttons.add'|trans }}
	</a>
{% endblock %}

{% block component_body %}
	<div id="slide_cards_container" class="row g-6 g-xl-9">
		{% for slide in slides %}
			<div class="col-md-6 col-xxl-4">
				<div class="card card-stretch">
					<div class="d-flex justify-content-center mt-5 pb-5">
						<label class="form-check form-switch form-check-custom form-check-solid">
							<input class="form-check-input toggle-slide" type="checkbox" {% if slide.enabled %} checked="checked" {% endif %} data-slide="{{ slide.id }}">
						</label>
					</div>

					<div class="overlay">
						<div class="overlay-layer card-rounded bg-dark bg-opacity-75 z-index-3">
							{{ link('edit','modal', 'success', {
                                'entity-id' : slide.id,
                                'modalId': 'foxorders_modal_form_slide'
                            }) }}

							{% include 'Includes/Manager/delete.html.twig' with {
                                'route': path('foxorders_franchise_slides_delete', {'id': slide.id}),
                                'token': csrf_token('delete' ~ slide.id),
                                'button': 'list_delete'
                            } %}
						</div>
						<div class="card-body pt-5">

							<div class="mb-5">
								<div class="mb-3 text-center">
									{% set firstItem = slide.slideItems|first %}
									{% if firstItem and firstItem.imageUrl %}
										<img src="{{ firstItem.imageUrl }}" class="img-fluid rounded w-100" style="height:150px; object-fit:cover;">
									{% elseif firstItem and firstItem.image and firstItem.image.name %}
										<img src="{{ asset(slide_images ~ firstItem.image.name) }}" class="img-fluid rounded w-100" style="height:150px; object-fit:cover;">
									{% else %}
										<div class="bg-light rounded d-flex align-items-center justify-content-center" style="height:150px;">
											<span class="text-muted">No image</span>
										</div>
									{% endif %}
								</div>
								{% set total = slide.slideItems|length %}
								{% set visible = 5 %}
								{% set remaining = total - visible %}

								<div class="row g-2 mb-2">
									{% for item in slide.slideItems|slice(0, visible) %}
										<div class="col-2 text-center">
											{% if item.imageUrl %}
												<img src="{{ item.imageUrl }}" class="rounded" style="width:50px; height:50px; object-fit:cover;">
											{% elseif item.image and item.image.name %}
												<img src="{{ asset(slide_images ~ item.image.name) }}" class="rounded" style="width:50px; height:50px; object-fit:cover;">
											{% else %}
												<div class="bg-light rounded d-flex align-items-center justify-content-center" style="width:50px; height:50px;">
													<small>No img</small>
												</div>
											{% endif %}
										</div>
									{% endfor %}
									{% if remaining > 0 %}
										<div class="col-2 text-center">
											<div class="bg-secondary text-white rounded d-flex align-items-center justify-content-center" style="width:50px; height:50px; font-weight:bold;">
												+{{ remaining }}
											</div>
										</div>
									{% endif %}
								</div>
							</div>

							<div class="separator separator-dashed my-3"></div>

							<div class="d-flex flex-stack fs-4 py-3">
								<div class="row col-lg-12">
									<div class="col-md-8 text-left">
										<div class="fw-bold">{{ 'app.global.fields.title'|trans }}</div>
										<div class="text-gray-600">
											{{ slide.name }}
										</div>
									</div>
									<div class="col-md-2 text-left">
										<div class="fw-bold">
											<i class="fa fa-clock"></i>
										</div>
										<div class="text-gray-600">
											{{ slide.duration }}
											s
										</div>
									</div>
									<div class="col-md-2 text-left">
										<div class="fw-bold">
											<i class="fa fa-images"></i>
										</div>
										<div class="text-gray-600">
											{{ slide.slideItems|length }}
										</div>
									</div>

								</div>
							</div>

						</div>
					</div>

				</div>
			</div>
		{% else %}
			<div style="color:orange">
				No slides found
			</div>
		{% endfor %}
		{% include 'List/pagination.html.twig' with { 'data' : slides } %}
	</div>

{% endblock %}

{% block modals %}
	{% include 'Modal/form.html.twig' with {
        'title': 'Slide',
        'id': 'slide'
    } %}
{% endblock %}

{% block javascripts %}
	{{ parent() }}

	<script>
		var MAX_SLIDES = {{ maxSlides }};
		var ADD_NEW_SLIDE = false;
		var allowEmpty = false;
		var franchise = {{ franchise.id }};
		var translations = {
			"name": '{{ "app.global.validation.slides.name"|trans }}',
			"duration": '{{ "app.global.validation.slides.duration"|trans }}',
			"duration_invalid": '{{ "app.global.validation.slides.duration_invalid"|trans }}',
			"duration_min": '{{ "app.global.validation.slides.duration_min"|trans }}',

			"modal": {
				'add': '{{ 'app.manager.pages.slides.new.title'|trans }}',
				'edit': '{{ 'app.manager.pages.slides.edit.title'|trans }}'
			}
		};
	</script>
	<script src="{{ asset('foxorders/js/validation/rules/franchise/slides.js') }}"></script>
	<script src="{{ asset('foxorders/js/franchise/slides.js') }}"></script>
{% endblock %}