{% extends "setup/layout.html" %}

{% block content %}
<div class="ui-pane p-6">
  <div class="mb-6">
    <p class="ui-eyebrow">Step 1 of 6</p>
    <h1 class="ui-page-title">Create Admin Account</h1>
    <p class="ui-page-subtitle">This will be the first administrator for your Governor installation.</p>
  </div>

  <form method="post" action="/setup/1" class="space-y-5">

    <div>
      <label class="ui-form-label" for="email">Email address</label>
      <input
        class="ui-form-input mt-2 px-4 py-2.5 {% if errors and errors.email %}border-rose-400 dark:border-rose-500{% endif %}"
        type="email"
        name="email"
        id="email"
        value="{{ email or '' }}"
        placeholder="admin@yourcompany.com"
        required
        autofocus
      />
      {% if errors and errors.email %}
        <p class="mt-1.5 text-sm text-rose-600 dark:text-rose-400">{{ errors.email }}</p>
      {% endif %}
    </div>

    <div>
      <label class="ui-form-label" for="password">Password</label>
      <div class="relative mt-2">
        <input
          class="ui-form-input px-4 py-2.5 pr-10 {% if errors and errors.password %}border-rose-400 dark:border-rose-500{% endif %}"
          type="password"
          name="password"
          id="password"
          placeholder="At least 8 characters"
          required
        />
        <button type="button" onclick="togglePassword('password', this)" class="absolute inset-y-0 right-3 flex items-center text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
          <svg class="eye-open w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
          <svg class="eye-closed w-4 h-4 hidden" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/></svg>
        </button>
      </div>
      {% if errors and errors.password %}
        <p class="mt-1.5 text-sm text-rose-600 dark:text-rose-400">{{ errors.password }}</p>
      {% endif %}
    </div>

    <div>
      <label class="ui-form-label" for="password_confirm">Confirm password</label>
      <div class="relative mt-2">
        <input
          class="ui-form-input px-4 py-2.5 pr-10 {% if errors and errors.password_confirm %}border-rose-400 dark:border-rose-500{% endif %}"
          type="password"
          name="password_confirm"
          id="password_confirm"
          placeholder="Re-enter password"
          required
        />
        <button type="button" onclick="togglePassword('password_confirm', this)" class="absolute inset-y-0 right-3 flex items-center text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
          <svg class="eye-open w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
          <svg class="eye-closed w-4 h-4 hidden" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"/></svg>
        </button>
      </div>
      {% if errors and errors.password_confirm %}
        <p class="mt-1.5 text-sm text-rose-600 dark:text-rose-400">{{ errors.password_confirm }}</p>
      {% endif %}
    </div>

    <button type="submit" class="w-full ui-btn-primary py-2.5 mt-2">
      <span class="btn-label">Create account and continue</span>
      <svg class="btn-spinner w-4 h-4 mx-auto" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/></svg>
    </button>
  </form>
</div>

<script>
function togglePassword(fieldId, btn) {
  var input = document.getElementById(fieldId);
  var isHidden = input.type === 'password';
  input.type = isHidden ? 'text' : 'password';
  btn.querySelectorAll('.eye-open').forEach(function(el) { el.classList.toggle('hidden', isHidden); });
  btn.querySelectorAll('.eye-closed').forEach(function(el) { el.classList.toggle('hidden', !isHidden); });
}
</script>
{% endblock %}