<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CANCOM Simple Signage – Userverwaltung</title>
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}">
<script>
(() => {
  const stored = window.localStorage.getItem("signage-theme");
  const theme = stored === "dark" || stored === "light" ? stored : "light";
  document.documentElement.setAttribute("data-bs-theme", theme);
})();
</script>
<link rel="stylesheet"
      href="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/css/tabler.min.css">
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
<script defer
        src="https://unpkg.com/@tabler/core@1.0.0-beta20/dist/js/tabler.min.js"></script>
{% include "_styles.html" %}
<style>
  .badge-site { background: #e9ecef; color: #212121; margin: 0 0.15rem; }
  [data-bs-theme="dark"] .badge-site { background: #3a3f45; color: #e9ecef; }
</style>
</head>
<body>
<div class="page">

{% set brand_subtitle = "Userverwaltung" %}
{% set site_dropdown_url_prefix = "/admin/" %}
{% include "_header.html" %}

<div class="navbar-expand-md">
  <div class="collapse navbar-collapse show">
    <div class="navbar navbar-dark nav-surface">
      <div class="container-xl">
        <div class="d-flex flex-wrap gap-2 py-2">
          <a class="btn btn-white" href="/admin/{{ current_site }}"><i class="ti ti-arrow-left me-1"></i>Zurück</a>
          <a class="btn btn-white" href="/admin/dashboard"><i class="ti ti-dashboard me-1"></i>Admin Dashboard</a>
          <a class="btn btn-white active" href="/admin/users"><i class="ti ti-users me-1"></i>Userliste</a>
          <a class="btn btn-white" href="/admin/users/create"><i class="ti ti-user-plus me-1"></i>Neu anlegen</a>
          <a class="btn btn-white" href="/admin/help"><i class="ti ti-help me-1"></i>Hilfe</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="page-wrapper">
  <div class="container-xl mt-4">

    {% if request.args.get('reset') and request.args.get('temp') %}
    <div class="alert alert-success" role="alert">
      <strong>Passwort zurückgesetzt für {{ request.args.get('reset') }}</strong><br>
      Temporäres Passwort: <code>{{ request.args.get('temp') }}</code><br>
      <small class="text-muted">Der User muss sich beim nächsten Login mit diesem Passwort anmelden und wird dann zur Passwort-Änderung aufgefordert.</small>
    </div>
    {% endif %}
    {% if request.args.get('updated') %}
    <div class="alert alert-success" role="alert">
      <strong>User {{ request.args.get('updated') }} erfolgreich aktualisiert.</strong>
    </div>
    {% endif %}

    <div class="card">
      <div class="card-header">
        <h3 class="card-title"><i class="ti ti-users me-1"></i>User</h3>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-vcenter card-table">
            <thead>
              <tr>
                <th>Name</th>
                <th>E-Mail</th>
                <th>Rolle</th>
                <th>Standorte</th>
                <th>Abteilung</th>
                <th>MFA</th>
                <th>Status</th>
                <th>Aktionen</th>
              </tr>
            </thead>
            <tbody>
              {% for u in users %}
              <tr>
                <td class="text-nowrap">{{ u.last_name }}{% if u.last_name and u.first_name %}, {% endif %}{{ u.first_name }}</td>
                <td class="text-nowrap">{{ u.email }}</td>
                <td>
                  {% if u.role == "admin" %}
                    <span class="badge bg-red text-red-fg">Admin</span>
                  {% elif u.role == "superuser" %}
                    <span class="badge bg-purple text-purple-fg">Superuser</span>
                  {% else %}
                    <span class="badge bg-blue text-blue-fg">User</span>
                  {% endif %}
                </td>
                <td>
                  {% if u.role == "admin" or u.role == "superuser" %}
                    <span class="text-muted">Alle</span>
                  {% else %}
                    {% for s in u.sites %}
                      <span class="badge badge-site">{{ s }}</span>
                    {% else %}
                      <span class="text-muted">–</span>
                    {% endfor %}
                  {% endif %}
                </td>
                <td class="text-muted small">{{ u.department }}</td>
                <td>
                  {% if u.mfa_enabled %}
                    <span class="badge bg-green text-green-fg">Aktiv</span>
                  {% else %}
                    <span class="text-muted">–</span>
                  {% endif %}
                </td>
                <td>
                  {% if u.must_change_password %}
                    <span class="badge bg-warning text-white">Passwort-Änderung erforderlich</span>
                  {% else %}
                    <span class="badge bg-green text-green-fg">Aktiv</span>
                  {% endif %}
                </td>
                <td class="text-nowrap">
                  <div class="d-flex gap-1">
                    {% if u.email != current_user.email %}
                    <form action="/admin/users/delete/{{ u.email }}" method="post"
                          onsubmit="return confirm('User »{{ u.email }}« wirklich löschen?')">
                      <button type="submit" class="btn btn-outline-danger btn-sm">Löschen</button>
                    </form>
                    <a href="/admin/users/edit/{{ u.email }}" class="btn btn-outline-secondary btn-sm">Bearbeiten</a>
                    <form action="/admin/users/reset-password/{{ u.email }}" method="post" style="display:inline">
                      <button type="submit" class="btn btn-outline-warning btn-sm">Reset</button>
                    </form>
                    {% else %}
                    <span class="text-muted small">(aktueller User)</span>
                    {% endif %}
                  </div>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>
</div>

{% include "_footer.html" %}
</div>

</body>
</html>