{# Extract table data from context #}
{% set field_name = field.name %}
{% set columns = table_data.columns %}
{% set rows = table_data.rows %}
{% set column_types = table_data.column_types %}
{% set column_constraints = table_data.column_constraints %}
{% set required_columns = table_data.required_columns %}
{% set reference_fields = table_data.reference_fields %}
{% set parent_id_fields = table_data.parent_id_fields %}
{% set has_nested_children = table_data.has_nested_children %}
{% set parent_entity_type = entity_type %}

<div class="inline-table-section" id="inline-table-{{ field_name }}" data-testid="inline-table-{{ field_name }}">
    <div class="inline-table-header">
        <div class="inline-table-title" data-testid="inline-table-toggle-{{ field_name }}">
            <span class="inline-table-icon">&#9660;</span>
            <h4>{{ field_name|replace('_', ' ')|title }}</h4>
            <span class="inline-table-count">({{ rows|length }} items)</span>
        </div>
        <button type="button" class="btn btn-sm btn-primary"
                hx-post="/table/{{ parent_entity_type }}/{{ field_name }}/row"
                hx-target="#inline-table-body-{{ field_name }}"
                hx-swap="beforeend"
                data-testid="inline-add-row-{{ field_name }}">
            + Add
        </button>
    </div>
    <div class="inline-table-content">
        <table class="data-table inline-data-table"
               data-parent-type="{{ parent_entity_type }}"
               data-field-name="{{ field_name }}">
            <thead>
                <tr>
                    {% for col in columns %}
                    <th>
                        {{ col|replace('_', ' ')|title }}{% if required_columns and col in required_columns %}<span class="required">*</span>{% endif %}
                    </th>
                    {% endfor %}
                    <th style="width: 80px;">Actions</th>
                </tr>
            </thead>
            <tbody id="inline-table-body-{{ field_name }}">
                {% for row in rows %}
                <tr id="row-{{ field_name }}-{{ row._idx }}" data-idx="{{ row._idx }}">
                    {% for col in columns %}
                    {% set is_parent_id = parent_id_fields and col in parent_id_fields %}
                    <td class="editable-cell{% if is_parent_id %} readonly-cell{% endif %}" data-col="{{ col }}" data-row="{{ row._idx }}">
                        {% set col_type = column_types.get(col, 'string') if column_types else 'string' %}
                        {% set constraints = column_constraints.get(col, {}) if column_constraints else {} %}
                        {% set ref_info = reference_fields.get(col, {}) if reference_fields else {} %}
                        {% set show_lookup = ref_info and not is_parent_id %}
                        <span class="cell-display" data-testid="cell-display-{{ field_name }}-{{ row._idx }}-{{ col }}">{{ row.get(col, '')|display }}</span>
                        <div class="cell-input-wrapper{% if show_lookup %} has-lookup{% endif %}">
                            <input type="text"
                                   class="form-input cell-input{% if show_lookup %} lookup-input{% endif %}"
                                   name="{{ col }}"
                                   value="{{ row.get(col, '')|display }}"
                                   {% if is_parent_id %}
                                   readonly
                                   title="Auto-filled from parent"
                                   {% elif show_lookup %}
                                   data-lookup="{{ ref_info.target_entity }}"
                                   data-lookup-field="{{ ref_info.target_field }}"
                                   autocomplete="off"
                                   placeholder="Tab for options"
                                   title="Press Tab to see available {{ ref_info.target_entity }} values"
                                   {% endif %}
                                   {% if col_type == 'date' %}
                                   pattern="\d{4}-\d{2}-\d{2}"
                                   placeholder="YYYY-MM-DD"
                                   {% endif %}
                                   hx-post="/table/{{ parent_entity_type }}/{{ field_name }}/row/{{ row._idx }}/cell"
                                   hx-trigger="change"
                                   hx-swap="none"
                                   data-testid="inline-cell-{{ field_name }}-{{ row._idx }}-{{ col }}">
                            {% if show_lookup %}
                            <button type="button"
                                    class="lookup-btn"
                                    data-lookup="{{ ref_info.target_entity }}"
                                    data-input="inline-cell-{{ field_name }}-{{ row._idx }}-{{ col }}"
                                    title="Browse {{ ref_info.target_entity }}"
                                    data-testid="lookup-btn-{{ field_name }}-{{ row._idx }}-{{ col }}">
                                &#128269;
                            </button>
                            {% endif %}
                        </div>
                    </td>
                    {% endfor %}
                    <td class="row-actions">
                        {% if has_nested_children %}
                        <button type="button" class="btn btn-sm btn-secondary"
                                hx-get="/nested/{{ parent_entity_type }}/{{ field_name }}/{{ row._idx }}"
                                hx-target="#main"
                                hx-swap="innerHTML"
                                title="Edit nested items"
                                data-testid="inline-edit-{{ field_name }}-{{ row._idx }}">
                            Edit
                        </button>
                        {% endif %}
                        <button type="button" class="btn-icon danger"
                                hx-delete="/table/{{ parent_entity_type }}/{{ field_name }}/row/{{ row._idx }}"
                                hx-target="#row-{{ field_name }}-{{ row._idx }}"
                                hx-swap="delete"
                                title="Delete row"
                                data-testid="inline-delete-{{ field_name }}-{{ row._idx }}">
                            &#128465;
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% if rows|length == 0 %}
        <p class="text-muted text-center" style="padding: 1rem;">No items yet. Click "+ Add" to create one.</p>
        {% endif %}
    </div>
</div>