{% extends "dashboard/layout.html" %}
{% block title %}{{ _('Deletion History – OnlineConvert') }}{% endblock %}
{% set active_page = 'deletion-history' %}

{% block dashboard_content %}
<div class="mb-5">
    <h1 class="text-xl font-bold text-gray-900 dark:text-white"><i class="fa fa-trash-clock mr-2 text-red-500"></i>{{ _('Deletion History') }}</h1>
    <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{{ _('A record of all files, conversions, and items deleted from your account — including those removed by admins or the auto-expiry system.') }}</p>
</div>

<div class="rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50 flex items-center justify-between">
        <h2 class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ _('Deletion Events') }}</h2>
        <span class="text-xs text-gray-400 dark:text-gray-500">{{ total }} {{ _('total') }}</span>
    </div>

    {% if entries %}
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('When') }}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Type') }}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Item Name') }}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Deleted by') }}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Role') }}</th>
                    <th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">{{ _('Size') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                {% for entry in entries %}
                {% set type_colors = {
                    'file': 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
                    'conversion': 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400',
                    'share': 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400',
                    'share_grant': 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400',
                    'team': 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400',
                    'team_member': 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
                    'user': 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
                } %}
                {% set role_colors = {
                    'admin': 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
                    'scheduler': 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400',
                    'user': 'bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-400',
                    'team_member': 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
                } %}
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 whitespace-nowrap text-xs">
                        {{ entry.deleted_at[:16].replace('T', ' ') if entry.deleted_at else '—' }}
                    </td>
                    <td class="px-4 py-3">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ type_colors.get(entry.entity_type, 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400') }}">
                            {{ entry.entity_type | replace('_', ' ') | title }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-gray-800 dark:text-gray-200 max-w-xs truncate" title="{{ entry.entity_name }}">
                        {{ entry.entity_name or '—' }}
                    </td>
                    <td class="px-4 py-3 text-gray-600 dark:text-gray-400 whitespace-nowrap text-xs">
                        {{ entry.actor_username or '—' }}
                        {% if entry.team_name %}
                        <span class="ml-1 text-gray-400 dark:text-gray-500"><i class="fa fa-users mr-0.5"></i>{{ entry.team_name }}</span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3">
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ role_colors.get(entry.actor_role, 'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-400') }}">
                            {{ entry.actor_role | title if entry.actor_role else '—' }}
                        </span>
                    </td>
                    <td class="px-4 py-3 text-gray-500 dark:text-gray-400 whitespace-nowrap text-xs">
                        {% if entry.file_size_bytes %}
                            {% set sz = entry.file_size_bytes %}
                            {% if sz >= 1073741824 %}{{ '%.1f' | format(sz / 1073741824) }} GB
                            {% elif sz >= 1048576 %}{{ '%.1f' | format(sz / 1048576) }} MB
                            {% elif sz >= 1024 %}{{ '%.0f' | format(sz / 1024) }} KB
                            {% else %}{{ sz }} B{% endif %}
                        {% else %}—{% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% if total_pages > 1 %}
    <div class="px-5 py-4 border-t border-gray-100 dark:border-gray-800 flex items-center justify-between">
        <p class="text-xs text-gray-500 dark:text-gray-400">
            {{ _('Page') }} {{ page }} {{ _('of') }} {{ total_pages }}
        </p>
        <div class="flex gap-2">
            {% if page > 1 %}
            <a href="?page={{ page - 1 }}" class="px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">{{ _('Previous') }}</a>
            {% endif %}
            {% if page < total_pages %}
            <a href="?page={{ page + 1 }}" class="px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">{{ _('Next') }}</a>
            {% endif %}
        </div>
    </div>
    {% endif %}

    {% else %}
    <div class="px-5 py-12 text-center">
        <i class="fa fa-trash text-4xl text-gray-300 dark:text-gray-700 mb-3 block"></i>
        <p class="text-sm text-gray-500 dark:text-gray-400">{{ _('No deletions recorded yet.') }}</p>
    </div>
    {% endif %}
</div>
{% endblock %}