{% extends "common/base.html" %}
{% from 'components/header.html' import header %}

{% block title %}Trash - DocuPulse{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/trash.css', v=config.CSS_VERSION) }}">
{% endblock %}

{% block content %}
{{ header(
    title="Trash",
    description="View and manage deleted files. Files in trash will be permanently deleted after 30 days.",
    button_text="Empty Trash" if current_user.is_admin else "",
    button_url="#" if current_user.is_admin else "",
    icon="fa-trash",
    button_class="btn-danger" if current_user.is_admin else "",
    button_icon=""
) }}

<div class="container-fluid py-4">
    <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center bg-white">
            <div class="d-flex align-items-center gap-3">
                <div class="btn-group btn-group-sm" role="group" style="margin-right: 0.5rem;">
                    <button type="button" id="gridViewBtn" class="btn btn-outline-secondary active" onclick="toggleView('grid')">
                        <i class="fas fa-th-large"></i>
                    </button>
                    <button type="button" id="listViewBtn" class="btn btn-outline-secondary" onclick="toggleView('list')">
                        <i class="fas fa-list"></i>
                    </button>
                </div>
                <h5 class="mb-0">Files</h5>
            </div>
        </div>
        <div class="card-body">
            {% include 'components/search_bar.html' %}
            <div id="fileGrid" class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4"></div>
            <div id="fileError" class="text-danger mt-2"></div>
        </div>
    </div>
</div>

{% include 'components/details_modal.html' %}
{% include 'components/permanent_delete_modal.html' %}
{% include 'components/empty_trash_modal.html' %}
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/file-grid.js', v=config.CSS_VERSION) }}"></script>
<script src="{{ url_for('static', filename='js/trash.js', v=config.CSS_VERSION) }}"></script>
<script>
    // Add event logging for trash actions
    document.addEventListener('DOMContentLoaded', function() {
        // Log when trash page is viewed
        fetch('/api/events/log', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify({
                event_type: 'trash_view',
                details: {
                    user_id: '{{ current_user.id }}',
                    timestamp: new Date().toISOString()
                }
            })
        });

        // Log when empty trash is clicked
        const emptyTrashBtn = document.querySelector('.header-button');
        if (emptyTrashBtn) {
            emptyTrashBtn.addEventListener('click', function() {
                fetch('/api/events/log', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': '{{ csrf_token }}'
                    },
                    body: JSON.stringify({
                        event_type: 'trash_empty_click',
                        details: {
                            user_id: '{{ current_user.id }}',
                            timestamp: new Date().toISOString()
                        }
                    })
                });
            });
        }

        // Log when trash is actually emptied
        const confirmEmptyTrashBtn = document.getElementById('confirmEmptyTrash');
        if (confirmEmptyTrashBtn) {
            confirmEmptyTrashBtn.addEventListener('click', function() {
                fetch('/api/events/log', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': '{{ csrf_token }}'
                    },
                    body: JSON.stringify({
                        event_type: 'trash_emptied',
                        details: {
                            user_id: '{{ current_user.id }}',
                            timestamp: new Date().toISOString()
                        }
                    })
                });
            });
        }
    });
</script>
{% endblock %}