{% 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 %}