{% if is_new_model %}
<div class="model-block border border-gray-200 rounded-lg overflow-hidden">
  <div class="bg-gray-50 px-4 py-3 flex items-center justify-between border-b border-gray-200">
    <div class="flex items-center gap-3">
      <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"/></svg>
      <input type="text" name="model_name[]" value="{{ model.name }}" placeholder="table_name"
             class="border border-gray-300 rounded-md px-2.5 py-1.5 text-sm font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 w-48" />
      <input type="hidden" name="model_type[]" value="{{ model.type or 'table' }}" />
    </div>
    <div class="flex items-center gap-2">
      <button type="button" onclick="addFieldToModel(this)"
              class="inline-flex items-center gap-1 text-xs font-medium text-indigo-600 hover:text-indigo-700 px-2 py-1 rounded hover:bg-indigo-50 transition-colors">
        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
        Field
      </button>
      <button type="button" onclick="this.closest('.model-block').remove()"
              class="text-gray-400 hover:text-red-500 transition-colors p-1">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
      </button>
    </div>
  </div>
  <div class="fields-container">
    <div class="fields-body px-4 py-6 text-center text-sm text-gray-400">No fields yet. Click "+ Field" to add one.</div>
  </div>
</div>
{% else %}
<tr class="field-row hover:bg-gray-50/50">
  <td class="px-4 py-2">
    <input type="hidden" name="field_model[]" value="{{ model_name }}" />
    <input type="text" name="field_name[]" value="{{ field.name }}" placeholder="column_name"
           class="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500" />
  </td>
  <td class="px-4 py-2">
    <select name="field_type[]" class="w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
      {% for ft in ["text", "integer", "float", "boolean", "timestamp", "date", "uuid", "json", "binary", "array"] %}
      <option value="{{ ft }}" {% if field.type == ft %}selected{% endif %}>{{ ft }}</option>
      {% endfor %}
    </select>
  </td>
  <td class="px-4 py-2 text-center">
    <input type="hidden" name="field_required[]" value="{{ 'true' if field.required else 'false' }}" />
    <button type="button" onclick="toggleCheckbox(this)"
            class="w-5 h-5 rounded border {% if field.required %}bg-indigo-600 border-indigo-600{% else %}border-gray-300 bg-white{% endif %} flex items-center justify-center transition-colors mx-auto">
      {% if field.required %}<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>{% endif %}
    </button>
  </td>
  <td class="px-4 py-2 text-center">
    <input type="hidden" name="field_unique[]" value="{{ 'true' if field.unique else 'false' }}" />
    <button type="button" onclick="toggleCheckbox(this)"
            class="w-5 h-5 rounded border {% if field.unique %}bg-indigo-600 border-indigo-600{% else %}border-gray-300 bg-white{% endif %} flex items-center justify-center transition-colors mx-auto">
      {% if field.unique %}<svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>{% endif %}
    </button>
  </td>
  <td class="px-4 py-2 text-center">
    <button type="button" onclick="this.closest('.field-row').remove()"
            class="text-gray-400 hover:text-red-500 transition-colors">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
    </button>
  </td>
</tr>
{% endif %}