<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Benutzer anlegen</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
  </head>
  <body class="bg-light">
    <div class="container mt-5">
      <%- include("partials/flash") %>

      <div class="card shadow mx-auto" style="max-width: 500px">
        <div class="card-body">
          <h3 class="text-center mb-3">Benutzer anlegen</h3>

          <% if (error) { %>
          <div class="alert alert-danger"><%= error %></div>
          <% } %>

          <form method="POST" action="/admin/create-user">
            <!-- VORNAME -->
            <input
              class="form-control mb-3"
              name="first_name"
              placeholder="Vorname"
              required
            />

            <!-- NACHNAME -->
            <input
              class="form-control mb-3"
              name="last_name"
              placeholder="Nachname"
              required
            />

            <!-- TITEL -->
            <input
              class="form-control mb-3"
              name="title"
              placeholder="Titel (z.B. Dr., Prof.)"
            />

            <!-- BENUTZERNAME (LOGIN) -->
            <input
              class="form-control mb-3"
              name="username"
              placeholder="Benutzername (Login)"
              required
            />

            <!-- PASSWORT -->
            <input
              class="form-control mb-3"
              type="password"
              name="password"
              placeholder="Passwort"
              required
            />

            <!-- ROLLE -->
            <select
              class="form-select mb-3"
              name="role"
              id="roleSelect"
              required
            >
              <option value="">Rolle wählen</option>
              <option value="mitarbeiter">Mitarbeiter</option>
              <option value="arzt">Arzt</option>
            </select>

            <!-- ARZT-FELDER -->
            <div id="arztFields" style="display: none">
              <input
                class="form-control mb-3"
                name="fachrichtung"
                placeholder="Fachrichtung"
              />

              <input
                class="form-control mb-3"
                name="arztnummer"
                placeholder="Arztnummer"
              />
            </div>

            <button class="btn btn-primary w-100">Benutzer erstellen</button>
          </form>

          <div class="text-center mt-3">
            <a href="/dashboard">Zurück</a>
          </div>
        </div>
      </div>
    </div>

    <script>
      document
        .getElementById("roleSelect")
        .addEventListener("change", function () {
          const arztFields = document.getElementById("arztFields");
          arztFields.style.display = this.value === "arzt" ? "block" : "none";
        });
    </script>
    <script src="/js/admin_create_user.js" defer></script>
  </body>
</html>
