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

{% block title %}{{ template.name }} - {% trans "Template" %} - 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">
    <div class="flex justify-between items-start">
        <div>
            <div class="flex items-center gap-3 mb-2">
                <h1 class="text-2xl font-bold text-navy">{{ template.name }}</h1>
                {% if not template.hospital %}
                <span class="bg-blue-100 text-blue-800 text-xs font-bold px-3 py-1 rounded-full">
                    {% trans "Global" %}
                </span>
                {% endif %}
            </div>
            {% if template.description %}
            <p class="text-sm text-slate max-w-2xl">{{ template.description|linebreaksbr }}</p>
            {% endif %}
        </div>
        <div class="flex items-center gap-3">
            <a href="{% url 'projects:project_create' %}?template={{ template.pk }}" 
               class="bg-green-600 text-white px-4 py-2 rounded-xl text-sm font-bold hover:bg-green-700 flex items-center gap-2 transition">
                <i data-lucide="plus-circle" class="w-4 h-4"></i> {% trans "Use Template" %}
            </a>
            <a href="{% url 'projects:template_edit' pk=template.pk %}" 
               class="bg-white text-blue border-2 border-blue/30 px-4 py-2 rounded-xl text-sm font-bold hover:bg-blue hover:text-white flex items-center gap-2 transition">
                <i data-lucide="pencil" class="w-4 h-4"></i> {% trans "Edit" %}
            </a>
            <a href="{% url 'projects:template_delete' pk=template.pk %}" 
               class="bg-white text-red-600 border-2 border-red-200 px-4 py-2 rounded-xl text-sm font-bold hover:bg-red-600 hover:text-white flex items-center gap-2 transition">
                <i data-lucide="trash-2" class="w-4 h-4"></i> {% trans "Delete" %}
            </a>
        </div>
    </div>
</header>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Main Content - Tasks -->
    <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 flex justify-between items-center">
                <h2 class="text-sm font-bold text-navy flex items-center gap-2">
                    <i data-lucide="check-square" class="w-4 h-4"></i>
                    {% trans "Template Tasks" %}
                </h2>
                <span class="bg-slate-100 text-slate text-xs font-bold px-2 py-1 rounded">
                    {{ tasks.count }} {% trans "tasks" %}
                </span>
            </div>
            <div class="p-0">
                {% if tasks %}
                <ul class="divide-y divide-slate-100">
                    {% for task in tasks %}
                    <li class="px-6 py-4">
                        <div class="flex items-start gap-4">
                            <div class="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center flex-shrink-0">
                                <span class="text-sm font-bold text-slate">{{ forloop.counter }}</span>
                            </div>
                            <div class="flex-1">
                                <h3 class="text-sm font-medium text-navy">{{ task.title }}</h3>
                                {% if task.description %}
                                <p class="text-sm text-slate mt-1">{{ task.description|linebreaksbr }}</p>
                                {% endif %}
                            </div>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
                {% else %}
                <div class="p-8 text-center">
                    <i data-lucide="check-square" class="w-12 h-12 text-slate-200 mx-auto mb-3"></i>
                    <p class="text-slate">{% trans "No tasks in this template" %}</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Sidebar - Template Info -->
    <div class="lg:col-span-1">
        <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 "Template Info" %}</h2>
            </div>
            <div class="p-6">
                <div class="mb-4">
                    <span class="text-xs font-bold text-slate uppercase">{% trans "Scope" %}</span>
                    <p class="text-sm font-medium text-navy mt-1">
                        {% if template.hospital %}
                            {{ template.hospital.name }}
                        {% else %}
                            {% trans "Global (All Hospitals)" %}
                        {% endif %}
                    </p>
                </div>

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

                {% if template.target_completion_date %}
                <div class="mb-4">
                    <span class="text-xs font-bold text-slate uppercase">{% trans "Suggested Timeline" %}</span>
                    <p class="text-sm font-medium text-navy mt-1">
                        {{ template.target_completion_date|date:"M d, Y" }}
                    </p>
                </div>
                {% endif %}

                <div class="mb-0">
                    <span class="text-xs font-bold text-slate uppercase">{% trans "Created" %}</span>
                    <p class="text-sm text-slate mt-1">{{ template.created_at|date:"M d, Y" }}</p>
                </div>
            </div>
        </div>

        <!-- Usage Card -->
        <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-2xl border border-blue-100 overflow-hidden">
            <div class="p-6">
                <h3 class="text-sm font-bold text-navy mb-2">{% trans "How to use this template" %}</h3>
                <p class="text-xs text-slate mb-4">
                    {% trans "Click the button below to create a new QI project based on this template. All tasks will be copied to the new project." %}
                </p>
                <a href="{% url 'projects:project_create' %}?template={{ template.pk }}" 
                   class="block w-full bg-navy text-white text-center px-4 py-3 rounded-xl text-sm font-bold hover:bg-blue transition">
                    <i data-lucide="copy" class="w-4 h-4 inline mr-1"></i>
                    {% trans "Create Project from Template" %}
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}