{% extends "layouts/base.html" %}
{% load i18n %}
{% load static %}

{% block title %}{{ title }} - {% trans "Observation Categories" %} - PX360{% endblock %}

{% block content %}
<!-- Breadcrumb -->
<nav class="mb-4">
    <ol class="flex items-center gap-2 text-sm text-slate">
        <li><a href="{% url 'observations:observation_list' %}" class="text-blue hover:text-navy font-medium">{% trans "Observations" %}</a></li>
        <li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
        <li><a href="{% url 'observations:category_list' %}" class="text-blue hover:text-navy font-medium">{% trans "Categories" %}</a></li>
        <li><i data-lucide="chevron-right" class="w-4 h-4 text-slate"></i></li>
        <li class="text-navy font-semibold">{{ title }}</li>
    </ol>
</nav>

<!-- Page Header -->
<div class="bg-gradient-to-r from-navy to-blue text-white p-6 rounded-2xl mb-6 shadow-lg">
    <h1 class="text-2xl font-bold flex items-center gap-3">
        <i data-lucide="tag" class="w-6 h-6"></i>
        {{ title }}
    </h1>
</div>

<!-- Form Section -->
<div class="max-w-2xl mx-auto">
    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
        <form method="post">
            {% csrf_token %}

            <div class="mb-4">
                <label class="block text-sm font-semibold text-slate mb-2">{% trans "Name (English)" %} <span class="text-red-500">*</span></label>
                {{ form.name_en }}
                {% if form.name_en.errors %}
                <p class="text-red-500 text-sm mt-1">{{ form.name_en.errors.0 }}</p>
                {% endif %}
            </div>

            <div class="mb-4">
                <label class="block text-sm font-semibold text-slate mb-2">{% trans "Name (Arabic)" %}</label>
                {{ form.name_ar }}
                {% if form.name_ar.errors %}
                <p class="text-red-500 text-sm mt-1">{{ form.name_ar.errors.0 }}</p>
                {% endif %}
            </div>

            <div class="mb-4">
                <label class="block text-sm font-semibold text-slate mb-2">{% trans "Description" %}</label>
                {{ form.description }}
                {% if form.description.errors %}
                <p class="text-red-500 text-sm mt-1">{{ form.description.errors.0 }}</p>
                {% endif %}
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
                    <label class="block text-sm font-semibold text-slate mb-2">{% trans "Icon" %}</label>
                    {{ form.icon }}
                    <p class="text-xs text-slate mt-1">
                        {% trans "Bootstrap icon class, e.g., bi-exclamation-triangle" %}
                        <br>
                        <a href="https://icons.getbootstrap.com/" target="_blank" class="text-blue hover:underline">{% trans "Browse icons" %}</a>
                    </p>
                    {% if form.icon.errors %}
                    <p class="text-red-500 text-sm mt-1">{{ form.icon.errors.0 }}</p>
                    {% endif %}
                </div>
                <div>
                    <label class="block text-sm font-semibold text-slate mb-2">{% trans "Sort Order" %}</label>
                    {{ form.sort_order }}
                    <p class="text-xs text-slate mt-1">{% trans "Lower numbers appear first" %}</p>
                    {% if form.sort_order.errors %}
                    <p class="text-red-500 text-sm mt-1">{{ form.sort_order.errors.0 }}</p>
                    {% endif %}
                </div>
            </div>

            <div class="mb-6">
                <label class="flex items-center gap-2 cursor-pointer">
                    {{ form.is_active }}
                    <span class="text-sm font-medium text-navy">{% trans "Active" %}</span>
                </label>
                <p class="text-xs text-slate mt-1">{% trans "Inactive categories won't appear in the public form" %}</p>
            </div>

            <div class="flex justify-between items-center pt-4 border-t border-slate-100">
                <a href="{% url 'observations:category_list' %}" class="px-4 py-2.5 border-2 border-slate-200 text-slate rounded-xl text-sm font-semibold hover:bg-slate-50 transition inline-flex items-center gap-2">
                    <i data-lucide="arrow-left" class="w-4 h-4"></i>
                    {% trans "Cancel" %}
                </a>
                <button type="submit" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-blue transition inline-flex items-center gap-2">
                    <i data-lucide="check-circle" class="w-4 h-4"></i>
                    {% trans "Save Category" %}
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}