{% extends "layout.html" %}

{% block content %}
<div class="container-tight py-4">
  <div class="text-center mb-4">
    <h1>Create an account</h1>
  </div>

  <form class="card card-md" method="POST" action="{{ url_for('auth.register') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <div class="card-body">
      {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
      {% for category, message in messages %}
      <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
      {% endfor %}
      {% endif %}
      {% endwith %}

      <div class="mb-3">
        <label class="form-label">Email address</label>
        <input type="email" name="email" class="form-control" placeholder="your@email.com" required>
      </div>

      <div class="mb-3">
        <label class="form-label">Username</label>
        <input type="text" name="username" class="form-control" placeholder="Username" required>
      </div>

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

      <div class="mb-3">
        <label class="form-label">Confirm Password</label>
        <input type="password" name="password_confirm" class="form-control" placeholder="Confirm password" required>
        <div class="form-text text-muted">
          Make sure to use a strong, unique password
        </div>
      </div>

      <div class="form-footer">
        <button type="submit" class="btn btn-primary w-100">Create account</button>
      </div>
    </div>
  </form>

  <div class="text-center text-muted mt-3">
    Already have an account? <a href="{{ url_for('auth.login') }}" tabindex="-1">Sign in</a>
  </div>
</div>
{% endblock %}