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

{% block title %}Browse - Packs Site{% endblock %}

{% block content %}
<div class="browse-header">
    <h1><i class="fas fa-compass"></i> Browse</h1>
    <form method="get" action="{% url 'library:browse' %}" class="browse-search-form">
        <div class="browse-search-row">
            <input type="text" name="q" value="{{ q }}" placeholder="Search packs, tags…" class="browse-search-input">
            <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i></button>
        </div>
    </form>
</div>

<div class="browse-layout">
    <aside class="browse-filters">
        <div class="card filter-card">
            <h3>Category</h3>
            <div class="filter-category">
                {% for value, label, url in category_menu %}
                    <a href="{{ url }}" class="filter-link {% if category == value %}active{% endif %}">{{ label }}</a>
                {% endfor %}
            </div>
        </div>

        {% for group in tag_groups %}
            <div class="card filter-card">
                <h3>
                    <span class="tag-dot" style="background: {{ group.category.color }};"></span>
                    {{ group.category.name }}
                </h3>
                <div class="filter-tags">
                    {% for item in group.items %}
                        <a href="{{ item.url }}" class="tag-chip filter-tag {% if item.active %}active{% endif %}"
                           style="border-color: {{ item.color }}; color: {{ item.color }};">
                            {{ item.name }} <span class="tag-count">{{ item.count }}</span>
                        </a>
                    {% endfor %}
                </div>
            </div>
        {% empty %}
            <div class="card filter-card">
                <p class="filter-empty">No tags yet. Create a project to get started!</p>
            </div>
        {% endfor %}
    </aside>

    <div class="browse-main">
        <div class="browse-toolbar">
            <span class="browse-count">{{ projects.paginator.count }} project{{ projects.paginator.count|pluralize }}</span>
            <form method="get" action="{% url 'library:browse' %}" class="browse-sort-form">
                {% if q %}<input type="hidden" name="q" value="{{ q }}">{% endif %}
                {% if category %}<input type="hidden" name="category" value="{{ category }}">{% endif %}
                {% for t in active_tags %}<input type="hidden" name="tag" value="{{ t }}">{% endfor %}
                <select name="sort" onchange="this.form.submit()">
                    <option value="recent" {% if sort == 'recent' %}selected{% endif %}>Newest</option>
                    <option value="downloads" {% if sort == 'downloads' %}selected{% endif %}>Most downloaded</option>
                    <option value="most_liked" {% if sort == 'most_liked' %}selected{% endif %}>Most liked</option>
                    <option value="most_voted" {% if sort == 'most_voted' %}selected{% endif %}>Most voted</option>
                    <option value="name" {% if sort == 'name' %}selected{% endif %}>Name A-Z</option>
                </select>
            </form>
        </div>

        <div class="pack-grid">
            {% for project in projects %}
                {% include 'library/_project_card.html' %}
            {% empty %}
                <div class="browse-empty">
                    <i class="fas fa-box-open"></i>
                    <p>No projects match your filters.</p>
                </div>
            {% endfor %}
        </div>

        {% if projects.paginator.num_pages > 1 %}
            <div class="pagination">
                {% if projects.has_previous %}
                    <a class="btn btn-secondary" href="?{{ query_string }}&page={{ projects.previous_page_number }}">Previous</a>
                {% endif %}
                <span class="page-info">Page {{ projects.number }} of {{ projects.paginator.num_pages }}</span>
                {% if projects.has_next %}
                    <a class="btn btn-secondary" href="?{{ query_string }}&page={{ projects.next_page_number }}">Next</a>
                {% endif %}
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}