<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>User Verwaltung</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap 5 -->
   <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bootstrap-icons/bootstrap-icons.min.css">
</head>
<body class="bg-light">

<!-- NAVBAR -->
<nav class="navbar navbar-dark bg-dark position-relative px-3">

    <!-- 🟢 ZENTRIERTER TITEL -->
    <div class="position-absolute top-50 start-50 translate-middle
                d-flex align-items-center gap-2 text-white">
        <i class="bi bi-shield-lock fs-4"></i>
        <span class="fw-semibold fs-5">User Verwaltung</span>
    </div>

    <!-- 🔵 RECHTS: DASHBOARD -->
        <div class="ms-auto">
            <a href="/dashboard" class="btn btn-outline-primary btn-sm">
                ⬅️ Dashboard
            </a>
        </div>

</nav>


<!-- CONTENT -->
<div class="container mt-4">
    <%- include("partials/flash") %>
    <div class="card shadow">
        <div class="card-body">

            <h4 class="mb-3">Benutzerübersicht</h4>

            <div class="table-responsive">
                <div class="mb-3 text-end">
                    <a href="/admin/create-user" class="btn btn-primary">
                        + Neuen Benutzer anlegen
                    </a>
                </div>
                <div class="row mb-3 align-items-end">
                    <div class="col-md-6">
                        <form method="GET" action="/admin/users" class="d-flex gap-2">
                        <input
                            type="text"
                            name="q"
                            class="form-control"
                            placeholder="🔍 Benutzer suchen (Name oder Username)"
                            value="<%= query?.q || '' %>">

                        <button class="btn btn-outline-primary">
                            Suchen
                        </button>

                        <% if (query?.q) { %>
                            <a href="/admin/users" class="btn btn-outline-secondary">
                            Reset
                            </a>
                        <% } %>
                        </form>
                    </div>
                    </div>


                <table class="table table-bordered table-hover align-middle">
                    <thead class="table-dark">
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Rolle</th>
                        <th>Status</th>
                        <th style="width: 340px;">Aktionen</th>
                    </tr>
                    </thead>
                    <tbody>

                    <% users.forEach(u => { %>
                        <tr>
                            <td><%= u.id %></td>
                            <td>
                                <strong><%= u.first_name %> <%= u.last_name %></strong><br>
                                <small class="text-muted">@<%= u.username %></small>
                            </td>
                            <td>
                                <% if (u.role === "arzt") { %>
                                    <span class="badge bg-warning text-dark">Arzt</span>
                                <% } else { %>
                                    <span class="badge bg-info text-dark">Mitarbeiter</span>
                                <% } %>
                            </td>
                            <td>
                                <% if (u.active === 0) { %>
                                    <span class="badge bg-secondary">Inaktiv</span>
                                <% } else if (u.lock_until && new Date(u.lock_until) > new Date()) { %>
                                    <span class="badge bg-danger">Gesperrt</span>
                                <% } else { %>
                                    <span class="badge bg-success">Aktiv</span>
                                <% } %>
                            </td>

                            <td>
                                <% if (u.id !== currentUser.id) { %>

                                    <!-- AKTIV / INAKTIV -->
                                    <% if (u.active === 1) { %>
                                        <form method="POST"
                                              action="/admin/users/deactivate/<%= u.id %>"
                                              class="mb-1">
                                            <button class="btn btn-sm btn-secondary w-100">
                                                Deaktivieren
                                            </button>
                                        </form>
                                    <% } else { %>
                                        <form method="POST"
                                              action="/admin/users/activate/<%= u.id %>"
                                              class="mb-1">
                                            <button class="btn btn-sm btn-success w-100">
                                                Aktivieren
                                            </button>
                                        </form>
                                    <% } %>

                                    <!-- ROLLE ÄNDERN -->
                                    <form method="POST"
                                          action="/admin/users/change-role/<%= u.id %>"
                                          class="mb-1">
                                        <select name="role"
                                                class="form-select form-select-sm mb-1">
                                            <option value="mitarbeiter"
                                                <%= u.role === "mitarbeiter" ? "selected" : "" %>>
                                                Mitarbeiter
                                            </option>
                                            <option value="arzt"
                                                <%= u.role === "arzt" ? "selected" : "" %>>
                                                Arzt
                                            </option>
                                        </select>
                                        <button class="btn btn-sm btn-warning w-100">
                                            Rolle ändern
                                        </button>
                                    </form>

                                    <!-- PASSWORT RESET -->
                                    <form method="POST"
                                          action="/admin/users/reset-password/<%= u.id %>">
                                        <input type="password"
                                               name="password"
                                               class="form-control form-control-sm mb-1"
                                               placeholder="Neues Passwort"
                                               required>
                                        <button class="btn btn-sm btn-danger w-100"
                                                onclick="return confirm('Passwort wirklich zurücksetzen?')">
                                            Passwort zurücksetzen
                                        </button>
                                    </form>

                                <% } else { %>
                                    <span class="text-muted fst-italic">
                                        Du selbst
                                    </span>
                                <% } %>
                            </td>
                        </tr>
                    <% }) %>

                    </tbody>
                </table>
            </div>

        </div>
    </div>

</div>

</body>
</html>
