{% extends "base.html" %}
{% block title %}Create Account — Salesforce Security AI Scanner{% endblock %}
{% block content %}
<div class="content-wrapper d-flex align-items-center" style="min-height:90vh;">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-sm-10 col-md-6 col-lg-4">

        <div class="text-center mb-4">
          <i class="bi bi-person-plus-fill fs-1" style="color:#58a6ff;"></i>
          <h3 class="fw-bold mt-2 mb-1">Create your account</h3>
          <p class="text-muted small">Free access to all security scanners</p>
        </div>

        {% if error %}
        <div class="alert-danger-custom mb-3"><i class="bi bi-exclamation-triangle me-2"></i>{{ error }}</div>
        {% endif %}

        <div class="card p-4">
          <form method="post" action="/register">
            <div class="mb-3">
              <label class="form-label small fw-semibold">Username</label>
              <input type="text" name="username" class="form-control" placeholder="johndoe" minlength="3" required autofocus/>
              <div class="form-text" style="color:#8b949e;">Minimum 3 characters</div>
            </div>
            <div class="mb-3">
              <label class="form-label small fw-semibold">Email address</label>
              <input type="email" name="email" class="form-control" placeholder="you@example.com" required/>
            </div>
            <div class="mb-4">
              <label class="form-label small fw-semibold">Password</label>
              <input type="password" name="password" class="form-control" placeholder="At least 8 characters" minlength="8" required/>
            </div>
            <button type="submit" class="btn btn-primary w-100 fw-semibold">
              <i class="bi bi-rocket-takeoff me-1"></i>Create Account
            </button>
          </form>
        </div>

        <div class="card mt-3 p-3" style="background:#161b2280;">
          <p class="mb-0 small" style="color:#8b949e;">
            <i class="bi bi-info-circle me-1" style="color:#58a6ff;"></i>
            The first registered account automatically receives admin privileges.
          </p>
        </div>

        <p class="text-center mt-3 text-muted small">
          Already have an account? <a href="/login" style="color:#58a6ff;">Sign in</a>
        </p>

      </div>
    </div>
  </div>
</div>
{% endblock %}