{% extends "base.html" %}

{% block title %}Groups{% endblock %}

{% block content %}
<div class="container">
    <h1>Groups</h1>
    <a href="{{ url_for('create_group') }}" class="btn btn-primary mb-3">Create New Group</a>

    <div class="row">
        {% for group in groups %}
        <div class="col-md-4 mb-3">
            <div class="card">
                <div class="card-body text-center">
                    {% if group.image_url %}
                        <img src="{{ url_for('static', filename='uploads/' + group.image_url) }}" class="rounded-circle img-fluid mb-3" style="width: 100px; height: 100px; object-fit: cover;" alt="{{ group.name }}">
                    {% else %}
                        <div class="rounded-circle bg-primary d-flex align-items-center justify-content-center mb-3 mx-auto" style="width: 100px; height: 100px;">
                            <span class="text-white" style="font-size: 2rem;">{{ group.name[0].upper() }}</span>
                        </div>
                    {% endif %}
                    <h5 class="card-title">{{ group.name }}</h5>
                    <p class="card-text">{{ group.description }}</p>
                    <a href="{{ url_for('group_detail', vanity_url=group.vanity_url) }}" class="btn btn-primary">View Group</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}