{% extends 'base.html' %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-12 col-lg-7">
    <div class="form-container">
      <h1 class="h3 mb-3">Create Account</h1>
      <p class="text-muted mb-4">Join CDC to manage orders, profile details, and payments in one place.</p>

      <form method="POST" action="{{ url_for('auth.register') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="row g-3">
          <div class="col-12 col-md-6">
            <label for="fname" class="form-label">First name</label>
            <input type="text" class="form-control" id="fname" name="fname" required placeholder="John">
          </div>
          <div class="col-12 col-md-6">
            <label for="lname" class="form-label">Last name</label>
            <input type="text" class="form-control" id="lname" name="lname" required placeholder="Doe">
          </div>
          <div class="col-12">
            <label for="username" class="form-label">Username</label>
            <input type="text" class="form-control" id="username" name="username" required placeholder="Enter a username">
          </div>
          <div class="col-12 col-md-6">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password" name="password" required placeholder="Enter a password">
          </div>
          <div class="col-12 col-md-6">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email" name="email" required placeholder="you@example.com">
          </div>
        </div>

        <button type="submit" class="btn btn-primary w-100 mt-4">Register</button>
      </form>
    </div>
  </div>
</div>
{% endblock %}