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

{% block title %}{% trans "Trash" %} - PX360{% endblock %}

{% block content %}
<div class="mb-6">
    <a href="{% url 'complaints:complaint_list' %}" class="inline-flex items-center gap-2 px-4 py-2 bg-white border-2 border-gray-200 rounded-xl font-semibold text-gray-500 hover:bg-gray-50 hover:border-navy transition">
        <i data-lucide="arrow-left" class="w-4 h-4"></i> {% trans "Back to Complaints" %}
    </a>
</div>

<div class="bg-gradient-to-r from-navy to-blue rounded-2xl p-6 text-white mb-6 shadow-lg">
    <div class="flex items-center gap-3">
        <div class="bg-white/20 p-3 rounded-xl">
            <i data-lucide="trash-2" class="w-6 h-6"></i>
        </div>
        <div>
            <h1 class="text-2xl font-bold">{% trans "Trash" %}</h1>
            <p class="text-white/80 text-sm mt-1">{% trans "Deleted complaints and observations" %}</p>
        </div>
    </div>
</div>

<!-- Deleted Complaints -->
{% if deleted_complaints %}
<section class="mb-8">
    <h2 class="text-xl font-bold text-navy mb-4 flex items-center gap-2">
        <i data-lucide="message-square-warning" class="w-5 h-5 text-red-500"></i>
        {% trans "Deleted Complaints" %} ({{ deleted_complaints|length }})
    </h2>
    <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">
        <table class="w-full">
            <thead>
                <tr class="bg-gray-50 border-b border-gray-200">
                    <th class="text-left px-4 py-3 text-xs font-bold text-gray-500 uppercase">{% trans "Reference" %}</th>
                    <th class="text-left px-4 py-3 text-xs font-bold text-gray-500 uppercase">{% trans "Title" %}</th>
                    <th class="text-left px-4 py-3 text-xs font-bold text-gray-500 uppercase">{% trans "Hospital" %}</th>
                    <th class="text-left px-4 py-3 text-xs font-bold text-gray-500 uppercase">{% trans "Deleted By" %}</th>
                    <th class="text-left px-4 py-3 text-xs font-bold text-gray-500 uppercase">{% trans "Deleted At" %}</th>
                    <th class="text-right px-4 py-3 text-xs font-bold text-gray-500 uppercase">{% trans "Actions" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for complaint in deleted_complaints %}
                <tr class="border-b border-gray-100 hover:bg-gray-50">
                    <td class="px-4 py-3 text-sm font-mono text-navy">{{ complaint.reference_number }}</td>
                    <td class="px-4 py-3 text-sm text-gray-700">{{ complaint.title|truncatechars:50 }}</td>
                    <td class="px-4 py-3 text-sm text-gray-500">{{ complaint.hospital.name }}</td>
                    <td class="px-4 py-3 text-sm text-gray-500">{{ complaint.deleted_by.get_full_name|default:"-" }}</td>
                    <td class="px-4 py-3 text-sm text-gray-500">{{ complaint.deleted_at|date:"M d, Y H:i" }}</td>
                    <td class="px-4 py-3 text-right">
                        <form method="post" action="{% url 'complaints:complaint_restore' pk=complaint.pk %}" class="inline">
                            {% csrf_token %}
                            <button type="submit" class="px-3 py-1.5 text-xs font-semibold text-emerald-600 border-2 border-emerald-200 rounded-lg hover:bg-emerald-50 transition">
                                <i data-lucide="undo-2" class="w-3 h-3 inline"></i> {% trans "Restore" %}
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</section>
{% endif %}

<!-- Deleted Observations -->
{% if deleted_observations %}
<section class="mb-8">
    <h2 class="text-xl font-bold text-navy mb-4 flex items-center gap-2">
        <i data-lucide="eye" class="w-5 h-5 text-purple-500"></i>
        {% trans "Deleted Observations" %} ({{ deleted_observations|length }})
    </h2>
    <div class="bg-white rounded-2xl border border-gray-200 overflow-hidden">
        <table class="w-full">
            <thead>
                <tr class="bg-gray-50 border-b border-gray-200">
                    <th class="text-left px-4 py-3 text-xs font-bold text-gray-500 uppercase">{% trans "Tracking Code" %}</th>
                    <th class="text-left px-4 py-3 text-xs font-bold text-gray-500 uppercase">{% trans "Description" %}</th>
                    <th class="text-left px-4 py-3 text-xs font-bold text-gray-500 uppercase">{% trans "Hospital" %}</th>
                    <th class="text-left px-4 py-3 text-xs font-bold text-gray-500 uppercase">{% trans "Deleted By" %}</th>
                    <th class="text-left px-4 py-3 text-xs font-bold text-gray-500 uppercase">{% trans "Deleted At" %}</th>
                    <th class="text-right px-4 py-3 text-xs font-bold text-gray-500 uppercase">{% trans "Actions" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for obs in deleted_observations %}
                <tr class="border-b border-gray-100 hover:bg-gray-50">
                    <td class="px-4 py-3 text-sm font-mono text-navy">{{ obs.tracking_code }}</td>
                    <td class="px-4 py-3 text-sm text-gray-700">{{ obs.description|truncatechars:50 }}</td>
                    <td class="px-4 py-3 text-sm text-gray-500">{{ obs.hospital.name }}</td>
                    <td class="px-4 py-3 text-sm text-gray-500">{{ obs.deleted_by.get_full_name|default:"-" }}</td>
                    <td class="px-4 py-3 text-sm text-gray-500">{{ obs.deleted_at|date:"M d, Y H:i" }}</td>
                    <td class="px-4 py-3 text-right">
                        <form method="post" action="{% url 'observations:observation_restore' pk=obs.pk %}" class="inline">
                            {% csrf_token %}
                            <button type="submit" class="px-3 py-1.5 text-xs font-semibold text-emerald-600 border-2 border-emerald-200 rounded-lg hover:bg-emerald-50 transition">
                                <i data-lucide="undo-2" class="w-3 h-3 inline"></i> {% trans "Restore" %}
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</section>
{% endif %}

{% if not deleted_complaints and not deleted_observations %}
<div class="text-center py-16">
    <i data-lucide="trash-2" class="w-16 h-16 mx-auto text-gray-200 mb-4"></i>
    <p class="text-gray-400 font-medium text-lg">{% trans "Trash is empty" %}</p>
    <p class="text-gray-300 text-sm mt-1">{% trans "Deleted complaints and observations will appear here." %}</p>
</div>
{% endif %}
{% endblock %}