{% extends "base.html" %}
{% load i18n %}

{% block content %}
<div class="container-fluid py-4">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0">
            <i class="bi bi-people me-2"></i>{% translate "Équipes" %}
        </h2>
        <div class="d-flex gap-2">
            {% if is_admin %}
            <a href="{% url 'notifications:team_create' %}" class="btn btn-primary btn-sm">
                <i class="bi bi-plus-circle me-1"></i>{% translate "Nouvelle équipe" %}
            </a>
            {% endif %}
            <a href="{% url 'notifications:inbox' %}" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left me-1"></i>{% translate "Retour aux notifications" %}
            </a>
        </div>
    </div>

    {% if teams %}
    <div class="row g-3">
        {% for team in teams %}
        <div class="col-md-6 col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h6 class="card-title mb-1">
                                <i class="bi bi-people-fill me-1 text-primary"></i>{{ team.name }}
                            </h6>
                            {% if team.description %}
                            <p class="text-muted small mb-2">{{ team.description }}</p>
                            {% endif %}
                        </div>
                        {% if is_admin %}
                        <div class="dropdown">
                            <button class="btn btn-link btn-sm text-muted p-0" data-bs-toggle="dropdown">
                                <i class="bi bi-three-dots-vertical"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end">
                                <li>
                                    <a class="dropdown-item" href="{% url 'notifications:team_edit' team.pk %}">
                                        <i class="bi bi-pencil me-2"></i>{% translate "Modifier" %}
                                    </a>
                                </li>
                                <li>
                                    <form method="post" action="{% url 'notifications:team_delete' team.pk %}"
                                          onsubmit="return confirm('{% translate "Supprimer cette équipe ?" %}')">
                                        {% csrf_token %}
                                        <button type="submit" class="dropdown-item text-danger">
                                            <i class="bi bi-trash me-2"></i>{% translate "Supprimer" %}
                                        </button>
                                    </form>
                                </li>
                            </ul>
                        </div>
                        {% endif %}
                    </div>
                    <div class="d-flex flex-wrap gap-1 mt-2">
                        {% for member in team.members.all %}
                        <span class="badge bg-light text-dark" title="{{ member.get_full_name|default:member.username }}">
                            {{ member.get_full_name|default:member.username }}
                        </span>
                        {% empty %}
                        <span class="text-muted small">{% translate "Aucun membre" %}</span>
                        {% endfor %}
                    </div>
                </div>
                <div class="card-footer bg-transparent border-top text-muted small">
                    {{ team.members.count }} {% translate "membre(s)" %}
                    {% if team.created_by %}
                    &middot; {% translate "Créée par" %} {{ team.created_by.get_full_name|default:team.created_by.username }}
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center py-5 text-muted">
        <i class="bi bi-people" style="font-size: 3rem;"></i>
        <p class="mt-3">{% translate "Aucune équipe définie." %}</p>
        {% if is_admin %}
        <a href="{% url 'notifications:team_create' %}" class="btn btn-primary mt-2">
            <i class="bi bi-plus-circle me-1"></i>{% translate "Créer une équipe" %}
        </a>
        {% endif %}
    </div>
    {% endif %}

</div>
{% endblock content %}