{% import 'Admin/Webhook/Endpoint/form.html.twig' as formEndPoint %}
{% set formOptions = {
    'action' : path('foxorders_admin_webhook_save' , {'webhook': webhook.id ?? null}),
	'attr': {
		'id': 'kt_modal_' ~ form.vars.id ~ '_form' ,
		'class': 'kt-fx-form mx-auto px-15 w-100 py-10','novalidate':'novalidate'}
	}
%}

{{ form_start(form, formOptions) }}
<div class="modal-body scroll-y modal-content-body">
	<div class="row">
		<div class="col-lg-12">
			{{ form.source|form_row }}
		</div>
		<div class="col-lg-12">
			{{ form.object|form_row }}
		</div>
		<div class="col-lg-12" id="events" style="display: {{ webhook.id is null ? 'none' : 'block' }}">
			{{ form.events|form_row }}
		</div>
		<div class="col-lg-12">
			{{ form.retries|form_row }}
		</div>
		<label class="fs-6 fw-bold mb-2 required" for="webhook_endpoints">{{ 'app.admin.pages.webhook.list.endpoints'|trans }}</label>
		<div class="row js-endpoints-wrapper" data-prototype="{{ formEndPoint.endPoint(form.endpoints.vars.prototype)|e('html_attr') }}" data-index="{{ form.endpoints|length > 0 ? form.endpoints|last.vars.name + 1 : 0 }}">
			{% for endpoint in form.endpoints %}
				{{ formEndPoint.endPoint(endpoint, loop.index - 1) }}
			{% endfor %}
		</div>
		<a href="#" class="mb-5 js-add-endpoint">
			<span class="fa fa-plus-circle"></span>
			{{ 'app.admin.pages.webhook.form.add_endpoint'|trans }}
		</a>
	</div>
</div>
<div class="modal-footer modal-content-footer">
	{% include 'Includes/Form/form_button.html.twig' %}
</div>
{{ form_end(form) }}

{% block javascripts %}
	<script src="{{ asset('metronic/v8.1.5/js/scripts.bundle.js') }}"></script>
	<script src="{{ asset('foxorders/js/validation/form-validation.js') }}"></script>
	<script src="{{asset('foxorders/js/admin/webhook-endpoints.js') }}"></script>
	<script src="{{asset('foxorders/js/admin/webhook-events.js') }}"></script>
	<script src="{{asset('foxorders/js/inputs/select2.js') }}"></script>
{% endblock %}