{# partials/inline_tabular.html — Tabular inline formset rendering #}

<div class="inline-formset"
     x-data="inlineFormset('{{ formset.prefix }}', 'tabular')"
     data-fields="{{ formset.fields | tojson }}"
     data-boolean-fields="{{ formset.boolean_fields | tojson }}"
     data-initial="{{ formset.initial | tojson | forceescape }}"
     data-field-metas="{{ formset.field_metas | map(attribute='name') | list | tojson }}">
  <div class="inline-formset__header" style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 8px 12px; background: var(--surface-inset); border-radius: var(--radius-md);">
    <h3 style="margin: 0; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-primary);">
      {{ formset.verbose_name_plural }}
    </h3>
    {% if formset.can_add %}
    <button type="button" @click="addForm()" class="btn btn-secondary btn-sm" style="margin: 0;">
      {{ icon("plus", size="16px") }} Add {{ formset.verbose_name }}
    </button>
    {% endif %}
  </div>

  {# Management form fields #}
  <input type="hidden" name="{{ formset.prefix }}-TOTAL_FORMS" :value="totalForms">
  <input type="hidden" name="{{ formset.prefix }}-INITIAL_FORMS" value="{{ formset.initial | length }}">
  <input type="hidden" name="{{ formset.prefix }}-MIN_NUM_FORMS" value="{{ formset.min_num }}">
  <input type="hidden" name="{{ formset.prefix }}-MAX_NUM_FORMS" value="{{ formset.max_num | default('') }}">

  {# Table #}
  <div style="overflow-x: auto; border: 1px solid var(--surface-border); border-radius: var(--radius-md);">
    <table style="width: 100%; border-collapse: collapse; font-size: var(--text-sm);">
      <thead>
        <tr style="background: var(--surface-inset); border-bottom: 1px solid var(--surface-border);">
          {% for field_meta in formset.field_metas %}
          <th style="padding: 10px 12px; text-align: left; font-weight: var(--font-medium); color: var(--text-secondary); white-space: nowrap;">
            {{ field_meta.label }}{% if field_meta.required %}<span style="color: var(--danger-500);">*</span>{% endif %}
          </th>
          {% endfor %}
          {% if formset.can_delete and formset.can_remove %}
          <th style="padding: 10px 12px; text-align: center; width: 80px; color: var(--text-secondary);">Delete</th>
          {% endif %}
        </tr>
      </thead>
      <tbody>
        <template x-for="(form, index) in forms" :key="form.id || ('new-' + index)">
          <tr :style="form._delete ? 'opacity: 0.5; background: var(--surface-inset);' : 'border-bottom: 1px solid var(--surface-border);'"
              style="transition: opacity 0.2s ease;">
            {% for field_meta in formset.field_metas %}
            <td style="padding: 8px 12px;">
              {% if loop.first %}<input type="hidden" :name="`${prefix}-${index}-id`" :value="form.id || ''">{% endif %}
              {% if field_meta.readonly or not formset.can_change %}
              {# Read-only field #}
              {% if field_meta.field_type == 'boolean' %}
              <span x-show="form.{{ field_meta.name }} === '1' || form.{{ field_meta.name }} === 'true' || form.{{ field_meta.name }} === true">{{ icon("check-circle", size="16px") }}</span>
              <span x-show="form.{{ field_meta.name }} !== '1' && form.{{ field_meta.name }} !== 'true' && form.{{ field_meta.name }} !== true">—</span>
              {% else %}
              <span x-text="form.{{ field_meta.name }} || '-'"></span>
              {% endif %}
              <input type="hidden" :name="`${prefix}-${index}-{{ field_meta.name }}`" :value="form.{{ field_meta.name }} || ''">

              {% elif field_meta.field_type == 'boolean' %}
              {# Boolean / Checkbox field #}
              <div style="display: flex; justify-content: center;">
                <input type="checkbox"
                       :name="`${prefix}-${index}-{{ field_meta.name }}`"
                       :checked="form.{{ field_meta.name }} === '1' || form.{{ field_meta.name }} === 'true' || form.{{ field_meta.name }} === true"
                       @change="form.{{ field_meta.name }} = $event.target.checked ? '1' : '0'"
                       style="cursor: pointer;">
              </div>

              {% elif field_meta.field_type == 'number' %}
              {# Number field #}
              <input type="number"
                     :name="`${prefix}-${index}-{{ field_meta.name }}`"
                     :value="form.{{ field_meta.name }} || ''"
                     @input="form.{{ field_meta.name }} = $event.target.value"
                     step="any"
                     {% if field_meta.required %}required{% endif %}
                     class="form-input" style="width: 100%; padding: 6px 8px; font-size: var(--text-sm);">

              {% elif field_meta.field_type == 'date' %}
              {# Date field #}
              <input type="date"
                     :name="`${prefix}-${index}-{{ field_meta.name }}`"
                     :value="form.{{ field_meta.name }} || ''"
                     @input="form.{{ field_meta.name }} = $event.target.value"
                     {% if field_meta.required %}required{% endif %}
                     class="form-input" style="width: 100%; padding: 6px 8px; font-size: var(--text-sm);">

              {% elif field_meta.field_type == 'datetime' %}
              {# DateTime field #}
              <input type="datetime-local"
                     :name="`${prefix}-${index}-{{ field_meta.name }}`"
                     :value="form.{{ field_meta.name }} || ''"
                     @input="form.{{ field_meta.name }} = $event.target.value"
                     {% if field_meta.required %}required{% endif %}
                     class="form-input" style="width: 100%; padding: 6px 8px; font-size: var(--text-sm);">

              {% elif field_meta.field_type == 'select' %}
              {# Select / Enum field #}
              <select :name="`${prefix}-${index}-{{ field_meta.name }}`"
                      @change="form.{{ field_meta.name }} = $event.target.value"
                      {% if field_meta.required %}required{% endif %}
                      class="form-input" style="width: 100%; padding: 6px 8px; font-size: var(--text-sm);">
                <option value="">Select...</option>
                {% for choice_value, choice_label in field_meta.choices or [] %}
                <option value="{{ choice_value }}"
                        :selected="form.{{ field_meta.name }} === '{{ choice_value }}'">{{ choice_label }}</option>
                {% endfor %}
              </select>

              {% elif field_meta.field_type == 'relation' %}
              {# Relation / ForeignKey field with search #}
              <div x-data="relationPicker(form.{{ field_meta.name }} || '', form._{{ field_meta.name }}_label || '', '{{ field_meta.search_url }}', true)"
                   style="position: relative;">
                <input type="hidden" :name="`${prefix}-${index}-{{ field_meta.name }}`" :value="selectedId">
                <div style="position: relative; display: flex; align-items: center;">
                  <input type="text" x-model="searchQuery" @input="search()" @click.outside="close()" @focus="open = true; if(fixed) _setPosition()"
                         x-ref="searchInput"
                         @keydown.escape="open = false"
                         placeholder="Search {{ field_meta.label | lower }}..."
                         class="form-input" style="width: 100%; padding: 6px 8px; padding-right: 30px; font-size: var(--text-sm);">
                  <button type="button" x-show="selectedId" @click="clear()"
                          style="position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-secondary); padding: 2px; display: flex; align-items: center; justify-content: center;"
                          title="Clear selection">
                    <span style="font-size: 14px;">&#x2715;</span>
                  </button>
                </div>
                {# Backdrop #}
                <div x-show="open && results.length > 0" x-cloak
                     @click="open = false"
                     style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99998; background: transparent;">
                </div>
                {# Dropdown #}
                <div x-show="open && results.length > 0" x-cloak
                     :style="fixed ? dropdownStyle : ''"
                     :class="fixed ? '' : 'relation-picker-dropdown'"
                     style="background: var(--surface-overlay); border: 1px solid var(--surface-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 200px; overflow-y: auto; min-width: 200px;">
                  <template x-for="result in results" :key="result.id">
                    <div @click="select(result)"
                         style="padding: 8px 12px; cursor: pointer; font-size: var(--text-sm); border-bottom: 1px solid var(--surface-border);"
                         @mouseenter="$el.style.background = 'var(--surface-hover)'"
                         @mouseleave="$el.style.background = 'transparent'">
                      <span x-text="result.label"></span>
                    </div>
                  </template>
                </div>
              </div>

              {% else %}
              {# Default: Text field #}
              <input type="text"
                     :name="`${prefix}-${index}-{{ field_meta.name }}`"
                     :value="form.{{ field_meta.name }} || ''"
                     @input="form.{{ field_meta.name }} = $event.target.value"
                     {% if field_meta.required %}required{% endif %}
                     placeholder="{{ field_meta.placeholder }}"
                     class="form-input" style="width: 100%; padding: 6px 8px; font-size: var(--text-sm);">
              {% endif %}
            </td>
            {% endfor %}
            {% if formset.can_delete and formset.can_remove %}
            <td style="padding: 8px 12px; text-align: center;">
              <input type="checkbox" :name="`${prefix}-${index}-DELETE`"
                     :checked="form._delete"
                     @change="form._delete = $event.target.checked"
                     style="cursor: pointer;">
            </td>
            {% endif %}
          </tr>
        </template>

        {# Empty state row #}
        <tr x-show="forms.length === 0">
          <td colspan="{{ formset.field_metas | length + (1 if formset.can_delete and formset.can_remove else 0) }}"
              style="padding: 24px; text-align: center; color: var(--text-secondary);">
            No {{ formset.verbose_name_plural | lower }} yet.{% if formset.can_add %} Click "Add {{ formset.verbose_name }}" to add one.{% endif %}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>