finished Skin UGC

nonpacks/templates/library/project_detail.html

@@ -74,6 +74,7 @@
     {% if logical_manifest %}<button class="tab-btn" data-tab="logical" role="tab">Logical</button>{% endif %}
     {% if mods_manifest %}<button class="tab-btn" data-tab="mods" role="tab">Mods</button>{% endif %}
     {% if plugins_manifest %}<button class="tab-btn" data-tab="plugins" role="tab">Plugins</button>{% endif %}
+    {% if skins_manifest %}<button class="tab-btn" data-tab="skins" role="tab">Skins</button>{% endif %}
     <button class="tab-btn" data-tab="gallery" role="tab">Gallery</button>
 </div>
 
@@ -421,6 +422,37 @@
 </section>
 {% endif %}
 
+{% if skins_manifest %}
+<section class="tab-panel" id="tab-skins">
+    <div class="card">
+        <h2><i class="fas fa-user"></i> Skins</h2>
+        <div class="skin-grid">
+            {% for skin in skins_manifest.skins %}
+                <div class="skin-card">
+                    <img class="skin-preview" src="{% url 'library:pack_asset' project.slug versions.0.pk skin.member %}" alt="{{ skin.name }}" loading="lazy" title="{{ skin.name }}">
+                    <div class="skin-card-head">
+                        <strong>{{ skin.name }}</strong>
+                        <span class="skin-size-badge">{{ skin.width }}x{{ skin.height }}</span>
+                    </div>
+                    <div class="skin-card-actions">
+                        <label class="skin-model-label">
+                            Model
+                            <select class="skin-model-select">
+                                <option value="steve">Steve (wide)</option>
+                                <option value="alex">Alex (slim)</option>
+                            </select>
+                        </label>
+                        <button type="button" class="btn btn-secondary btn-sm skin-render-btn"
+                                data-member="{{ skin.member }}" data-name="{{ skin.name }}"
+                                data-base-url="{% url 'library:pack_asset' project.slug versions.0.pk 'ASSET' %}"><i class="fas fa-user"></i> Render</button>
+                    </div>
+                </div>
+            {% endfor %}
+        </div>
+    </div>
+</section>
+{% endif %}
+
 <section class="tab-panel" id="tab-gallery">
     <div class="card">
         <h2><i class="fas fa-images"></i> Gallery</h2>        <div class="gallery-grid">
@@ -454,7 +486,7 @@
 {% endblock %}
 
 {% block extra_js %}
-{% if models_manifest %}
+{% if models_manifest or skins_manifest %}
 <script src="{% static 'js/packs_preview.js' %}"></script>
 {% endif %}
 <script>
@@ -555,6 +587,9 @@
         document.querySelectorAll('.model-render-btn').forEach(btn => {
             btn.addEventListener('click', () => window.PacksPreview.open(btn));
         });
+        document.querySelectorAll('.skin-render-btn').forEach(btn => {
+            btn.addEventListener('click', () => window.PacksPreview.openSkin(btn));
+        });
     }
 
     // Live filter for the Mods tab.