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

{% block title %}Trash - DocuPulse{% 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",
    button_url="#",
    icon="fa-trash",
    button_class="btn-danger",
    button_icon=""
) }}

<div class="container-fluid py-4">
    <div class="card shadow-sm">
        <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') }}"></script>
<script>
    // Update the empty trash button click handler
    document.querySelector('a[href="#"]').addEventListener('click', function(e) {
        e.preventDefault();
        showEmptyTrashModal();
    });
</script>
{% endblock %}