From 7e1e0ac4262d2c5d0e6ac6c2690d9c3f894e948d Mon Sep 17 00:00:00 2001
From: Georges Haddad <g.haddad@anatsecurity.fr>
Date: Fri, 10 Apr 2026 16:50:15 +0300
Subject: [PATCH] Mobile-friendly UI: hamburger nav, responsive layouts,
 restyle login/admin pages, fix iOS upload

---
 static/css/main.css          | 277 ++++++++++++++++++++++++++++++++++-
 static/css/review.css        |  25 ++++
 templates/base.html          |  15 +-
 templates/index.html         |   8 +-
 templates/login.html         |  26 ++--
 templates/person_detail.html |  10 +-
 templates/search.html        |  10 +-
 templates/users.html         | 100 ++++++-------
 8 files changed, 391 insertions(+), 80 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 77d219e..23ae30a 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -186,13 +186,14 @@ a.stat.active { border-color: var(--primary); background: #eff6ff; }
   margin-bottom: 1.5rem;
 }
 .drop-zone {
+  display: block;
   border: 2px dashed var(--border);
   border-radius: var(--radius);
   padding: 2.5rem 1rem;
   text-align: center;
   cursor: pointer;
   transition: border-color .2s, background .2s;
-  position: relative;
+  -webkit-tap-highlight-color: transparent;
 }
 .drop-zone:hover, .drop-zone.drag-over {
   border-color: var(--primary);
@@ -201,7 +202,16 @@ a.stat.active { border-color: var(--primary); background: #eff6ff; }
 .drop-icon { font-size: 2.5rem; margin-bottom: .5rem; }
 .drop-text { font-size: 1rem; font-weight: 500; margin-bottom: .3rem; }
 .drop-hint { font-size: .85rem; color: var(--text-muted); }
-.file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
+.file-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}
 
 .file-list { margin-top: 1rem; display: flex; flex-direction: column; gap: .35rem; }
 .file-item {
@@ -540,4 +550,265 @@ a.stat.active { border-color: var(--primary); background: #eff6ff; }
 }
 .review-title { display: flex; align-items: center; gap: .75rem; }
 .review-title h2 { font-size: 1.25rem; }
-.review-nav { display: flex; gap: .5rem; }
+.review-nav { display: flex; gap: .5rem; flex-wrap: wrap; }
+
+/* ============================
+   Export Dropdown
+   ============================ */
+.export-dropdown {
+  position: relative;
+  display: inline-block;
+}
+.export-menu {
+  display: none;
+  position: absolute;
+  left: 0;
+  top: 100%;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow-md);
+  z-index: 100;
+  min-width: 200px;
+  margin-top: 4px;
+}
+.export-menu.show { display: block; }
+.export-option {
+  display: block;
+  padding: .6rem 1rem;
+  text-decoration: none;
+  color: var(--text);
+  font-size: .9rem;
+  border-bottom: 1px solid #f3f4f6;
+}
+.export-option:last-child { border-bottom: none; }
+.export-option:hover { background: #f9fafb; text-decoration: none; }
+
+/* ============================
+   Hamburger Toggle
+   ============================ */
+.nav-toggle {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: .4rem;
+  z-index: 110;
+}
+.nav-toggle span {
+  display: block;
+  width: 22px;
+  height: 2.5px;
+  background: white;
+  border-radius: 2px;
+  transition: transform .25s, opacity .2s;
+}
+.nav-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
+.nav-toggle.active span:nth-child(2) { opacity: 0; }
+.nav-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
+
+/* ============================
+   Login Page
+   ============================ */
+.login-card {
+  max-width: 400px;
+  margin: 3rem auto;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 2rem;
+  box-shadow: var(--shadow-md);
+}
+.login-card h2 {
+  font-size: 1.35rem;
+  margin-bottom: 1.25rem;
+  text-align: center;
+}
+.login-card .form-group {
+  margin-bottom: 1rem;
+}
+.login-card .form-group label {
+  font-size: .85rem;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: .3rem;
+  display: block;
+}
+.login-card .form-group input {
+  width: 100%;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  padding: .55rem .75rem;
+  font-size: .95rem;
+  font-family: inherit;
+  direction: rtl;
+}
+.login-card .form-group input:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
+}
+.login-error {
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: var(--radius);
+  padding: .6rem .85rem;
+  margin-bottom: 1rem;
+  color: var(--danger);
+  font-size: .9rem;
+}
+
+/* ============================
+   Admin / Users Page
+   ============================ */
+.admin-container {
+  max-width: 850px;
+  margin: 0 auto;
+}
+.admin-container h2 {
+  font-size: 1.35rem;
+  margin-bottom: 1.25rem;
+}
+.admin-section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 1.25rem;
+  margin-bottom: 1.25rem;
+  box-shadow: var(--shadow);
+}
+.admin-section h3 {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: .5rem;
+}
+.admin-section p {
+  color: var(--text-muted);
+  font-size: .9rem;
+  margin-bottom: .75rem;
+}
+.add-user-form {
+  display: flex;
+  gap: .75rem;
+  align-items: flex-end;
+  flex-wrap: wrap;
+}
+.add-user-form .form-group {
+  flex: 1;
+  min-width: 140px;
+}
+
+/* ============================
+   Document actions on mobile
+   ============================ */
+.doc-actions {
+  display: flex;
+  gap: .35rem;
+  white-space: nowrap;
+}
+
+/* ============================
+   Responsive — Tablet & Mobile
+   ============================ */
+@media (max-width: 768px) {
+  /* Navbar hamburger */
+  .nav-toggle { display: flex; }
+  .nav-container {
+    flex-wrap: wrap;
+    gap: .5rem;
+  }
+  .nav-links {
+    display: none;
+    flex-direction: column;
+    width: 100%;
+    gap: 0;
+    padding-top: .5rem;
+  }
+  .nav-links.open {
+    display: flex;
+  }
+  .nav-link {
+    padding: .6rem .5rem;
+    border-top: 1px solid rgba(255,255,255,.12);
+    font-size: 1rem;
+  }
+  .nav-brand { font-size: 1rem; }
+
+  /* Layout */
+  .main-content { padding: 1rem .75rem; }
+  .page-header { flex-direction: column; gap: .5rem; }
+  .page-header h1 { font-size: 1.25rem; }
+
+  /* Stats */
+  .stats-bar { gap: .5rem; }
+  .stat { min-width: 75px; padding: .5rem .65rem; }
+  .stat-num { font-size: 1.15rem; }
+
+  /* Quick links — single column */
+  .quick-links { grid-template-columns: 1fr; }
+
+  /* Upload card */
+  .upload-card { padding: 1rem; }
+  .drop-zone { padding: 1.5rem .75rem; }
+  .provider-options { flex-direction: column; }
+  .provider-card { min-width: auto; }
+
+  /* Search */
+  .search-row { flex-direction: column; }
+  .search-input { width: 100%; }
+  .search-grid { grid-template-columns: 1fr 1fr; }
+
+  /* Forms */
+  .form-grid { grid-template-columns: 1fr; }
+  .form-actions { flex-direction: column; gap: .75rem; }
+  .form-actions .btn { width: 100%; justify-content: center; }
+
+  /* Tables — improve scroll hint */
+  .table-wrapper {
+    margin-inline: -.75rem;
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+  }
+  .results-table th, .results-table td,
+  .props-table th, .props-table td {
+    padding: .45rem .5rem;
+    font-size: .8rem;
+  }
+
+  /* Person cards */
+  .persons-grid { grid-template-columns: 1fr; }
+  .info-grid { grid-template-columns: 1fr 1fr; }
+
+  /* Review header */
+  .review-header { flex-direction: column; align-items: flex-start; }
+  .review-nav { width: 100%; flex-wrap: wrap; }
+  .review-title h2 { font-size: 1.1rem; }
+
+  /* Buttons */
+  .btn { padding: .55rem 1rem; font-size: .9rem; }
+  .btn-large { padding: .65rem 1.25rem; }
+  .btn-sm { padding: .35rem .6rem; }
+
+  /* Login */
+  .login-card { margin: 1.5rem .75rem; padding: 1.5rem; }
+
+  /* Admin */
+  .add-user-form { flex-direction: column; }
+  .add-user-form .form-group { width: 100%; }
+}
+
+@media (max-width: 480px) {
+  html { font-size: 14px; }
+  .search-grid { grid-template-columns: 1fr; }
+  .info-grid { grid-template-columns: 1fr; }
+  .stat { min-width: 65px; padding: .4rem .5rem; }
+  .stat-num { font-size: 1rem; }
+  .stat-label { font-size: .7rem; }
+  .doc-thumbnails { gap: .5rem; }
+  .doc-thumb { width: 100px; }
+  .doc-thumb img { height: 70px; }
+}
diff --git a/static/css/review.css b/static/css/review.css
index 688bd6a..0705cdb 100644
--- a/static/css/review.css
+++ b/static/css/review.css
@@ -42,3 +42,28 @@
 .form-panel {
   min-width: 0;
 }
