{% extends 'base.html' %}
{% block title %}Register{% endblock %}
{% block content %}
<div class="card shadow p-4 mx-auto" style="max-width: 500px;">
  <h3 class="text-center mb-4">Create Account</h3>
  <form method="POST">
    {% csrf_token %}
    
    <div class="mb-3">
      <label for="id_username" class="form-label">Username</label>
      <input type="text" name="username" class="form-control" id="id_username" required>
    </div>

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

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

    <button type="submit" class="btn btn-primary w-100">Register</button>
  </form>
  <div class="text-center mt-3">
    <a href="{% url 'login' %}">Already have an account? Login</a>
  </div>
</div>
{% endblock %}