{% extends "layout.html" %}
{% block title %}{% if is_create %}New {{ entity_label }}{% else %}Edit {{ entity_label }}{% endif %} — {{ admin_title }}{% endblock %}
{% block content %}
<div class="mb-6">
<a href="/admin/{{ entity_name }}/"
class="text-sm text-zinc-500 hover:text-zinc-900 transition-colors flex items-center gap-1 w-fit">
<i class="fa-solid fa-chevron-left text-xs"></i>
Back to {{ entity_label }}
</a>
</div>
<h1 class="text-2xl font-bold tracking-tight text-zinc-900 mb-6">
{% if is_create %}New {{ entity_label }}{% else %}Edit #{{ record_id }}{% endif %}
</h1>
<div class="bg-white rounded-md border border-zinc-200 shadow-sm p-8 max-w-2xl">
{% if errors["__all__"] %}
<div class="mb-5 rounded-md bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700 flex items-center gap-2">
<i class="fa-solid fa-circle-exclamation shrink-0"></i>
{{ errors["__all__"] }}
</div>
{% endif %}
<form method="post"
action="{% if is_create %}/admin/{{ entity_name }}/new{% else %}/admin/{{ entity_name }}/{{ record_id }}/{% endif %}"
enctype="multipart/form-data"
class="space-y-5">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
{% for field in fields %}
{% if not field.hidden and not field.list_only %}
<div>
<label class="block text-sm font-medium text-zinc-700 mb-1">
{{ field.label }}{% if field.required %} <span class="text-red-500">*</span>{% endif %}
</label>
{% if field.field_type == "Text" %}
<input type="text" name="{{ field.name }}"
value="{{ values[field.name] | default('') }}"
{% if field.readonly %}readonly{% endif %}
{% if field.required %}required{% endif %}
class="w-full border {% if errors[field.name] %}border-red-400{% else %}border-zinc-200{% endif %} rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-black focus:border-black{% if field.readonly %} bg-zinc-50 text-zinc-400{% endif %}" />
{% elif field.field_type == "TextArea" %}
<textarea name="{{ field.name }}" rows="4"
{% if field.readonly %}readonly{% endif %}
{% if field.required %}required{% endif %}
class="w-full border {% if errors[field.name] %}border-red-400{% else %}border-zinc-200{% endif %} rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-black focus:border-black{% if field.readonly %} bg-zinc-50 text-zinc-400{% endif %}">{{ values[field.name] | default('') }}</textarea>
{% elif field.field_type == "Email" %}
<input type="email" name="{{ field.name }}"
value="{{ values[field.name] | default('') }}"
{% if field.readonly %}readonly{% endif %}
{% if field.required %}required{% endif %}
class="w-full border {% if errors[field.name] %}border-red-400{% else %}border-zinc-200{% endif %} rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-black focus:border-black{% if field.readonly %} bg-zinc-50 text-zinc-400{% endif %}" />
{% elif field.field_type == "Password" %}
<input type="password" name="{{ field.name }}"
{% if field.readonly %}readonly{% endif %}
class="w-full border {% if errors[field.name] %}border-red-400{% else %}border-zinc-200{% endif %} rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-black focus:border-black" />
{% elif field.field_type == "Number" %}
<input type="number" name="{{ field.name }}"
value="{{ values[field.name] | default('') }}"
{% if field.readonly %}readonly{% endif %}
{% if field.required %}required{% endif %}
class="w-full border {% if errors[field.name] %}border-red-400{% else %}border-zinc-200{% endif %} rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-black focus:border-black{% if field.readonly %} bg-zinc-50 text-zinc-400{% endif %}" />
{% elif field.field_type == "Boolean" %}
<input type="checkbox" name="{{ field.name }}"
{% if values[field.name] %}checked{% endif %}
{% if field.readonly %}disabled{% endif %}
class="w-4 h-4 rounded border-zinc-300 text-black focus:ring-black" />
{% elif field.field_type == "Select" %}
<select name="{{ field.name }}"
{% if field.readonly %}disabled{% endif %}
class="w-full border {% if errors[field.name] %}border-red-400{% else %}border-zinc-200{% endif %} rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-black focus:border-black bg-white">
{% for opt in field.options %}
<option value="{{ opt.0 }}" {% if values[field.name] == opt.0 %}selected{% endif %}>{{ opt.1 }}</option>
{% endfor %}
</select>
{% elif field.field_type == "Date" %}
<input type="date" name="{{ field.name }}"
value="{{ values[field.name] | default('') }}"
{% if field.readonly %}readonly{% endif %}
class="w-full border {% if errors[field.name] %}border-red-400{% else %}border-zinc-200{% endif %} rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-black focus:border-black" />
{% elif field.field_type == "DateTime" %}
<input type="datetime-local" name="{{ field.name }}"
value="{{ values[field.name] | default('') }}"
{% if field.readonly %}readonly{% endif %}
class="w-full border {% if errors[field.name] %}border-red-400{% else %}border-zinc-200{% endif %} rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-black focus:border-black" />
{% elif field.field_type == "ManyToMany" %}
{# Alpine.js multi-select — stores selection as a JSON array in a hidden input #}
<div x-data="multiSelect"
data-options='{{ field.options | tojson }}'
data-selected='{{ field.selected_ids | tojson }}'
@click.outside="open = false"
class="relative">
<input type="hidden" :name="'{{ field.name }}'" :value="JSON.stringify(selected)" />
<button type="button" @click="open = !open"
class="w-full border {% if errors[field.name] %}border-red-400{% else %}border-zinc-200{% endif %} rounded-md px-3 py-2 text-sm text-left bg-white focus:outline-none focus:ring-1 focus:ring-black focus:border-black flex items-center justify-between">
<span x-text="selected.length === 0 ? 'Select…' : selected.map(label).join(', ')" class="truncate text-zinc-700"></span>
<i class="fa-solid fa-chevron-down text-zinc-400 text-xs ml-2 shrink-0" :class="open ? 'rotate-180' : ''" style="transition: transform .15s"></i>
</button>
<div x-show="open"
class="absolute z-20 mt-1 w-full bg-white border border-zinc-200 rounded-md shadow-lg max-h-60 overflow-y-auto">
<template x-for="opt in options" :key="opt[0]">
<label class="flex items-center gap-3 px-3 py-2 hover:bg-zinc-50 cursor-pointer text-sm">
<input type="checkbox" :value="opt[0]" :checked="selected.includes(opt[0])"
@change="toggle(opt[0])"
class="w-4 h-4 rounded border-zinc-300 text-black focus:ring-black" />
<span x-text="opt[1]" class="text-zinc-700"></span>
</label>
</template>
<p x-show="options.length === 0" class="px-3 py-2 text-sm text-zinc-400">No options available.</p>
</div>
</div>
{% elif field.field_type == "Json" %}
<textarea name="{{ field.name }}" rows="6"
{% if field.readonly %}readonly{% endif %}
class="w-full border {% if errors[field.name] %}border-red-400{% else %}border-zinc-200{% endif %} rounded-md px-3 py-2 text-sm font-mono focus:outline-none focus:ring-1 focus:ring-black focus:border-black{% if field.readonly %} bg-zinc-50 text-zinc-400{% endif %}">{{ values[field.name] | default('') }}</textarea>
{% elif field.field_type == "File" %}
{% if values[field.name] %}
<div class="mb-1 flex items-center gap-3 text-sm text-zinc-600">
<a href="{{ values[field.name] }}" target="_blank" class="underline hover:text-zinc-900">
{{ values[field.name] | basename }}
</a>
<label class="flex items-center gap-1 text-zinc-500 cursor-pointer">
<input type="checkbox" name="{{ field.name }}__clear" value="on"> Clear
</label>
</div>
{% endif %}
<input type="file" name="{{ field.name }}"{% if field.accept %} accept="{{ field.accept | join(',') }}"{% endif %}
class="block w-full text-sm text-zinc-500 file:mr-3 file:py-1 file:px-3 file:rounded file:border-0 file:text-sm file:bg-zinc-100 file:text-zinc-700 hover:file:bg-zinc-200 border {% if errors[field.name] %}border-red-400{% else %}border-zinc-200{% endif %} rounded-md p-1">
{% elif field.field_type == "Image" %}
{% if values[field.name] %}
<div class="mb-1 flex items-center gap-3">
<img src="{{ values[field.name] }}" class="h-24 w-auto rounded object-cover border border-zinc-200" alt="{{ field.label }} preview">
<label class="flex items-center gap-1 text-sm text-zinc-500 cursor-pointer">
<input type="checkbox" name="{{ field.name }}__clear" value="on"> Clear
</label>
</div>
{% endif %}
<input type="file" name="{{ field.name }}" accept="image/*"
class="block w-full text-sm text-zinc-500 file:mr-3 file:py-1 file:px-3 file:rounded file:border-0 file:text-sm file:bg-zinc-100 file:text-zinc-700 hover:file:bg-zinc-200 border {% if errors[field.name] %}border-red-400{% else %}border-zinc-200{% endif %} rounded-md p-1">
{% endif %}
{% if field.help_text %}
<p class="text-xs text-zinc-500 mt-1">{{ field.help_text }}</p>
{% endif %}
{% if errors[field.name] %}
<p class="text-xs text-red-600 mt-1 flex items-center gap-1">
<i class="fa-solid fa-circle-exclamation text-[10px]"></i>
{{ errors[field.name] }}
</p>
{% endif %}
</div>
{% endif %}
{% endfor %}
<div class="flex items-center gap-3 pt-4 border-t border-zinc-100">
<button type="submit"
class="px-6 py-2 bg-black text-white rounded-md text-sm font-semibold hover:bg-zinc-800 transition-colors">
Save
</button>
<a href="/admin/{{ entity_name }}/"
class="px-6 py-2 bg-zinc-100 text-zinc-700 rounded-md text-sm font-medium hover:bg-zinc-200 transition-colors">
Cancel
</a>
</div>
</form>
</div>
{% endblock %}