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

{% block title %}{% if is_create %}{% trans "Create Template" %}{% else %}{% trans "Edit Template" %}{% endif %} - PX360{% endblock %}

{% block content %}
<!-- Back Button -->
<div class="mb-6">
    <a href="{% url 'projects:template_list' %}" class="inline-flex items-center gap-2 text-slate hover:text-navy transition">
        <i data-lucide="arrow-left" class="w-4 h-4"></i>
        <span class="text-sm font-medium">{% trans "Back to Templates" %}</span>
    </a>
</div>

<!-- Header -->
<header class="mb-6">
    <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
        <i data-lucide="layout-template" class="w-6 h-6"></i>
        {% if is_create %}{% trans "Create Project Template" %}{% else %}{% trans "Edit Project Template" %}{% endif %}
    </h1>
    <p class="text-sm text-slate mt-1">
        {% if is_create %}
            {% trans "Create a reusable template for quality improvement projects" %}
        {% else %}
            {% trans "Update template details and task templates" %}
        {% endif %}
    </p>
</header>

<div class="grid grid-cols-3 gap-6">
    <!-- Main Form -->
    <div class="col-span-2">
        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b">
                <h2 class="text-sm font-bold text-navy">{% trans "Template Information" %}</h2>
            </div>
            <div class="p-6">
                <form method="post" novalidate>
                    {% csrf_token %}
                    
                    <div class="grid grid-cols-2 gap-6">
                        <!-- Name -->
                        <div>
                            <label for="{{ form.name.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
                                {% trans "Template Name" %} <span class="text-red-500">*</span>
                            </label>
                            {{ form.name }}
                            {% if form.name.errors %}
                            <p class="text-red-500 text-xs mt-1">{{ form.name.errors.0 }}</p>
                            {% endif %}
                        </div>
                        
                        <!-- Is Active -->
                        <div>
                            <label for="{{ form.is_active.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
                                {% trans "Status" %}
                            </label>
                            {{ form.is_active }}
                            {% if form.is_active.errors %}
                            <p class="text-red-500 text-xs mt-1">{{ form.is_active.errors.0 }}</p>
                            {% endif %}
                        </div>
                    </div>

                    <!-- Description -->
                    <div class="mt-6">
                        <label for="{{ form.description.id_for_label }}" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
                            {% trans "Description" %}
                        </label>
                        {{ form.description }}
                        {% if form.description.errors %}
                        <p class="text-red-500 text-xs mt-1">{{ form.description.errors.0 }}</p>
                        {% endif %}
                    </div>

                    <!-- Task Templates Formset -->
                    <div class="mt-8">
                        <h3 class="text-sm font-bold text-navy mb-4 flex items-center gap-2">
                            <i data-lucide="check-square" class="w-4 h-4"></i>
                            {% trans "Task Templates" %}
                        </h3>
                        
                        {{ task_template_formset.management_form }}
                        
                        <div id="task-templates-container" class="space-y-4">
                            {% for task_form in task_template_formset %}
                            <div class="task-template-item bg-slate-50 rounded-xl p-4 border">
                                <div class="grid grid-cols-12 gap-4 items-start">
                                    <div class="col-span-5">
                                        <label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">
                                            {% trans "Task Title" %}
                                        </label>
                                        {{ task_form.title }}
                                        {% if task_form.title.errors %}
                                        <p class="text-red-500 text-[10px] mt-0.5">{{ task_form.title.errors.0 }}</p>
                                        {% endif %}
                                    </div>
                                    <div class="col-span-5">
                                        <label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">
                                            {% trans "Description" %}
                                        </label>
                                        {{ task_form.description }}
                                    </div>
                                    <div class="col-span-2 flex items-center gap-2 pt-5">
                                        {{ task_form.DELETE }}
                                        <button type="button" class="remove-task-btn p-2 text-red-600 hover:bg-red-50 rounded-lg transition" title="{% trans 'Remove' %}">
                                            <i data-lucide="trash-2" class="w-4 h-4"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        
                        <button type="button" id="add-task-btn" class="mt-4 bg-slate-100 text-slate px-4 py-2 rounded-xl text-xs font-bold hover:bg-slate-200 flex items-center gap-2 transition">
                            <i data-lucide="plus" class="w-3 h-3"></i> {% trans "Add Task Template" %}
                        </button>
                    </div>

                    <!-- Submit Buttons -->
                    <div class="flex items-center gap-3 mt-8 pt-6 border-t">
                        <button type="submit" class="bg-navy text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-navy/20 hover:bg-blue flex items-center gap-2 transition">
                            <i data-lucide="save" class="w-4 h-4"></i>
                            {% if is_create %}{% trans "Create Template" %}{% else %}{% trans "Save Changes" %}{% endif %}
                        </button>
                        <a href="{% url 'projects:template_list' %}" class="bg-slate-100 text-slate px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-slate-200 transition">
                            {% trans "Cancel" %}
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Sidebar -->
    <div class="col-span-1">
        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b">
                <h2 class="text-sm font-bold text-navy">{% trans "Help" %}</h2>
            </div>
            <div class="px-6 py-4 space-y-4">
                <div>
                    <h3 class="text-xs font-bold text-navy mb-1">{% trans "What are templates?" %}</h3>
                    <p class="text-xs text-slate">{% trans "Templates let you define standard project structures that can be reused across your organization." %}</p>
                </div>
                <div>
                    <h3 class="text-xs font-bold text-navy mb-1">{% trans "Task Templates" %}</h3>
                    <p class="text-xs text-slate">{% trans "Add common tasks that should be created automatically when using this template." %}</p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Handle task template removal
document.querySelectorAll('.remove-task-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const item = this.closest('.task-template-item');
        const deleteCheckbox = item.querySelector('input[name$="-DELETE"]');
        if (deleteCheckbox) {
            deleteCheckbox.checked = true;
            item.style.display = 'none';
        }
    });
});

// Add new task template (simplified - in production you'd clone an empty form)
document.getElementById('add-task-btn')?.addEventListener('click', function() {
    const container = document.getElementById('task-templates-container');
    const totalForms = document.querySelector('#id_tasktemplate_set-TOTAL_FORMS');
    const formCount = parseInt(totalForms.value);
    
    const newForm = document.createElement('div');
    newForm.className = 'task-template-item bg-slate-50 rounded-xl p-4 border';
    newForm.innerHTML = `
        <div class="grid grid-cols-12 gap-4 items-start">
            <div class="col-span-5">
                <label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">Task Title</label>
                <input type="text" name="tasktemplate_set-${formCount}-title" class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm">
            </div>
            <div class="col-span-5">
                <label class="block text-[10px] font-bold text-slate uppercase tracking-wider mb-1">Description</label>
                <input type="text" name="tasktemplate_set-${formCount}-description" class="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm">
            </div>
            <div class="col-span-2 flex items-center gap-2 pt-5">
                <input type="checkbox" name="tasktemplate_set-${formCount}-DELETE" style="display:none">
                <button type="button" class="remove-task-btn p-2 text-red-600 hover:bg-red-50 rounded-lg transition" title="Remove">
                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                </button>
            </div>
        </div>
    `;
    
    container.appendChild(newForm);
    totalForms.value = formCount + 1;
    
    // Initialize lucide icons for new elements
    if (window.lucide) {
        window.lucide.createIcons();
    }
    
    // Add remove handler
    newForm.querySelector('.remove-task-btn').addEventListener('click', function() {
        newForm.remove();
    });
});
</script>
{% endblock %}