{% load i18n %}
{% if teams %}
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>{% trans "Team Name" %}</th>
                    <th>{% trans "Discord Role ID" %}</th>
                    <th>{% trans "Members" %}</th>
                    <th class="text-end">{% trans "Actions" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for team in teams %}
                <tr>
                    <td class="fw-medium">{{ team.name }}</td>
                    <td>
                        {% if team.discord_role_id %}
                            <span class="badge bg-secondary">{{ team.discord_role_id }}</span>
                        {% else %}
                            <span class="text-muted fst-italic">None</span>
                        {% endif %}
                    </td>
                    <td>
                        <span class="badge bg-info text-dark rounded-pill" title="{% trans 'Individual Users' %}">
                            <i class="fas fa-user me-1"></i>{{ team.members.count }}
                        </span>
                        {% if team.groups.count %}
                            <span class="badge bg-secondary rounded-pill ms-1" title="{% trans 'Auth Groups' %}">
                                <i class="fas fa-users-cog me-1"></i>{{ team.groups.count }}
                            </span>
                        {% endif %}
                    </td>
                    <td class="text-end text-nowrap">
                        <button type="button"
                                class="btn btn-sm btn-outline-secondary me-1"
                                data-bs-toggle="modal"
                                data-bs-target="#teamUsersModal"
                                hx-get="{% url 'aa_kanban:edit_kanban_team' team.id %}"
                                hx-target="#teamUsersModalBody"
                                title="{% trans 'Edit Team Settings' %}">
                            <i class="fas fa-edit"></i>
                        </button>
                        <button type="button"
                                class="btn btn-sm btn-outline-primary me-1"
                                data-bs-toggle="modal"
                                data-bs-target="#teamUsersModal"
                                hx-get="{% url 'aa_kanban:team_users_modal' team.id %}"
                                hx-target="#teamUsersModalBody"
                                title="{% trans 'Manage Members & Groups' %}">
                            <i class="fas fa-users"></i>
                        </button>
                        <button type="button"
                                class="btn btn-sm btn-outline-danger"
                                hx-post="{% url 'aa_kanban:delete_kanban_team' team.id %}"
                                hx-target="#team-list-container"
                                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                                hx-confirm="{% trans 'Are you sure you want to delete this team? Tickets assigned to it will lose their team assignment.' %}"
                                title="{% trans 'Delete Team' %}">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% else %}
    <div class="text-center text-muted py-4">
        <i class="fas fa-users fa-3x mb-3 text-light"></i>
        <p class="mb-0">{% trans "No teams created yet." %}</p>
    </div>
{% endif %}