{{ form_start(form, {
    'action': path('foxorders_shop_category_save' , { 'menu': menu.id, 'category': category.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 col-lg-12">
		<div class="col-md-5">
			<div class="d-flex flex-column w-100 w-lg-300px me-lg-10">
				<div class="card card-flush">
					<div class="card-body image-input-div text-center py-0">
                		{{ form.imageType|form_radio_row('_styled') }}
						<div id="imageFileField" class="image-file-input" {% if category.image.name or category.id is null or category.imageUrl is null %} style="display:block" {% else %} style="display:none" {% endif %}>
							{{ form.imageFile|form_image_row(category.image.name, categories_images) }}
						</div>
						<div id="imageUrlField" class="image-url-input" {% if category.imageUrl %} style="display:block" {% else %} style="display:none" {% endif %}>
							{{ form.imageUrl|form_image_url_with_preview }}
						</div>
					</div>
					{% include 'Product/show_ids_category_product.html.twig' %}
				</div>
				<div class="separator separator-dashed my-4"></div>
				<div class="card card-flush">
					<div class="card-body pt-0" style="padding: unset">
						{% if form.parent is not null %}
							{{ form.parent|form_row }}
						{% endif %}
						{{ form.enabled|form_checkbox_row }}
						{{ form.visible|form_checkbox_row }}
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-7">
			<div class="card card-flush">
				<div class="card-header card-header-stretch">
					<ul class="nav nav-stretch nav-line-tabs fw-semibold fs-3 border-transparent flex-nowrap" role="tablist">
						{% for item in form.categoryTranslations %}
							<li class="nav-item">
								<a class="nav-link {% if loop.first %} active {% endif %}" data-bs-toggle="tab" href="#kt_tab_pane_{{item.vars.value.locale.code}}">
									{{ ('app.global.locales.' ~ item.vars.value.locale.code)|trans }}
								</a>
							</li>
						{% endfor %}
					</ul>
				</div>
			</div>
			<div class="tab-content mt-10" id="productsContent">
				{% for item in form.categoryTranslations %}
					<div class="tab-pane fade {% if loop.first %} show active {% endif %}" id="kt_tab_pane_{{item.vars.value.locale.code}}" role="tabpanel">
						<div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
							<div class="card card-flush">
								<div class="card-body pt-0">
									{{ item.name|form_row(null, {'dataId' : 'name_' ~ item.vars.value.locale.code, 'dataClass' : 'translate_name_' ~ item.vars.value.locale.code|split('_')|first}) }}
									{{ item.description|form_row(null, {'dataId' : 'description_' ~ item.vars.value.locale.code, 'dataClass' : 'translate_description_'~ item.vars.value.locale.code|split('_')|first}) }}
								</div>
							</div>
						</div>
					</div>
				{% endfor %}
					<div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
						<div class="card card-flush">
							<div class="card-body pt-0">
								{{ form.externalId|form_row }}
							</div>
						</div>
					</div>
			</div>
		</div>
	</div>
</div>
<div class="modal-footer modal-content-footer">
	{% include 'Includes/Form/form_button.html.twig' %}
</div>
{{ form_end(form) }}
<script type="text/javascript">
	var categoryTranslationsLength = {{ form.categoryTranslations|length }};
</script>
<script src="{{ asset('metronic/v8.1.5/js/scripts.bundle.js') }}"></script>
<script src="{{asset('foxorders/js/validation/rules/shop/product/category.js')}}"></script>
<script src="{{ asset('foxorders/js/validation/form-validation.js') }}"></script>
<script src="{{ asset('foxorders/js/form.js') }}"></script>
<script src="{{ asset('foxorders/js/copy-clipboard.js') }}"></script>
<script src="{{ asset('foxorders/js/translation/translation.js') }}"></script>
{% if  menu.shop.shopSettings.autoTranslate %}
	<script src="{{ asset('foxorders/js/translation/translate.js') }}"></script>
{% endif %}
<script src="{{ asset('foxorders/js/global/image-url-preview.js') }}"></script>
<script src="{{ asset('foxorders/js/global/image-type-input.js') }}"></script>