<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CANCOM Simple Signage – User anlegen</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" %}
</head>
<body>
<div class="page">

{% set brand_subtitle = "User anlegen" %}
{% 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" href="/admin/users"><i class="ti ti-users me-1"></i>Userliste</a>
          <a class="btn btn-white active" 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" style="max-width:600px;">

    <div class="card">
      <div class="card-header">
        <h3 class="card-title"><i class="ti ti-user-plus me-1"></i>Neuen User anlegen</h3>
      </div>
      <div class="card-body">
        <form action="/admin/users/create" method="post">
          <div class="mb-3">
            <label class="form-label">E-Mail (Username)</label>
            <input type="email" name="email" class="form-control" placeholder="user@example.com" required>
          </div>
          <div class="row g-3 mb-3">
            <div class="col-md-6">
              <label class="form-label">Vorname</label>
              <input type="text" name="first_name" class="form-control" placeholder="Vorname">
            </div>
            <div class="col-md-6">
              <label class="form-label">Nachname</label>
              <input type="text" name="last_name" class="form-control" placeholder="Nachname">
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label">Passwort</label>
            <input type="password" name="password" class="form-control" placeholder="Passwort" minlength="6" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Rolle</label>
            <select name="role" class="form-select" id="role-select">
              <option value="user" selected>User</option>
              <option value="superuser">Superuser</option>
              <option value="admin">Admin</option>
            </select>
          </div>
          <div class="mb-3" id="sites-select-wrapper">
            <label class="form-label">Standort-Berechtigungen</label>
            <div class="dropdown">
              <button class="btn btn-outline-secondary w-100 text-start" type="button"
                      data-bs-toggle="dropdown" aria-expanded="false">
                <span id="sites-btn-text">Standorte auswählen</span>
                <i class="ti ti-chevron-down float-end"></i>
              </button>
              <div class="dropdown-menu p-2" style="min-width:220px;" id="sites-dropdown-menu">
                {% for s in all_sites %}
                  <label class="dropdown-item d-flex align-items-center gap-2 px-2 py-1">
                    <input class="form-check-input m-0" type="checkbox" name="sites" value="{{ s }}">
                    <span>{{ s | capitalize }}</span>
                  </label>
                {% endfor %}
              </div>
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label">Abteilung</label>
            <input type="text" name="department" class="form-control" placeholder="z. B. Marketing">
          </div>
          <div class="mb-3">
            <label class="form-label">Bemerkung</label>
            <textarea name="notes" class="form-control" rows="2" placeholder="Interne Notiz"></textarea>
          </div>
          <button type="submit" class="btn btn-primary">User anlegen</button>
          <a href="/admin/users" class="btn btn-outline-secondary ms-2">Abbrechen</a>
        </form>
      </div>
    </div>

  </div>
</div>

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

<script>
document.addEventListener("DOMContentLoaded", function () {
  const roleSelect = document.getElementById("role-select");
  const sitesWrapper = document.getElementById("sites-select-wrapper");
  roleSelect.addEventListener("change", function () {
    sitesWrapper.style.display = (this.value === "admin" || this.value === "superuser") ? "none" : "block";
  });
  if (roleSelect.value === "admin" || roleSelect.value === "superuser") sitesWrapper.style.display = "none";

  const dropdownMenu = document.getElementById("sites-dropdown-menu");
  const btnText = document.getElementById("sites-btn-text");
  if (dropdownMenu) {
    dropdownMenu.addEventListener("change", function () {
      const checked = dropdownMenu.querySelectorAll("input:checked");
      const total = dropdownMenu.querySelectorAll("input").length;
      btnText.textContent = checked.length === 0
        ? "Standorte auswählen"
        : checked.length === total
          ? "Alle Standorte"
          : checked.length + " von " + total + " ausgewählt";
    });
  }
});
</script>

</body>
</html>