{% extends "base.html" %}

{% block title %}User Management — IslamInLife Quran App{% endblock %}

{% block body %}

<main style="max-width:1100px; margin:30px auto;">

    <div class="card">

        <div style="
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-bottom:20px;
        ">
            <div>
                <h2 style="color:#1a3a5c; margin:0;">
                    👥 User Management
                </h2>

                <p style="
                    margin:5px 0 0;
                    color:#7f8c8d;
                    font-size:13px;
                ">
                    Super Admin only
                </p>
            </div>

            <div>
                <a
                    href="{{ url_for('admin_new_user') }}"
                    class="btn-save"
                    style="text-decoration:none; margin-right:8px;"
                >
                    ➕ Add User
                </a>
                <a
                    href="{{ url_for('home') }}"
                    class="btn-save"
                    style="text-decoration:none;"
                >
                    ← Back
                </a>
            </div>
        </div>


        {% if error %}
            <div class="msg msg-error">
                {{ error }}
            </div>
        {% endif %}


        {% if success %}
            <div class="msg msg-success">
                {{ success }}
            </div>
        {% endif %}


        {% if users %}

        <div style="overflow-x:auto;">

            <table style="
                width:100%;
                border-collapse:collapse;
                font-size:13px;
            ">

                <thead>
                    <tr style="
                        background:#f2f5f7;
                        color:#1a3a5c;
                    ">
                        <th style="padding:10px; text-align:left;">Username</th>
                        <th style="padding:10px; text-align:left;">Email</th>
                        <th style="padding:10px; text-align:left;">Display Name</th>
                        <th style="padding:10px; text-align:center;">Role</th>
                        <th style="padding:10px; text-align:center;">Created</th>
                        <th style="padding:10px; text-align:center;">Actions</th>
                    </tr>
                </thead>


                <tbody>

                {% for user in users %}

                    <tr style="border-bottom:1px solid #e5e7e9;">

                        <td style="padding:10px;">
                            <strong>{{ user.username }}</strong>
                        </td>


                        <td style="padding:10px;">
                            <div>{{ user.email or "—" }}</div>

                            {% if user.email %}
                                {% if user.email_verified %}
                                    <span style="font-size:11px; color:#27ae60;">
                                        ✓ Verified
                                    </span>
                                {% else %}
                                    <span style="font-size:11px; color:#e67e22;">
                                        ⚠ Not verified
                                    </span>
                                {% endif %}
                            {% endif %}
                        </td>


                        <td style="padding:10px;">
                            {{ user.display_name or "—" }}
                        </td>


                        <td style="
                            padding:10px;
                            text-align:center;
                            white-space:nowrap;
                        ">

                            {% if user.is_super_admin %}

                                <span style="
                                    background:#8e44ad;
                                    color:white;
                                    padding:4px 8px;
                                    border-radius:4px;
                                    font-size:11px;
                                ">
                                    SUPER ADMIN
                                </span>

                            {% elif user.is_admin %}

                                <span style="
                                    background:#2980b9;
                                    color:white;
                                    padding:4px 8px;
                                    border-radius:4px;
                                    font-size:11px;
                                ">
                                    ADMIN
                                </span>

                            {% else %}

                                <span style="
                                    background:#7f8c8d;
                                    color:white;
                                    padding:4px 8px;
                                    border-radius:4px;
                                    font-size:11px;
                                ">
                                    USER
                                </span>

                            {% endif %}

                        </td>


                        <td style="
                            padding:10px;
                            text-align:center;
                            white-space:nowrap;
                        ">
                            {{ user.created_at }}
                        </td>


                        <td style="
                            padding:10px;
                            text-align:center;
                            white-space:nowrap;
                        ">

                            {% if not user.is_super_admin %}

                                <a
                                    href="{{ url_for(
                                        'admin_edit_user',
                                        user_id=user.id
                                    ) }}"
                                    class="btn-save"
                                    style="
                                        text-decoration:none;
                                        font-size:12px;
                                        padding:5px 9px;
                                    "
                                >
                                    ✏️ Edit
                                </a>

                        <form
                            action="{{ url_for('admin_reset_password_route', user_id=user.id) }}"
                            method="post"
                            style="display:inline;"
                        >
                            <input
                                type="password"
                                name="new_password"
                                placeholder="New password"
                                required
                                style="padding:4px 6px; width:120px;"
                            >

                            <button
                                type="submit"
                                class="btn-save"
                                style="font-size:12px;padding:5px 9px;"
                            >
                                Reset
                            </button>
                        </form>



                                <form
                                    action="{{ url_for('admin_delete_user', user_id=user.id) }}"
                                    method="post"
                                    style="display:inline;"
                                    onsubmit="return confirm('Are you sure you want to delete this user and all their personal data?');"
                                >
                                    <button
                                        type="submit"
                                        style="
                                            background:#c0392b;
                                            color:white;
                                            padding:5px 9px;
                                            border:none;
                                            border-radius:4px;
                                            cursor:pointer;
                                            font-size:12px;
                                            margin-left:4px;
                                        "
                                    >
                                        🗑️ Delete
                                    </button>
                                </form>

                            {% else %}

                                <span style="
                                    color:#7f8c8d;
                                    font-size:12px;
                                ">
                                    Protected
                                </span>

                            {% endif %}

                        </td>

                    </tr>

                {% endfor %}

                </tbody>

            </table>

        </div>

        {% else %}

            <div class="msg">
                No registered users found.
            </div>

        {% endif %}

    </div>

</main>

{% endblock %}