{% load i18n %}

{% if field_type_id == "OneToManyField" %}
    <div class="rounded-md border border-gray-200 bg-white p-3">
        <div class="mb-3 text-sm font-medium text-gray-900">
            {% trans "What should be preset for" %} {{ application_field.title }}?
        </div>

        <div class="grid gap-3 md:grid-cols-2">
            <label class="rounded-md border {% if mode == 'row_defaults' %}border-primary-300 bg-primary-50{% else %}border-gray-200 bg-white{% endif %} p-3">
                <div class="flex items-start gap-2">
                    <input
                        type="radio"
                        class="radio mt-1"
                        name="one_to_many_mode_{{ row_id }}"
                        value="row_defaults"
                        {% if mode == "row_defaults" %}checked{% endif %}
                        hx-get="{% url 'components_forms_initial_data_value' id=form.id %}?row_id={{ row_id }}"
                        hx-target="#initial-data-value-target-{{ row_id }}"
                        hx-trigger="change"
                        hx-include="#initial-data-field-{{ row_id }}"
                        hx-vals='{"one_to_many_mode": "row_defaults"}'
                    >
                    <div>
                        <div class="text-sm font-medium {% if mode == 'row_defaults' %}text-primary-950{% else %}text-gray-900{% endif %}">{% trans "Value on all rows" %}</div>
                        <div class="mt-1 text-xs {% if mode == 'row_defaults' %}text-primary-700{% else %}text-gray-500{% endif %}">{% trans "Every row gets this child field value." %}</div>
                    </div>
                </div>
            </label>

            <label class="rounded-md border {% if mode == 'initial_rows' %}border-primary-300 bg-primary-50{% else %}border-gray-200 bg-white{% endif %} p-3">
                <div class="flex items-start gap-2">
                    <input
                        type="radio"
                        class="radio mt-1"
                        name="one_to_many_mode_{{ row_id }}"
                        value="initial_rows"
                        {% if mode == "initial_rows" %}checked{% endif %}
                        hx-get="{% url 'components_forms_initial_data_value' id=form.id %}?row_id={{ row_id }}"
                        hx-target="#initial-data-value-target-{{ row_id }}"
                        hx-trigger="change"
                        hx-include="#initial-data-field-{{ row_id }}"
                        hx-vals='{"one_to_many_mode": "initial_rows"}'
                    >
                    <div>
                        <div class="text-sm font-medium {% if mode == 'initial_rows' %}text-primary-950{% else %}text-gray-900{% endif %}">{% trans "Initial rows" %}</div>
                        <div class="mt-1 text-xs {% if mode == 'initial_rows' %}text-primary-700{% else %}text-gray-500{% endif %}">{% trans "Create rows shown when the form opens." %}</div>
                    </div>
                </div>
            </label>
        </div>

        {% if mode == "initial_rows" %}
            <div class="mt-3 min-w-0">
                {{ table_layout_context.input }}
            </div>
        {% else %}
            <div class="mt-3 grid gap-3 md:grid-cols-[minmax(180px,260px)_minmax(0,1fr)]">
                <div>
                    <label class="mb-1 block text-xs font-medium text-gray-600" for="initial-data-child-field-{{ row_id }}">
                        {% trans "Select field" %}
                    </label>
                    <select
                        id="initial-data-child-field-{{ row_id }}"
                        class="select w-full"
                        name="child_field_{{ row_id }}"
                        hx-get="{% url 'components_forms_initial_data_value' id=form.id %}?row_id={{ row_id }}"
                        hx-target="#initial-data-value-target-{{ row_id }}"
                        hx-trigger="change"
                        hx-include="#initial-data-field-{{ row_id }}, input[name='one_to_many_mode_{{ row_id }}']:checked, this"
                    >
                        {% for child in child_fields %}
                            <option value="{{ child.name }}" {% if selected_child.name == child.name %}selected{% endif %}>{{ child.title }}</option>
                        {% empty %}
                            <option value="">{% trans "No editable child fields" %}</option>
                        {% endfor %}
                    </select>
                </div>

                <div>
                    <label class="mb-1 block text-xs font-medium text-gray-600">
                        {% trans "Input value" %}
                    </label>
                    {% if child_layout_context.input %}
                        {{ child_layout_context.input }}
                    {% else %}
                        <input class="input w-full" name="child_value">
                    {% endif %}
                </div>
            </div>
        {% endif %}
    </div>
{% else %}
    <div>
        <label class="mb-1 block text-xs font-medium text-gray-600">
            {% trans "Value" %}
        </label>
        {% if layout_context.input %}
            {{ layout_context.input }}
        {% else %}
            <input class="input w-full" name="{{ application_field.field }}">
        {% endif %}
    </div>
{% endif %}