{% from 'admin/page/_translation_filed.html.twig' import showTranslationCard %}

{{ form_start(form, {domain: 'admin'}) }}
<div class="card" data-controller="custom-form">
    <div class="card-body">
        {{ form_row(form.name) }}
        {{ form_row(form.sendEmail) }}
        {% if recaptchaSet %}
            {{ form_row(form.isRecaptchaEnabled) }}
        {% endif %}

        {% for translationField in form.customFormTranslations %}
            {{ showTranslationCard(translationField) }}
        {% endfor %}

    </div>
</div>

<div class="row">
    <div class="col-12 mt-3 mb-3">
        <twig:divider text="form_fields"/>
    </div>
</div>

<div class="collection-list mb-5"
     data-prototype="{{ _self.printFormField(form.formFields.vars.prototype)|e('html_attr') }}"
     data-index="{{ form.formFields|length }}"
>
    {% for formField in form.formFields %}
        {{ _self.printFormField(formField) }}
    {% endfor %}
    <div class="alert alert-info {% if form.formFields|length %}d-none{% endif %}">
        {{ 'alert_no_form_field_found_yet'|trans({}, 'admin') }}
    </div>
</div>
<button data-action="custom-form#addField:prevent" class="btn btn-primary">
    {{ 'button_add_form_field'|trans({}, 'admin') }}
</button>

<div class="card">
    <div class="card-footer text-right">
        {% if action == 'create' %}
            <button type="submit" class="btn btn-primary">
                <i class="fa fa-plus"></i>
                {{ 'button_create_custom_form'|trans({}, 'admin') }}
            </button>
        {% else %}
            <twig:FormSubmitButtonsComponent/>
        {% endif %}
    </div>
</div>
{{ form_row(form._token) }}
{{ form_end(form, {'render_rest': false}) }}

{% macro printFormField(formField) %}
    <div class="collection-item col-12 draggable">
        <div class="card">
            <div class="card-header text-right">
                <button class="btn btn-outline-info drag-handler" title="{{ 'help_move'|trans({}, 'admin') }}">
                    <i class="fa-solid fa-up-down"></i>
                </button>
                <button data-action="custom-form#removeField:prevent" class="btn btn-danger">
                    <i class="fa fa-trash"></i>
                </button>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        {{ form_row(formField.type) }}
                    </div>
                    <div class="col-6">
                        {{ form_row(formField.gridCss) }}
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        {{ form_row(formField.isRequired) }}
                    </div>
                </div>
                {{ form_row(formField.customForm) }}
                {{ form_row(formField.position) }}

                {% if formField.formFieldTranslations is defined %}
                    {% if formField.formFieldTranslations|length > 0 %}
                        {% for formFieldTranslationForm in formField.formFieldTranslations %}
                            {{ showTranslationCard(formFieldTranslationForm) }}
                        {% endfor %}
                    {% else %}
                        <div class="alert alert-info">Žádné překlady nejsou k dispozici.</div>
                    {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
{% endmacro %}