<!DOCTYPE html>
<html lang="<%= lang %>">
  <head>
    <meta charset="UTF-8" />
    <title><%= t.adminCreateUser.title %></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"><%= t.adminCreateUser.title %></h3>

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

          <form method="POST" action="/admin/create-user">

            <input class="form-control mb-3" name="first_name"
              placeholder="<%= t.adminCreateUser.firstname %>" required />

            <input class="form-control mb-3" name="last_name"
              placeholder="<%= t.adminCreateUser.lastname %>" required />

            <input class="form-control mb-3" name="title"
              placeholder="<%= t.adminCreateUser.usertitle %>" />

            <input class="form-control mb-3" name="username"
              placeholder="<%= t.adminCreateUser.username %>" required />

            <input class="form-control mb-3" type="password" name="password"
              placeholder="<%= t.adminCreateUser.password %>" required />

            <select class="form-select mb-3" name="role" id="roleSelect" required>
              <option value=""><%= t.global.role %></option>
              <option value="mitarbeiter">Mitarbeiter</option>
              <option value="arzt">Arzt</option>
            </select>

            <div id="arztFields" style="display: none">
              <input class="form-control mb-3" name="fachrichtung"
                placeholder="<%= t.adminCreateUser.specialty %>" />
              <input class="form-control mb-3" name="arztnummer"
                placeholder="<%= t.adminCreateUser.doctornumber %>" />
            </div>

            <button class="btn btn-primary w-100"><%= t.adminCreateUser.createuser %></button>
          </form>

          <div class="text-center mt-3">
            <a href="/dashboard"><%= t.adminCreateUser.back %></a>
          </div>
        </div>
      </div>
    </div>

    <script src="/js/admin_create_user.js" defer></script>
  </body>
</html>
