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

{% block title %}Teams{% endblock %}

{% block content %}
<div data-testid="teams-browse-page">

    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb mb-0">
            <li class="breadcrumb-item"><a href="{% url 'index' %}">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Teams</li>
        </ol>
    </nav>

    <div class="hg-page-header mb-3" data-testid="teams-browse-header">
        <div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
            <div>
                <h1 class="hg-page-title d-flex align-items-center gap-2 mb-1">
                    <i class="fa-solid fa-users hg-page-title-icon text-primary" aria-hidden="true"></i>
                    <span>Teams</span>
                </h1>
                <p class="text-muted small mb-0">
                    {% if team_count %}
                    {{ team_count }} team{{ team_count|pluralize }} — discover and join collaborative communities
                    {% else %}
                    Discover and join collaborative communities to share playbooks with the right people
                    {% endif %}
                </p>
            </div>
            <div role="toolbar" aria-label="Team actions" class="d-flex flex-wrap gap-2 align-items-center">
                <a href="{% url 'teams:teams_create' %}"
                   class="btn btn-primary"
                   data-testid="create-team-btn"
                   data-bs-toggle="tooltip"
                   title="Create a new team">
                    <i class="fa-solid fa-plus me-1"></i> Create Team
                </a>
            </div>
        </div>
    </div>

    <div class="card mb-4 border-0 shadow-sm rounded-3" data-testid="teams-filter-bar">
        <div class="card-body">
            <form method="get" action="." role="search">
                <div class="row g-3 mb-0">
                    <div class="col-12 col-md">
                        <label class="form-label hg-label-caps mb-1" for="teams-search-input">Search</label>
                        <div class="input-group">
                            <span class="input-group-text"><i class="fa-solid fa-magnifying-glass"></i></span>
                            <input type="search"
                                   id="teams-search-input"
                                   class="form-control"
                                   name="q"
                                   placeholder="Search by name or description…"
                                   value="{{ search_query }}"
                                   data-testid="teams-search-input"
                                   aria-label="Search teams">
                        </div>
                    </div>
                    <div class="col-12 col-md-4 col-lg-3">
                        <label class="form-label hg-label-caps mb-1" for="teams-category-filter">Category</label>
                        <select id="teams-category-filter"
                                class="form-select form-select-sm bg-body-secondary border-0 rounded-2"
                                name="category"
                                data-testid="teams-category-filter"
                                aria-label="Filter by category">
                            <option value="">All categories</option>
                            {% for cat in categories %}
                            <option value="{{ cat }}" {% if active_category == cat %}selected{% endif %}>{{ cat }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-12 col-md-auto d-flex align-items-end gap-2">
                        <a href="{% url 'teams:teams_browse' %}"
                           class="btn btn-outline-secondary btn-sm"
                           data-testid="filter-clear"
                           data-bs-toggle="tooltip"
                           title="Clear filters">
                            <i class="fa-solid fa-xmark me-1"></i> Clear
                        </a>
                        <button class="btn btn-outline-primary btn-sm" type="submit"
                                data-bs-toggle="tooltip" title="Apply filters">
                            <i class="fa-solid fa-filter me-1"></i> Filter
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {% if search_query or active_category %}
    <div class="mb-3 d-flex gap-2 flex-wrap" data-testid="active-filters">
        {% if active_category %}
        <span class="badge rounded-pill border text-body d-flex align-items-center gap-1 px-3 py-2"
              data-testid="filter-chip-category">
            Category: {{ active_category }}
            <a href="{% url 'teams:teams_browse' %}{% if search_query %}?q={{ search_query|urlencode }}{% endif %}"
               class="btn-close btn-close-sm ms-1" aria-label="Remove category filter"
               style="font-size:0.6rem;"></a>
        </span>
        {% endif %}
        {% if search_query %}
        <span class="badge rounded-pill border text-body d-flex align-items-center gap-1 px-3 py-2"
              data-testid="filter-chip-search">
            Search: {{ search_query }}
            <a href="{% url 'teams:teams_browse' %}{% if active_category %}?category={{ active_category|urlencode }}{% endif %}"
               class="btn-close btn-close-sm ms-1" aria-label="Remove search filter"
               style="font-size:0.6rem;"></a>
        </span>
        {% endif %}
    </div>
    {% endif %}

    {% if teams %}
    <div class="row" data-testid="teams-grid">
        {% for team in teams %}
            {% include "teams/_team_list_card.html" %}
        {% endfor %}
    </div>
    {% else %}
    <div class="card border-0 shadow-sm rounded-3 text-center py-5" data-testid="teams-empty-state">
        <div class="card-body">
            <i class="fa-solid fa-users-slash fa-4x text-muted mb-3"></i>
            {% if search_query or active_category %}
            <h4 class="text-muted">No teams found matching your filters.</h4>
            <p class="text-muted mb-0">Try a different search term or browse all teams.</p>
            {% else %}
            <h4 class="text-muted">No teams yet.</h4>
            <p class="text-muted mb-0">Be the first to create a team and start collaborating.</p>
            {% endif %}
            <div class="d-flex justify-content-center gap-2 flex-wrap mt-4">
                <a href="{% url 'teams:teams_browse' %}" class="btn btn-outline-secondary"
                   data-testid="clear-search-btn">
                    <i class="fa-solid fa-xmark me-1"></i> Clear Filters
                </a>
                <a href="{% url 'teams:teams_create' %}" class="btn btn-primary"
                   data-testid="create-new-team-btn">
                    <i class="fa-solid fa-plus me-1"></i> Create New Team
                </a>
            </div>
        </div>
    </div>
    {% endif %}

</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    console.log('[teams:browse] page loaded | team_count={{ team_count }} | q="{{ search_query }}" | category="{{ active_category }}"');

    const searchInput = document.getElementById('teams-search-input');
    if (searchInput) {
        searchInput.addEventListener('input', function () {
            console.log('[teams:browse] search input changed:', this.value);
        });
    }

    const categoryFilter = document.getElementById('teams-category-filter');
    if (categoryFilter) {
        categoryFilter.addEventListener('change', function () {
            console.log('[teams:browse] category filter changed:', this.value);
        });
    }

    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
        new bootstrap.Tooltip(el);
    });
});
</script>
{% endblock %}