{{ define "admin_user_create.pages.tmpl" }}
{{ template "head" . }}
<div class="columns">
  <!-- Sidebar -->
  {{ template "sidebar" . }}
  <div class="column is-10">
    <h1 class="title">Création d'un utilisateur</h1>

    <!-- Flash message -->
<div id="userFlash"></div>
<form hx-post="/api/user/create" hx-target="#userFlash" hx-swap="beforeend" class="box">

  <div class="field">
    <label class="label">Email</label>
    <div class="control">
      <input class="input" type="email" name="email" required placeholder="ex: admin@example.com">
    </div>
  </div>

  <div class="field">
    <label class="label">Mot de passe</label>
    <div class="control">
      <input class="input" type="password" name="password" required placeholder="Mot de passe">
    </div>
  </div>

  <div class="field">
    <label class="label">Rôle</label>
    <div class="control">
      <div class="select">
        <select name="role">
          <option value="CLIENT">Client</option>
          <option value="ADMIN">Admin</option>
        </select>
      </div>
    </div>
  </div>

  <div class="field">
    <label class="label">Crédits mensuels</label>
    <div class="control">
      <input class="input" type="number" name="monthly_credits" placeholder="100" min="1">
    </div>
  </div>

  <div class="field">
    <label class="label">WhatsApp Token</label>
    <div class="control">
      <input class="input" type="text" name="whatsapp_token" placeholder="EAAxxxxxxxxxxxxxxxxxx">
    </div>
  </div>

  <div class="field">
    <label class="label">Phone Number ID</label>
    <div class="control">
      <input class="input" type="text" name="whatsapp_phone_number_id" placeholder="123456789">
    </div>
  </div>

  <div class="field is-grouped mt-4">
    <div class="control">
      <button class="button is-success" type="submit" hx-ext="json-enc">✅ Créer</button>
    </div>
    <div class="control">
      <button type="button" class="button is-light" onclick="document.getElementById('createForm').innerHTML = ''">❌ Annuler</button>
    </div>
  </div>

</form>

{{ end }}