<div class="layout">
  <div class="main">

    <%- include("partials/page-header", {
      user,
      title: t.adminuseroverview.usermanagement,
      subtitle: "",
      showUserName: true
    }) %>

    <div class="content">

      <%- include("partials/flash") %>

      <div class="container-fluid">
        <div class="card shadow-sm">
          <div class="card-body">

            <div class="d-flex align-items-center justify-content-between mb-3">
              <h4 class="mb-0"><%= t.adminuseroverview.useroverview %></h4>
              <a href="/admin/create-user" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> <%= t.global.newuser %>
              </a>
            </div>

            <div class="table-responsive">
              <table class="table table-bordered table-hover table-sm align-middle mb-0">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th><%= t.global.title %></th>
                    <th><%= t.global.firstname %></th>
                    <th><%= t.global.lastname %></th>
                    <th><%= t.global.username %></th>
                    <th><%= t.global.role %></th>
                    <th class="text-center"><%= t.global.status %></th>
                    <th><%= t.global.action %></th>
                  </tr>
                </thead>

                <tbody>
                  <% users.forEach(u => { %>
                    <tr class="<%= u.active ? '' : 'table-secondary' %>">

                      <form method="POST" action="/admin/users/update/<%= u.id %>">

                        <td class="fw-semibold"><%= u.id %></td>

                        <td>
                          <input type="text" name="title" value="<%= u.title || '' %>"
                            class="form-control form-control-sm" disabled />
                        </td>
                        <td>
                          <input type="text" name="first_name" value="<%= u.first_name %>"
                            class="form-control form-control-sm" disabled />
                        </td>
                        <td>
                          <input type="text" name="last_name" value="<%= u.last_name %>"
                            class="form-control form-control-sm" disabled />
                        </td>
                        <td>
                          <input type="text" name="username" value="<%= u.username %>"
                            class="form-control form-control-sm" disabled />
                        </td>

                        <td>
                          <select name="role" class="form-select form-select-sm" disabled>
                            <option value="mitarbeiter" <%= u.role === "mitarbeiter" ? "selected" : "" %>>Mitarbeiter</option>
                            <option value="arzt"        <%= u.role === "arzt"        ? "selected" : "" %>>Arzt</option>
                            <option value="admin"       <%= u.role === "admin"       ? "selected" : "" %>>Admin</option>
                          </select>
                        </td>

                        <td class="text-center">
                          <% if (u.active === 0) { %>
                            <span class="badge bg-secondary"><%= t.global.inactive %></span>
                          <% } else if (u.lock_until && new Date(u.lock_until) > new Date()) { %>
                            <span class="badge bg-danger"><%= t.global.closed %></span>
                          <% } else { %>
                            <span class="badge bg-success"><%= t.global.active %></span>
                          <% } %>
                        </td>

                        <td class="d-flex gap-2 align-items-center">

                          <button class="btn btn-outline-success btn-sm save-btn" disabled>
                            <i class="bi bi-save"></i>
                          </button>
                          <button type="button" class="btn btn-outline-warning btn-sm lock-btn">
                            <i class="bi bi-pencil-square"></i>
                          </button>

                      </form>

                          <% if (u.id !== currentUser.id) { %>
                            <form method="POST"
                              action="/admin/users/<%= u.active ? 'deactivate' : 'activate' %>/<%= u.id %>">
                              <button class="btn btn-sm <%= u.active ? 'btn-outline-danger' : 'btn-outline-success' %>">
                                <i class="bi <%= u.active ? 'bi-person-x' : 'bi-person-check' %>"></i>
                              </button>
                            </form>
                          <% } else { %>
                            <span class="badge bg-light text-dark border">👤 <%= t.global.you %></span>
                          <% } %>

                        </td>
                    </tr>
                  <% }) %>
                </tbody>

              </table>
            </div>

          </div>
        </div>
      </div>

    </div>
  </div>
</div>
