{% extends "bases/login_base.html" %}
{% block content %}
<div class="card shadow-lg p-4" style="max-width: 400px; width: 100%;">
  <div class="card-body text-center">
      <h5 class="card-title mb-4">
          <i class="fa-solid fa-user-plus me-2"></i> Create Your Account
      </h5>

      <form method="post" class="text-start">
        <div class="mb-3">
          <label for="name" class="form-label">Name <span class="text-muted">(optional)</span></label>
          <input id="name" name="name" type="text" class="form-control" placeholder="Jane Doe">
        </div>

        <div class="mb-3">
          <label for="email" class="form-label">Email</label>
          <input id="email" name="email" type="email" class="form-control" required placeholder="you@example.com">
        </div>

        <div class="mb-3">
          <label for="password" class="form-label">Password</label>
          <input id="password" name="password" type="password" class="form-control" required>
        </div>

        <div class="d-flex justify-content-end">
          <button type="submit" class="btn btn-success w-100">Sign up</button>
        </div>
      </form>
  </div>

  <div class="card-footer text-center">
      <small>Already have an account?</small>
      <a href="{{ url_for('auth.login') }}" class="btn btn-link p-0 ms-1">Sign in</a>
  </div>
</div>
{% endblock %}