{% extends "base.html" %}

{% block main %}

<div class="container">
  <div class="row justify-content-center my-5" style="width: 100%;">
    <div class="col-md-6 mx-auto">
      <div class="card shadow p-4">
        <h2 class="text-center">Register</h2>

        <!-- Flash messages for feedback -->
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        <div class="mt-3">
          {% 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 %}
        </div>
        {% endif %}
        {% endwith %}

        <form method="POST" action="{{ url_for('register') }}">
          <div class="mb-3">
            <label for="username" class="form-label">Username:</label>
            <input
              type="text"
              class="form-control"
              id="username"
              name="username"
              placeholder="Enter your username"
              required
            />
          </div>

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

          <button type="submit" class="btn btn-primary w-100">Register</button>
        </form>

        <p class="mt-3 text-center">
          Already have an account?
          <a href="{{ url_for('login') }}">Login here</a>
        </p>
      </div>
    </div>
  </div>
</div>
<script src="{{ url_for('static', filename='js/register.js') }}"></script>

{% endblock main %}
