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

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

{% block extra_css %}
<style>
.page-header-gradient {
    background: linear-gradient(135deg, #005696 0%, #0069a8 50%, #007bbd 100%);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
}

.form-section {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}
.form-section:hover {
    border-color: #005696;
    box-shadow: 0 4px 12px rgba(0, 86, 150, 0.1);
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.form-control, .form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}
.form-control:focus, .form-select:focus {
    outline: none;
    border-color: #005696;
    box-shadow: 0 0 0 3px rgba(0, 86, 150, 0.1);
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: #005696;
    color: white;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}
.btn-primary:hover {
    background: #007bbd;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: white;
    color: #64748b;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-secondary:hover {
    background: #f1f5f9;
    border-color: #005696;
}
</style>
{% endblock %}

{% block content %}
<div class="p-6">
    <!-- 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="page-header-gradient">
        <div class="flex justify-between items-center">
            <div>
                <h1 class="text-2xl font-bold flex items-center gap-3">
                    <i data-lucide="tag" class="w-6 h-6"></i>
                    {{ title }}
                </h1>
            </div>
        </div>
    </div>

    <!-- Form Section -->
    <div class="max-w-2xl mx-auto">
        <div class="form-section">
            <form method="post">
                {% csrf_token %}
                
                <div class="mb-4">
                    <label class="form-label">{% trans "Name (English)" %} <span class="text-red-500">*</span></label>
                    {{ form.name_en }}
                    {% if form.name_en.errors %}
                    <div class="text-red-500 text-sm mt-1">{{ form.name_en.errors.0 }}</div>
                    {% endif %}
                </div>
                
                <div class="mb-4">
                    <label class="form-label">{% trans "Name (Arabic)" %}</label>
                    {{ form.name_ar }}
                    {% if form.name_ar.errors %}
                    <div class="text-red-500 text-sm mt-1">{{ form.name_ar.errors.0 }}</div>
                    {% endif %}
                </div>
                
                <div class="mb-4">
                    <label class="form-label">{% trans "Description" %}</label>
                    {{ form.description }}
                    {% if form.description.errors %}
                    <div class="text-red-500 text-sm mt-1">{{ form.description.errors.0 }}</div>
                    {% endif %}
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="form-label">{% 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 %}
                        <div class="text-red-500 text-sm mt-1">{{ form.icon.errors.0 }}</div>
                        {% endif %}
                    </div>
                    <div>
                        <label class="form-label">{% 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 %}
                        <div class="text-red-500 text-sm mt-1">{{ form.sort_order.errors.0 }}</div>
                        {% 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-200">
                    <a href="{% url 'observations:category_list' %}" class="btn-secondary">
                        <i data-lucide="arrow-left" class="w-4 h-4"></i>
                        {% trans "Cancel" %}
                    </a>
                    <button type="submit" class="btn-primary">
                        <i data-lucide="check-circle" class="w-4 h-4"></i>
                        {% trans "Save Category" %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
    
    // Add Tailwind classes to form inputs
    const inputs = document.querySelectorAll('input[type="text"], input[type="number"], textarea, select');
    inputs.forEach(input => {
        if (!input.classList.contains('form-control') && !input.classList.contains('form-check-input')) {
            input.classList.add('form-control');
        }
    });
});
</script>
{% endblock %}