{% extends "layout.html" %}

{% block content %}
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-6 col-lg-5">
      <div class="card shadow-sm mt-5">
        <div class="card-body p-5">
          <div class="text-center mb-4">
            <h2 class="card-title">Register</h2>
            <p class="text-muted">Create a new account</p>
          </div>

          {% 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 %}

          <form method="POST" action="{{ url_for('auth.register') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <div class="mb-3">
              <label for="email" class="form-label">Email address</label>
              <input type="email" class="form-control" id="email" name="email" required>
            </div>
            <div class="mb-3">
              <label for="password" class="form-label">Password</label>
              <input type="password" class="form-control" id="password" name="password" required>
            </div>
            <div class="mb-4">
              <label for="password_confirm" class="form-label">Confirm Password</label>
              <input type="password" class="form-control" id="password_confirm" name="password_confirm" required>
            </div>
            <button type="submit" class="btn btn-primary w-100">Register</button>
          </form>

          <div class="mt-4 text-center">
            <p>Already have an account? <a href="{{ url_for('auth.login') }}">Login here</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}