{% import 'Franchise/Slide/form_macros.html.twig' as macros %}

{{ form_start(form, {
    'action': path('foxorders_franchise_slides_save', { 
        'franchise': franchise.id, 
        'slide': slide.id ?? null 
    }),
    'attr': {
        'id': 'kt_modal_' ~ form.vars.id ~ '_form',
        'class': 'kt-fx-form mx-auto px-15 w-100 py-10',
        'novalidate': 'novalidate'
    }
}) }}

<div class="modal-body scroll-y modal-content-body">

	<div class="row">
		<div class="col-md-6">
			{{ form.name|form_row }}
		</div>
		<div class="col-md-3">
			{{ form.duration|form_row }}
		</div>
		<div class="col-md-3">
			<div class="pb-5">
				{{ form.enabled|form_checkbox_with_top_label_row }}
			</div>
		</div>
	</div>

	<hr>

	<h3 class="mb-5">{{ 'app.manager.pages.slides.images'|trans }}:</h3>
	<div class="mb-5">
		<button id="slide-item-add" type="button" class="btn btn-sm btn-primary js-slide-item-add">
			<span class="fa fa-plus-circle"></span>
			{{ 'app.global.buttons.add'|trans }}
		</button>
	</div>

	<div id="slide_items_container">
		<div class="row sortable-container js-slide-items-nestable" data-prototype="{{ macros.slide_item(form.slideItems.vars.prototype)|e('html_attr') }}" data-index="{{ form.slideItems|length > 0 ? form.slideItems|last.vars.name + 1 : 0 }}">
			{% for item in form.slideItems %}
				{{ macros.slide_item(item) }}
			{% endfor %}
		</div>
	</div>

</div>

<div class="modal-footer modal-content-footer">
	{% include 'Includes/Form/form_button.html.twig' %}
</div>

{{ form_end(form) }}

<script src="{{ asset('foxorders/js/global/Sortable.min.js') }}"></script>
<script src="{{ asset('foxorders/js/franchise/slide-items.js') }}"></script>
<script src="{{ asset('foxorders/js/validation/form-validation.js') }}"></script>
<script src="{{ asset('foxorders/js/global/image-url-preview.js') }}"></script>
<script src="{{ asset('foxorders/js/global/image-type-input.js') }}"></script>