Apply header component to all pages

templates/trash/trash.html

@@ -1,16 +1,21 @@
 {% 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-header bg-white d-flex justify-content-between align-items-center">
-            <h5 class="mb-0"><i class="fas fa-trash me-2" style="color:#16767b;"></i>Trash</h5>
-            <button class="btn btn-danger btn-sm" onclick="showEmptyTrashModal()">
-                <i class="fas fa-trash me-1"></i>Empty Trash
-            </button>
-        </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>
@@ -26,4 +31,11 @@
 
 {% 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 %}