148 lines
7.0 KiB
HTML
148 lines
7.0 KiB
HTML
{% 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 %}
|