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

{% block title %}{% trans "Save as Template" %} - PX360{% endblock %}

{% block content %}
<!-- Back Button -->
<div class="mb-6">
    <a href="{% url 'projects:project_detail' pk=project.pk %}" 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 Project" %}</span>
    </a>
</div>

<!-- Header -->
<header class="mb-6">
    <h1 class="text-2xl font-bold text-navy flex items-center gap-3">
        <i data-lucide="copy" class="w-6 h-6 text-purple-600"></i>
        {% trans "Save Project as Template" %}
    </h1>
    <p class="text-sm text-slate mt-1">
        {% trans "Create a reusable template from" %} <strong>{{ project.name }}</strong>
    </p>
</header>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Form -->
    <div class="lg:col-span-2">
        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b bg-slate-50">
                <h2 class="text-sm font-bold text-navy">{% trans "Template Information" %}</h2>
            </div>
            <div class="p-6">
                <form method="post" novalidate>
                    {% csrf_token %}
                    
                    <!-- Template Name -->
                    <div class="mb-6">
                        <label for="template_name" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
                            {% trans "Template Name" %} <span class="text-red-500">*</span>
                        </label>
                        <input type="text" 
                               name="template_name" 
                               id="template_name"
                               class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm"
                               value="{{ suggested_name }}"
                               placeholder="{% trans 'Enter template name' %}">
                        <p class="text-xs text-slate mt-1">{% trans "Give your template a descriptive name" %}</p>
                    </div>

                    <!-- Template Description -->
                    <div class="mb-6">
                        <label for="template_description" class="block text-xs font-bold text-slate uppercase tracking-wider mb-2">
                            {% trans "Description" %}
                        </label>
                        <textarea name="template_description" 
                                  id="template_description"
                                  rows="4"
                                  class="w-full px-4 py-2.5 rounded-xl border border-slate-200 focus:border-navy focus:ring-2 focus:ring-navy/20 transition text-sm resize-none"
                                  placeholder="{% trans 'Describe when and how this template should be used...' %}">{{ project.description }}</textarea>
                    </div>

                    <!-- Global Template Option (PX Admin only) -->
                    {% if user.is_px_admin %}
                    <div class="mb-6">
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" 
                                   name="make_global" 
                                   id="make_global"
                                   class="w-5 h-5 rounded border-slate-300 text-navy focus:ring-navy">
                            <div>
                                <span class="text-sm font-medium text-navy">{% trans "Make this a global template" %}</span>
                                <p class="text-xs text-slate">{% trans "Available to all hospitals in the system" %}</p>
                            </div>
                        </label>
                    </div>
                    {% endif %}

                    <!-- Submit Buttons -->
                    <div class="flex items-center gap-3 pt-6 border-t">
                        <button type="submit" class="bg-purple-600 text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-purple/20 hover:bg-purple-700 flex items-center gap-2 transition">
                            <i data-lucide="copy" class="w-4 h-4"></i>
                            {% trans "Save as Template" %}
                        </button>
                        <a href="{% url 'projects:project_detail' pk=project.pk %}" 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>

    <!-- Preview Sidebar -->
    <div class="lg:col-span-1">
        <!-- Project Info -->
        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden mb-6">
            <div class="px-6 py-4 border-b bg-slate-50">
                <h2 class="text-sm font-bold text-navy">{% trans "Project Preview" %}</h2>
            </div>
            <div class="p-6">
                <div class="mb-4">
                    <span class="text-xs font-bold text-slate uppercase">{% trans "Original Project" %}</span>
                    <p class="text-sm font-medium text-navy mt-1">{{ project.name }}</p>
                </div>
                
                <div class="mb-4">
                    <span class="text-xs font-bold text-slate uppercase">{% trans "Hospital" %}</span>
                    <p class="text-sm text-navy mt-1">{{ project.hospital.name }}</p>
                </div>

                {% if project.department %}
                <div class="mb-4">
                    <span class="text-xs font-bold text-slate uppercase">{% trans "Department" %}</span>
                    <p class="text-sm text-navy mt-1">{{ project.department.name }}</p>
                </div>
                {% endif %}

                <div class="mb-0">
                    <span class="text-xs font-bold text-slate uppercase">{% trans "Tasks to Include" %}</span>
                    <p class="text-sm text-navy mt-1">{{ project.tasks.count }} {% trans "task(s)" %}</p>
                </div>
            </div>
        </div>

        <!-- Tasks Preview -->
        {% if project.tasks.exists %}
        <div class="bg-white rounded-2xl border shadow-sm overflow-hidden">
            <div class="px-6 py-4 border-b bg-slate-50">
                <h2 class="text-sm font-bold text-navy">{% trans "Tasks that will be copied" %}</h2>
            </div>
            <div class="p-0">
                <ul class="divide-y divide-slate-100">
                    {% for task in project.tasks.all %}
                    <li class="px-6 py-3">
                        <div class="flex items-start gap-3">
                            <i data-lucide="check-square" class="w-4 h-4 text-slate mt-0.5 flex-shrink-0"></i>
                            <div>
                                <p class="text-sm font-medium text-navy">{{ task.title }}</p>
                                {% if task.description %}
                                <p class="text-xs text-slate mt-1">{{ task.description|truncatechars:60 }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}