{% extends 'base.html' %}

{% block content %}
<div class="container my-5">
    <h2 class="text-center mb-4">All Clubs</h2>
    {% if message %}
    <div class="alert alert-success" role="alert">
        {{ message }}
    </div>
    {% endif %}
    <div class="row">
        {% for club in clubs %}
        <div class="col-md-4 mb-4">
            <div class="card">
                <div class="card-body">
                    <h5 class="card-title">{{ club.name }}</h5>
                    <p class="card-text">{{ club.description }}</p>
                    <form method="POST">
                        {% csrf_token %}
                        <input type="hidden" name="club_id" value="{{ club.id }}">
                        <button type="submit" class="btn btn-primary">Join Club</button>
                    </form>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
