fixed implementation of UGC content uploader

nonpacks/templates/library/browse.html

@@ -0,0 +1,89 @@
+{% 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="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 %}