+
+/* ============================
+   Review — Responsive
+   ============================ */
+@media (max-width: 900px) {
+  .review-layout {
+    grid-template-columns: 1fr;
+  }
+  .image-panel {
+    position: relative;
+    top: auto;
+  }
+  .image-container {
+    max-height: 50vh;
+  }
+}
+
+@media (max-width: 480px) {
+  .image-container {
+    max-height: 40vh;
+  }
+  .image-toolbar {
+    justify-content: center;
+  }
+}
diff --git a/templates/base.html b/templates/base.html
index df650a5..29c73ea 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -12,7 +12,10 @@
   <nav class="navbar">
     <div class="nav-container">
       <a class="nav-brand" href="/">🏠 سجل العقارات</a>
-      <div class="nav-links">
+      <button class="nav-toggle" id="navToggle" aria-label="القائمة">
+        <span></span><span></span><span></span>
+      </button>
+      <div class="nav-links" id="navLinks">
         <a href="/" class="nav-link">رفع وثائق</a>
         <a href="/review/next" class="nav-link">مراجعة</a>
         <a href="/search" class="nav-link">بحث</a>
@@ -28,6 +31,16 @@
     {% block content %}{% endblock %}
   </main>
 
+  <script>
+    const navToggle = document.getElementById('navToggle');
+    const navLinks = document.getElementById('navLinks');
+    if (navToggle) {
+      navToggle.addEventListener('click', () => {
+        navLinks.classList.toggle('open');
+        navToggle.classList.toggle('active');
+      });
+    }
+  </script>
   {% block scripts %}{% endblock %}
 </body>
 </html>
