{# Shared form sections for required, optional, and nested fields #}

{% if required_fields %}
{# field-grid lays these fields out in columns that fill the width. The class is
   this form's own: form-section is shared with the explorer's panel and the
   spec builder's fieldsets, which stack their controls and must keep doing so. #}
<div class="form-section field-grid">
    <h3 class="form-section-title">Required Fields</h3>
    {% for field in required_fields %}
    {% include "partials/field.html" %}
    {% endfor %}
</div>
{% endif %}

{% if optional_fields %}
<div class="collapsible{% if is_edit %} open{% endif %}">
    <div class="collapsible-header" data-testid="section-optional-toggle">
        <span class="collapsible-icon">&#9654;</span>
        <span>Optional Fields{% if optional_fields|length %} ({{ optional_fields|length }}){% endif %}</span>
    </div>
    <div class="collapsible-content">
        {% if optional_fields|length > 8 %}
        {# A wall of dozens of fields is unfindable by eye; filter by name or
           description. Shown only when the list is long enough to need it. #}
        <input type="text" class="form-input optional-filter" placeholder="Filter fields&hellip;"
               data-testid="optional-filter"
               oninput="const q=this.value.toLowerCase(); this.closest('.collapsible-content').querySelectorAll('.form-group').forEach(g=>{g.style.display = g.textContent.toLowerCase().includes(q) ? '' : 'none';});">
        {% endif %}
        {% for field in optional_fields %}
        {% include "partials/field.html" %}
        {% endfor %}
    </div>
</div>
{% endif %}

{% if is_edit and inline_tables %}
<div class="form-section">
    <h3 class="form-section-title">Related Entities</h3>
    {# Render tables for spec-defined nested fields #}
    {% for field in nested_fields %}
    {% set table_data = inline_tables.get(field.name, {}) %}
    {% set child_type = table_data.nested_entity_type if table_data else field.items %}
    {% if table_data %}
    {% include "partials/inline_table.html" with context %}
    {% else %}
    {% include "partials/field.html" %}
    {% endif %}
    {% endfor %}

    {# Render tables for reference-linked children (not in nested_fields) #}
    {% set nested_field_names = nested_fields | map(attribute='name') | list %}
    {% for field_name, table_data in inline_tables.items() %}
    {% if field_name not in nested_field_names and table_data.rows %}
    {% set field = {'name': field_name, 'items': table_data.nested_entity_type} %}
    {% set child_type = table_data.nested_entity_type %}
    {% include "partials/inline_table.html" with context %}
    {% endif %}
    {% endfor %}

    {# Add Child Entity buttons for tree-based children #}
    {% if child_entity_fields %}
    <div class="add-child-section" style="margin-top: 1rem; padding: 1rem; border: 1px dashed var(--border-color); border-radius: 4px;">
        <span class="text-muted" style="margin-right: 0.5rem;">Add child entity:</span>
        {% for child_field, child_type in child_entity_fields %}
        <button type="button" class="btn btn-sm btn-outline-primary"
                hx-get="/form/child/{{ node_id }}/{{ child_type }}?parent_field={{ child_field }}"
                hx-target="#main"
                hx-swap="innerHTML"
                style="margin-right: 0.25rem;"
                data-testid="btn-add-child-{{ child_field }}">
            + {{ child_field }} ({{ child_type }})
        </button>
        {% endfor %}
    </div>
    {% endif %}
</div>
{% elif nested_fields %}
<div class="form-section">
    <h3 class="form-section-title">Related Entities</h3>
    {% for field in nested_fields %}
    {% include "partials/field.html" %}
    {% endfor %}
</div>
{% endif %}