174 lines
8.9 KiB
HTML
174 lines
8.9 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% trans "Delete Suggestion" %} - PX360{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.page-header-gradient {
|
|
background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f87171 100%);
|
|
color: white;
|
|
padding: 1.5rem 2rem;
|
|
border-radius: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
box-shadow: 0 10px 15px -3px rgba(220, 38, 38, 0.2);
|
|
}
|
|
.section-card {
|
|
background: white;
|
|
border-radius: 1rem;
|
|
border: 2px solid #e2e8f0;
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.section-card:hover {
|
|
border-color: #dc2626;
|
|
box-shadow: 0 10px 25px -5px rgba(220, 38, 38, 0.15);
|
|
}
|
|
.section-header {
|
|
padding: 1rem 1.5rem;
|
|
border-bottom: 2px solid #e2e8f0;
|
|
background: linear-gradient(to right, #f8fafc, #f1f5f9);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
.section-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 0.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page-header-gradient">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<div class="flex items-center gap-2 text-red-100 text-sm mb-2">
|
|
<a href="{% url 'feedback:feedback_list' %}" class="hover:text-white transition">{% trans "Suggestions" %}</a>
|
|
<i data-lucide="chevron-right" class="w-3 h-3"></i>
|
|
<a href="{% url 'feedback:feedback_detail' feedback.id %}" class="hover:text-white transition">{% trans "Detail" %}</a>
|
|
<i data-lucide="chevron-right" class="w-3 h-3"></i>
|
|
<span class="text-white">{% trans "Delete" %}</span>
|
|
</div>
|
|
<h1 class="text-2xl font-bold">{% trans "Delete Suggestion" %}</h1>
|
|
</div>
|
|
<a href="{% url 'feedback:feedback_detail' feedback.id %}" class="inline-flex items-center px-4 py-2.5 bg-white text-red-600 font-medium rounded-xl hover:bg-red-50 transition">
|
|
<i data-lucide="arrow-left" class="w-4 h-4 me-2"></i>{% trans "Back to Detail" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-2xl mx-auto space-y-6">
|
|
<div class="section-card">
|
|
<div class="section-header bg-red-50">
|
|
<div class="section-icon bg-red-500/20">
|
|
<i data-lucide="alert-triangle" class="w-5 h-5 text-red-600"></i>
|
|
</div>
|
|
<h5 class="text-lg font-semibold text-red-800">{% trans "Confirm Deletion" %}</h5>
|
|
</div>
|
|
<div class="p-6">
|
|
<div class="text-center py-4">
|
|
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<i data-lucide="trash-2" class="w-8 h-8 text-red-500"></i>
|
|
</div>
|
|
<h4 class="text-lg font-bold text-gray-800 mb-2">{% trans "Are you sure you want to delete this suggestion?" %}</h4>
|
|
<p class="text-sm text-slate-500">
|
|
{% trans "This action will soft delete the suggestion. It will be marked as deleted but remain in the database for audit purposes." %}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-slate-50 border border-slate-200 rounded-xl p-4 mt-4 space-y-0">
|
|
<div class="flex py-3 border-b border-slate-100">
|
|
<span class="text-sm font-semibold text-slate-500 w-36">{% trans "ID" %}</span>
|
|
<span class="text-sm text-gray-800 flex-1"><code class="bg-slate-100 px-2 py-0.5 rounded text-xs">{{ feedback.id|slice:":8" }}...</code></span>
|
|
</div>
|
|
<div class="flex py-3 border-b border-slate-100">
|
|
<span class="text-sm font-semibold text-slate-500 w-36">{% trans "Type" %}</span>
|
|
<span class="flex-1">
|
|
<span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase
|
|
{% if feedback.feedback_type == 'compliment' %}bg-green-100 text-green-700
|
|
{% elif feedback.feedback_type == 'suggestion' %}bg-cyan-100 text-cyan-700
|
|
{% else %}bg-slate-100 text-slate-600{% endif %}">
|
|
{{ feedback.get_feedback_type_display }}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div class="flex py-3 border-b border-slate-100">
|
|
<span class="text-sm font-semibold text-slate-500 w-36">{% trans "Title" %}</span>
|
|
<span class="text-sm text-gray-800 flex-1 font-bold">{{ feedback.title }}</span>
|
|
</div>
|
|
<div class="flex py-3 border-b border-slate-100">
|
|
<span class="text-sm font-semibold text-slate-500 w-36">{% trans "Contact" %}</span>
|
|
<span class="text-sm text-gray-800 flex-1">{{ feedback.get_contact_name }}</span>
|
|
</div>
|
|
<div class="flex py-3 border-b border-slate-100">
|
|
<span class="text-sm font-semibold text-slate-500 w-36">{% trans "Hospital" %}</span>
|
|
<span class="text-sm text-gray-800 flex-1">{{ feedback.hospital.name }}</span>
|
|
</div>
|
|
<div class="flex py-3 border-b border-slate-100">
|
|
<span class="text-sm font-semibold text-slate-500 w-36">{% trans "Status" %}</span>
|
|
<span class="flex-1">
|
|
<span class="px-2.5 py-1 rounded-full text-[10px] font-bold uppercase
|
|
{% if feedback.status == 'submitted' %}bg-blue-100 text-blue-700
|
|
{% elif feedback.status == 'reviewed' %}bg-orange-100 text-orange-700
|
|
{% elif feedback.status == 'acknowledged' %}bg-green-100 text-green-700
|
|
{% else %}bg-slate-100 text-slate-600{% endif %}">
|
|
{{ feedback.get_status_display }}
|
|
</span>
|
|
</span>
|
|
</div>
|
|
<div class="flex py-3">
|
|
<span class="text-sm font-semibold text-slate-500 w-36">{% trans "Created" %}</span>
|
|
<span class="text-sm text-gray-800 flex-1">{{ feedback.created_at|date:"F d, Y H:i" }}</span>
|
|
</div>
|
|
{% if feedback.rating %}
|
|
<div class="flex py-3 border-t border-slate-100">
|
|
<span class="text-sm font-semibold text-slate-500 w-36">{% trans "Rating" %}</span>
|
|
<span class="flex-1 flex items-center gap-1">
|
|
<span class="text-yellow-500">
|
|
{% for i in "12345" %}
|
|
{% if forloop.counter <= feedback.rating %}<i data-lucide="star" class="w-4 h-4 inline-block" style="fill:currentColor"></i>
|
|
{% else %}<i data-lucide="star" class="w-4 h-4 inline-block"></i>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</span>
|
|
<span class="text-xs text-slate-400 ml-1">({{ feedback.rating }}/5)</span>
|
|
</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-lg flex items-start gap-2">
|
|
<i data-lucide="alert-triangle" class="w-4 h-4 text-amber-600 flex-shrink-0 mt-0.5"></i>
|
|
<div class="text-sm text-amber-700">
|
|
<strong>{% trans "Warning:" %}</strong> {% trans "All associated responses and timeline entries will be preserved for audit purposes." %}
|
|
</div>
|
|
</div>
|
|
|
|
<form method="post" class="mt-6 flex gap-3">
|
|
{% csrf_token %}
|
|
<a href="{% url 'feedback:feedback_detail' feedback.id %}" class="flex-1 px-4 py-2.5 text-center border border-slate-200 text-slate-600 text-sm font-semibold rounded-xl hover:bg-slate-50 transition">
|
|
<i data-lucide="x-circle" class="w-4 h-4 inline-block me-1"></i> {% trans "Cancel" %}
|
|
</a>
|
|
<button type="submit" class="flex-1 px-4 py-2.5 bg-red-600 text-white text-sm font-semibold rounded-xl hover:bg-red-700 transition">
|
|
<i data-lucide="trash-2" class="w-4 h-4 inline-block me-1"></i> {% trans "Yes, Delete Suggestion" %}
|
|
</button>
|
|
</form>
|
|
|
|
<div class="text-center mt-4">
|
|
<span class="text-xs text-slate-400 flex items-center justify-center gap-1">
|
|
<i data-lucide="info" class="w-3 h-3"></i>
|
|
{% trans "Deleted suggestions can be restored by system administrators if needed." %}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|