Apply header component to all pages

templates/rooms/room.html

@@ -1,16 +1,21 @@
 {% extends "common/base.html" %}
+{% from "components/header.html" import header %}
 
 {% block title %}Room - DocuPulse{% endblock %}
 
 {% block content %}
 <meta name="csrf-token" content="{{ csrf_token }}">
+{{ header(
+    title=room.name,
+    description=room.description or 'No description',
+    button_text="Back to Rooms",
+    button_url=url_for('rooms.rooms'),
+    icon="fa-door-open",
+    button_class="btn-outline-secondary",
+    button_icon="fa-arrow-left"
+) }}
+
 <div class="container mt-4">
-    <div class="row mb-4">
-        <div class="col">
-            <h2>{{ room.name }}</h2>
-            <div class="text-muted">{{ room.description or 'No description' }}</div>
-        </div>
-    </div>
     <div class="card shadow-sm mb-4">
         <div class="card-header d-flex justify-content-between align-items-center bg-white">
             <div class="d-flex align-items-center gap-3">