<%- include('../partials/header', { title: 'Create First Admin' }) %>

<div class="admin-login-wrap">
  <div class="admin-login-card">

    <div class="admin-login-logo">
      <div class="admin-login-icon">&#128272;</div>
      <h1>First-Time Setup</h1>
      <p>Create the initial admin account</p>
    </div>

    <% if (typeof success !== 'undefined' && success) { %>

      <div class="alert alert-success"><%= success %></div>
      <p style="text-align:center; margin-top: 1.5rem;">
        <a href="/admin/login" class="btn btn-primary">Go to Login &rarr;</a>
      </p>

    <% } else { %>

      <% if (typeof error !== 'undefined' && error) { %>
        <div class="alert alert-error"><%= error %></div>
      <% } %>

      <form method="POST" action="/admin/bootstrap" class="form">
        <!-- Setup token and CSRF token carried as hidden fields -->
        <input type="hidden" name="token"  value="<%= typeof token     !== 'undefined' ? token     : '' %>">
        <input type="hidden" name="_csrf"  value="<%= typeof csrfToken !== 'undefined' ? csrfToken : '' %>">

        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" id="username" name="username" required
                 placeholder="e.g. tony" class="form-input" autofocus
                 autocomplete="username" minlength="3">
        </div>

        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" required
                 placeholder="At least 8 characters" class="form-input"
                 autocomplete="new-password" minlength="8">
        </div>

        <div class="form-group">
          <label for="confirmPassword">Confirm Password</label>
          <input type="password" id="confirmPassword" name="confirmPassword" required
                 placeholder="Repeat password" class="form-input"
                 autocomplete="new-password" minlength="8">
        </div>

        <button type="submit" class="btn btn-primary btn-large btn-full">
          Create Admin Account
        </button>
      </form>

      <p class="admin-login-footer" style="color: #888; font-size: 0.8rem; margin-top: 1.5rem;">
        This form is only available before any admin account exists.<br>
        It will be permanently disabled once you submit.
      </p>

    <% } %>

  </div>
</div>

<%- include('../partials/footer') %>
