{{ form_start(form, {
    'action': path('foxorders_admin_mode_save' , { 'mode': mode.id ?? null }),
	'attr': {
		'id': 'kt_modal_' ~ form.vars.id ~ '_form' ,
		'class': 'kt-fx-form mx-auto px-15 w-100','novalidate':'novalidate'}
}) }}
<div class="modal-body scroll-y modal-content-body">
	<div class="row col-lg-12">
        <div class="card card-flush">
            <div class="card-header card-header-stretch p-0">
                <ul class="nav nav-stretch nav-line-tabs fw-semibold fs-3 border-transparent flex-nowrap" role="tablist">
                    {% for item in form.modeTranslations %}
                        <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-5">
            {% for item in form.modeTranslations %}
                <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">
                        <div class="card card-flush">
                            <div class="card-body mb-3 p-0">
                                {{ item.name|form_row }}
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
        <div class="card card-flush">
            <div class="card-body pt-0" style="padding: unset">
                {{ form.code|form_row }}
            </div>
            <div class="card-body pt-0" style="padding: unset">
                {{ form.type|form_row }}
            </div>
            <div class="card-body pt-0" style="padding: unset">
                {{ form.enabled|form_checkbox_row }}
            </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 modeTranslationsLength = {{ form.modeTranslations|length }};
	var modeId = {{ modeId|default(null)|json_encode }}
</script>
<script src="{{ asset('metronic/v8.1.5/js/scripts.bundle.js') }}"></script>
<script src="{{ asset('foxorders/js/validation/rules/admin/modes.js') }}"></script>
<script src="{{ asset('foxorders/js/validation/form-validation.js') }}"></script>
<script src="{{ asset('foxorders/js/form/slugify.js') }}"></script>