{% extends "layout.html" %}

{% block title %}Register{% endblock %}

{% block content %}
<div class="form-container">
  <h2>Register</h2>
  <form method="POST" class="form-card">
    {{ form.hidden_tag() }}

    <div class="form-group">
      {{ form.username.label(class="form-label") }}
      {{ form.username(class="form-input", placeholder=form.username.label.text) }}
      {% for error in form.username.errors %}
        <span class="error">{{ error }}</span>
      {% endfor %}
    </div>

    <div class="form-group">
      {{ form.email.label(class="form-label") }}
      {{ form.email(class="form-input", placeholder=form.email.label.text) }}
      {% for error in form.email.errors %}
        <span class="error">{{ error }}</span>
      {% endfor %}
    </div>

    <div class="form-group">
      {{ form.password.label(class="form-label") }}
      {{ form.password(class="form-input", placeholder=form.password.label.text) }}
      {% for error in form.password.errors %}
        <span class="error">{{ error }}</span>
      {% endfor %}
    </div>

    <div class="form-group">
      {{ form.confirm_password.label(class="form-label") }}
      {{ form.confirm_password(class="form-input", placeholder=form.confirm_password.label.text) }}
      {% for error in form.confirm_password.errors %}
        <span class="error">{{ error }}</span>
      {% endfor %}
    </div>

    <div class="form-actions">
      {{ form.submit(class="form-button") }}
    </div>
  </form>

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