diff --git a/templates/index.html b/templates/index.html
index 96b3b71..59342fd 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -23,12 +23,12 @@
 
 <div class="upload-card">
   <form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
-    <div class="drop-zone" id="dropZone">
+    <input type="file" name="files" id="fileInput" multiple accept=".jpg,.jpeg,.png,.webp,.pdf" class="file-input">
+    <label for="fileInput" class="drop-zone" id="dropZone">
       <div class="drop-icon">📄</div>
       <p class="drop-text">اسحب الملفات هنا أو انقر للاختيار</p>
       <p class="drop-hint">JPG، PNG، PDF — يمكن رفع عدة ملفات دفعة واحدة</p>
-      <input type="file" name="files" id="fileInput" multiple accept=".jpg,.jpeg,.png,.webp,.pdf" class="file-input">
-    </div>
+    </label>
 
     <div id="fileList" class="file-list hidden"></div>
 
@@ -77,7 +77,7 @@ const fileInput = document.getElementById('fileInput');
 const fileList = document.getElementById('fileList');
 const uploadActions = document.getElementById('uploadActions');
 
-dropZone.addEventListener('click', () => fileInput.click());
+// label[for] natively triggers the file input on all platforms including iOS
 
 dropZone.addEventListener('dragover', e => {
   e.preventDefault();
diff --git a/templates/login.html b/templates/login.html
index e24d89d..8368d69 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -5,25 +5,25 @@
 {% block navbar %}{% endblock %}
 
 {% block content %}
-<div class="login-container" style="max-width: 400px; margin: 50px auto; padding: 20px; border: 1px solid #ccc; border-radius: 8px;">
-    <h2>تسجيل الدخول</h2>
-    
+<div class="login-card">
+    <h2>🏠 تسجيل الدخول</h2>
+
     {% if error %}
-    <div style="color: red; margin-bottom: 10px;">{{ error }}</div>
+    <div class="login-error">{{ error }}</div>
     {% endif %}
 
     <form method="post" action="/auth/login">
-        <div style="margin-bottom: 15px;">
-            <label for="username" style="display: block; margin-bottom: 5px;">اسم المستخدم:</label>
-            <input type="text" id="username" name="username" required style="width: 100%; padding: 8px;">
+        <div class="form-group">
+            <label for="username">اسم المستخدم</label>
+            <input type="text" id="username" name="username" required placeholder="أدخل اسم المستخدم">
         </div>
-        
-        <div style="margin-bottom: 15px;">
-            <label for="password" style="display: block; margin-bottom: 5px;">كلمة المرور:</label>
-            <input type="password" id="password" name="password" required style="width: 100%; padding: 8px;">
+
+        <div class="form-group">
+            <label for="password">كلمة المرور</label>
+            <input type="password" id="password" name="password" required placeholder="أدخل كلمة المرور">
         </div>
-        
-        <button type="submit" style="width: 100%; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">
+
+        <button type="submit" class="btn btn-primary btn-large" style="width:100%; justify-content:center; margin-top:.5rem;">
             دخول
         </button>
     </form>
diff --git a/templates/person_detail.html b/templates/person_detail.html
index 22af12b..a7fe900 100644
--- a/templates/person_detail.html
+++ b/templates/person_detail.html
@@ -9,13 +9,13 @@
   </div>
   <div>
     {% set scopes = documents | selectattr('search_scope') | map(attribute='search_scope') | unique | list %}
-    <div class="export-dropdown" style="position: relative; display: inline-block;">
+    <div class="export-dropdown">
       <button class="btn btn-primary" onclick="this.nextElementSibling.classList.toggle('show')">📥 تصدير كملف إكسل ▾</button>
-      <div class="export-menu" style="display:none; position:absolute; left:0; top:100%; background:#fff; border:1px solid #ddd; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.15); z-index:100; min-width:220px; margin-top:4px;">
-        <a href="/persons/{{ person.id }}/export" class="export-option" download style="display:block; padding:10px 16px; text-decoration:none; color:#333; border-bottom:1px solid #eee;">📥 تصدير الكل</a>
+      <div class="export-menu">
+        <a href="/persons/{{ person.id }}/export" class="export-option" download>📥 تصدير الكل</a>
         {% for scope in scopes %}
           {% if scope %}
-          <a href="/persons/{{ person.id }}/export?qaza={{ scope|urlencode }}" class="export-option" download style="display:block; padding:10px 16px; text-decoration:none; color:#333;">📥 {{ scope }}</a>
+          <a href="/persons/{{ person.id }}/export?qaza={{ scope|urlencode }}" class="export-option" download>📥 {{ scope }}</a>
           {% endif %}
         {% endfor %}
       </div>
@@ -75,7 +75,7 @@
   </table>
 </div>
 {% else %}
-<div style="margin: 1rem 0; padding: 15px; background-color: #fff3f3; border: 1px solid #ffcaca; border-radius: 8px; color: #dc3545; font-weight: bold; text-align: center;">
+<div class="error-banner" style="justify-content:center;">
   ⚠️ نتيجة البحث: لا يملك أي عقار في نطاق البحث المذكور.
 </div>
 {% endif %}
diff --git a/templates/search.html b/templates/search.html
index 2682ed4..5f340c0 100644
--- a/templates/search.html
+++ b/templates/search.html
@@ -64,13 +64,13 @@
       <div style="margin-top:1rem">
         <a href="/persons/{{ selected_person.person.id }}" class="btn btn-secondary">عرض التفاصيل كاملة</a>
         {% set scopes = selected_person.documents | selectattr('search_scope') | map(attribute='search_scope') | unique | list %}
-        <div class="export-dropdown" style="position: relative; display: inline-block;">
+        <div class="export-dropdown">
           <button class="btn btn-primary" onclick="this.nextElementSibling.classList.toggle('show')">📥 تصدير كملف إكسل ▾</button>
-          <div class="export-menu" style="display:none; position:absolute; left:0; top:100%; background:#fff; border:1px solid #ddd; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.15); z-index:100; min-width:220px; margin-top:4px;">
-            <a href="/persons/{{ selected_person.person.id }}/export" class="export-option" download style="display:block; padding:10px 16px; text-decoration:none; color:#333; border-bottom:1px solid #eee;">📥 تصدير الكل</a>
+          <div class="export-menu">
+            <a href="/persons/{{ selected_person.person.id }}/export" class="export-option" download>📥 تصدير الكل</a>
             {% for scope in scopes %}
               {% if scope %}
-              <a href="/persons/{{ selected_person.person.id }}/export?qaza={{ scope|urlencode }}" class="export-option" download style="display:block; padding:10px 16px; text-decoration:none; color:#333;">📥 {{ scope }}</a>
+              <a href="/persons/{{ selected_person.person.id }}/export?qaza={{ scope|urlencode }}" class="export-option" download>📥 {{ scope }}</a>
               {% endif %}
             {% endfor %}
           </div>
@@ -112,7 +112,7 @@
       </table>
     </div>
     {% else %}
-    <div style="margin-top: 1rem; padding: 15px; background-color: #fff3f3; border: 1px solid #ffcaca; border-radius: 8px; color: #dc3545; font-weight: bold; text-align: center;">
+    <div class="error-banner" style="margin-top:1rem; justify-content:center;">
       ⚠️ نتيجة البحث: لا يملك أي عقار في القضاء المذكور.
     </div>
     {% endif %}
diff --git a/templates/users.html b/templates/users.html
index b1309da..1a80759 100644
--- a/templates/users.html
+++ b/templates/users.html
@@ -3,62 +3,64 @@
 {% block title %}إدارة المستخدمين - سجل العقارات اللبناني{% endblock %}
 
 {% block content %}
-<div class="users-container" style="max-width: 800px; margin: 20px auto; padding: 20px;">
-    <h2>إدارة النظام والمستخدمين</h2>
-    
-    {% if backup_msg %}
-    <div style="padding: 10px; background-color: #d4edda; color: #155724; border-radius: 4px; margin-bottom: 15px;">
-        {{ backup_msg }}
-    </div>
-    {% endif %}
-    
-    <div style="margin-bottom: 30px; padding: 15px; border: 1px solid #ddd; border-radius: 8px;">
-        <h3>نسخ احتياطي لقاعدة البيانات</h3>
-        <p>قم بإنشاء نسخة احتياطية من قاعدة البيانات الحالية.</p>
-        <a href="/auth/backup" style="display: inline-block; padding: 8px 15px; background-color: #28a745; color: white; text-decoration: none; border-radius: 4px;">إنشاء نسخة احتياطية</a>
+<div class="admin-container">
+    <div class="page-header">
+        <h1>إدارة النظام والمستخدمين</h1>
     </div>
 
-    <div style="margin-bottom: 30px; padding: 15px; border: 1px solid #ddd; border-radius: 8px;">
-        <h3>إضافة مستخدم جديد</h3>
-        <form method="post" action="/auth/users/create" style="display: flex; gap: 10px; align-items: flex-end;">
-            <div>
-                <label for="username" style="display: block; margin-bottom: 5px;">اسم المستخدم</label>
-                <input type="text" id="username" name="username" required style="padding: 8px;">
+    {% if backup_msg %}
+    <div class="success-banner">{{ backup_msg }}</div>
+    {% endif %}
+
+    <div class="admin-section">
+        <h3>💾 نسخ احتياطي لقاعدة البيانات</h3>
+        <p>قم بإنشاء نسخة احتياطية من قاعدة البيانات الحالية.</p>
+        <a href="/auth/backup" class="btn btn-success">إنشاء نسخة احتياطية</a>
+    </div>
+
+    <div class="admin-section">
+        <h3>➕ إضافة مستخدم جديد</h3>
+        <form method="post" action="/auth/users/create" class="add-user-form">
+            <div class="form-group">
+                <label for="username">اسم المستخدم</label>
+                <input type="text" id="username" name="username" required>
             </div>
-            <div>
-                <label for="password" style="display: block; margin-bottom: 5px;">كلمة المرور</label>
-                <input type="password" id="password" name="password" required style="padding: 8px;">
+            <div class="form-group">
+                <label for="password">كلمة المرور</label>
+                <input type="password" id="password" name="password" required>
             </div>
-            <button type="submit" style="padding: 9px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">إضافة</button>
+            <button type="submit" class="btn btn-primary">إضافة</button>
         </form>
     </div>
 
-    <div style="padding: 15px; border: 1px solid #ddd; border-radius: 8px;">
-        <h3>المستخدمين</h3>
-        <table style="width: 100%; border-collapse: collapse; margin-top: 10px;">
-            <thead>
-                <tr style="background-color: #f8f9fa;">
-                    <th style="padding: 10px; border-bottom: 2px solid #dee2e6; text-align: right;">الرقم</th>
-                    <th style="padding: 10px; border-bottom: 2px solid #dee2e6; text-align: right;">اسم المستخدم</th>
-                    <th style="padding: 10px; border-bottom: 2px solid #dee2e6; text-align: right;">تاريخ الإنشاء</th>
-                    <th style="padding: 10px; border-bottom: 2px solid #dee2e6; text-align: right;">إجراءات</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for user in users %}
-                <tr>
-                    <td style="padding: 10px; border-bottom: 1px solid #dee2e6;">{{ user.id }}</td>
-                    <td style="padding: 10px; border-bottom: 1px solid #dee2e6;">{{ user.username }}</td>
-                    <td style="padding: 10px; border-bottom: 1px solid #dee2e6;">{{ user.created_at }}</td>
-                    <td style="padding: 10px; border-bottom: 1px solid #dee2e6;">
-                        <form method="post" action="/auth/users/delete/{{ user.id }}" onsubmit="return confirm('هل أنت متأكد من حذف هذا المستخدم؟');" style="display: inline;">
-                            <button type="submit" style="padding: 5px 10px; background-color: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer;">حذف</button>
-                        </form>
-                    </td>
-                </tr>
-                {% endfor %}
-            </tbody>
-        </table>
+    <div class="admin-section">
+        <h3>👥 المستخدمين</h3>
+        <div class="table-wrapper">
+            <table class="results-table">
+                <thead>
+                    <tr>
+                        <th>الرقم</th>
+                        <th>اسم المستخدم</th>
+                        <th>تاريخ الإنشاء</th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for user in users %}
+                    <tr>
+                        <td>{{ user.id }}</td>
+                        <td>{{ user.username }}</td>
+                        <td>{{ user.created_at }}</td>
+                        <td>
+                            <form method="post" action="/auth/users/delete/{{ user.id }}" onsubmit="return confirm('هل أنت متأكد من حذف هذا المستخدم؟');" style="display:inline;">
+                                <button type="submit" class="btn btn-sm btn-danger">حذف</button>
+                            </form>
+                        </td>
+                    </tr>
+                    {% endfor %}
+                </tbody>
+            </table>
+        </div>
     </div>
 </div>
 {% endblock %}