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

{% block title %}{% if template %}{% trans "Edit Template" %}{% else %}{% trans "New Template" %}{% endif %} - PX360{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <header class="mb-6">
        <div class="flex items-center gap-2 text-sm text-slate mb-2">
            <a href="{% url 'complaints:template_list' %}" class="hover:text-navy">{% trans "Templates" %}</a>
            <i data-lucide="chevron-right" class="w-4 h-4"></i>
            <span class="font-bold text-navy">{% if template %}{% trans "Edit" %}{% else %}{% trans "New" %}{% endif %}</span>
        </div>
        <h1 class="text-2xl font-bold text-navy">{% if template %}{% trans "Edit Template" %}{% else %}{% trans "Create Template" %}{% endif %}</h1>
    </header>

    <div class="bg-white rounded-2xl shadow-sm border border-slate-100 p-6">
        <form method="post" class="space-y-5">
            {% csrf_token %}

            <div>
                <label class="block text-sm font-semibold text-slate-700 mb-2">{% trans "Template Name" %}</label>
                <input type="text" name="name" required value="{{ template.name|default:'' }}"
                    class="w-full px-4 py-2.5 rounded-xl border-2 border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm"
                    placeholder="{% trans 'e.g., Service Delay Template' %}">
            </div>

            <div>
                <label class="block text-sm font-semibold text-slate-700 mb-2">{% trans "Category" %}</label>
                <select name="category" class="w-full px-4 py-2.5 rounded-xl border-2 border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm">
                    <option value="">{% trans "Select Category" %}</option>
                    {% for cat in categories %}
                        <option value="{{ cat.id }}" {% if template.category_id == cat.id %}selected{% endif %}>{{ cat.name_en|default:cat.name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div>
                <label class="block text-sm font-semibold text-slate-700 mb-2">{% trans "Title Pattern" %}</label>
                <input type="text" name="title_pattern" value="{{ template.title_pattern|default:'' }}"
                    class="w-full px-4 py-2.5 rounded-xl border-2 border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm"
                    placeholder="{% trans 'e.g., {department} - Service Delay' %}">
            </div>

            <div>
                <label class="block text-sm font-semibold text-slate-700 mb-2">{% trans "Default Description" %}</label>
                <textarea name="description" rows="4"
                    class="w-full px-4 py-2.5 rounded-xl border-2 border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm resize-none"
                    placeholder="{% trans 'Default complaint description text...' %}">{{ template.description|default:'' }}</textarea>
            </div>

            <div class="flex items-center gap-3 pt-4 border-t border-slate-100">
                <button type="submit" class="px-6 py-2.5 bg-navy text-white font-semibold rounded-xl hover:bg-blue transition text-sm">
                    {% if template %}{% trans "Update Template" %}{% else %}{% trans "Create Template" %}{% endif %}
                </button>
                <a href="{% url 'complaints:template_list' %}" class="px-6 py-2.5 bg-slate-100 text-slate-700 font-medium rounded-xl hover:bg-slate-200 transition text-sm">
                    {% trans "Cancel" %}
                </a>
            </div>
        </form>
    </div>
</div>
{% endblock %}