{% extends "base.html" %}

{% block title %}إدارة المستخدمين - سجل العقارات اللبناني{% endblock %}

{% block content %}
<div class="admin-container">
    <div class="page-header">
        <div>
            <span class="page-kicker">الإعدادات والإدارة</span>
            <h1>إدارة النظام والمستخدمين</h1>
            <p class="subtitle">أنشئ نسخاً احتياطية وأدر حسابات الدخول من مكان واحد.</p>
        </div>
    </div>

    {% if backup_msg %}
    <div class="success-banner">{{ backup_msg }}</div>
    {% endif %}
    {% if error %}
    <div class="error-banner" style="background:#fee2e2;color:#991b1b;padding:.75rem 1rem;border-radius:8px;margin:.75rem 0">{{ error }}</div>
    {% endif %}

    <div class="admin-section">
        <h3>
          <svg class="section-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
          نسخ احتياطي لقاعدة البيانات
        </h3>
        <p>قم بإنشاء نسخة احتياطية من قاعدة البيانات الحالية.</p>
        <a href="/auth/backup" class="btn btn-success">إنشاء نسخة احتياطية</a>
    </div>

    <div class="admin-section">
        <h3>
          <svg class="section-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>
          إضافة مستخدم جديد
        </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 class="form-group">
                <label for="password">كلمة المرور</label>
                <input type="password" id="password" name="password" required minlength="8">
            </div>
            <div class="form-group">
                <label for="role">الصلاحية</label>
                <select id="role" name="role">
                  <option value="user">مستخدم</option>
                  <option value="admin">مسؤول</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">إضافة</button>
        </form>
    </div>

    <div class="admin-section">
        <h3>
          <svg class="section-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
          المستخدمين
        </h3>
        <div class="table-wrapper">
            <table class="results-table responsive-table">
                <thead>
                    <tr>
                        <th>الرقم</th>
                        <th>اسم المستخدم</th>
                        <th>الصلاحية</th>
                        <th>تاريخ الإنشاء</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    {% for user in users %}
                    <tr>
                        <td data-label="الرقم">{{ user.id }}</td>
                        <td data-label="اسم المستخدم">
                          {{ user.username }}
                          {% if current_user and user.id == current_user.user_id %}<small style="color:#64748b">(أنت)</small>{% endif %}
                        </td>
                        <td data-label="الصلاحية">
                          <form method="post" action="/auth/users/{{ user.id }}/role" class="inline-form" style="display:flex;gap:.35rem;align-items:center">
                            <select name="role" {% if current_user and user.id == current_user.user_id %}disabled{% endif %}>
                              <option value="user" {% if user.role == 'user' %}selected{% endif %}>مستخدم</option>
                              <option value="admin" {% if user.role == 'admin' %}selected{% endif %}>مسؤول</option>
                            </select>
                            {% if not (current_user and user.id == current_user.user_id) %}
                            <button type="submit" class="btn btn-sm btn-secondary">تغيير</button>
                            {% endif %}
                          </form>
                        </td>
                        <td data-label="تاريخ الإنشاء">{{ user.created_at }}</td>
                        <td data-label="الإجراءات">
                            {% if current_user and user.id == current_user.user_id %}
                              <span style="color:#64748b;font-size:.85rem">—</span>
                            {% else %}
                            <form method="post" action="/auth/users/delete/{{ user.id }}" onsubmit="return confirm('هل أنت متأكد من حذف هذا المستخدم؟');" class="inline-form">
                                <button type="submit" class="btn btn-sm btn-danger">حذف</button>
                            </form>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endblock %}