fixed implementation of UGC content uploader

nonpacks/templates/profiles/profile.html

@@ -1,5 +1,6 @@
 {% extends 'base.html' %}
 {% load static %}
+{% load markdown %}
 
 {% block title %}{{ profile_user.username }} - Packs{% endblock %}
 
@@ -38,11 +39,16 @@
                     {{ bio_form.bio.errors }}
                     {{ bio_form.bio }}
                 </div>
-                <button type="submit" class="btn btn-primary">Save bio</button>
+                <p class="bio-help"><i class="fas fa-info-circle"></i> Supports <a href="#" data-md-help>Markdown</a> — headings, lists, links, code, tables and more.</p>
+                <div class="bio-actions">
+                    <button type="submit" class="btn btn-primary">Save bio</button>
+                    <button type="button" class="btn btn-secondary" data-bio-toggle>Preview</button>
+                </div>
             </form>
+            <div class="markdown-preview markdown-body" id="bio-preview" hidden></div>
         {% else %}
             {% if profile.bio %}
-                <p class="profile-bio">{{ profile.bio }}</p>
+                <div class="profile-bio markdown-body">{{ profile.bio|markdown }}</div>
             {% else %}
                 <p class="profile-bio-empty"><i class="fas fa-user"></i> {{ profile_user.username }} hasn't written a bio yet.</p>
             {% endif %}
@@ -54,16 +60,67 @@
             <h2>Packs by {{ profile_user.username }}</h2>
         </div>
         <div class="pack-grid">
-            {% comment %} Placeholder — replace with real Pack objects when the library model lands. {% endcomment %}
-            <div class="pack-card pack-card-empty">
-                <div class="pack-card-thumb">
-                    <i class="fas fa-box-open"></i>
+            {% for project in projects %}
+                {% include 'library/_project_card.html' %}
+            {% empty %}
+                <div class="pack-card pack-card-empty">
+                    <div class="pack-card-thumb">
+                        <i class="fas fa-box-open"></i>
+                    </div>
+                    <div class="pack-card-body">
+                        <h3>No packs yet</h3>
+                        <p class="pack-card-desc">This creator hasn't published anything yet.</p>
+                    </div>
                 </div>
-                <div class="pack-card-body">
-                    <h3>No packs yet</h3>
-                    <p class="pack-card-desc">This creator hasn't published any datapacks.</p>
-                </div>
-            </div>
+            {% endfor %}
         </div>
     </section>
 {% endblock %}
+
+{% block extra_js %}
+{% if is_owner %}
+    <script>
+    (function () {
+        const textarea = document.getElementById('{{ bio_form.bio.id_for_label }}');
+        const preview = document.getElementById('bio-preview');
+        const toggleBtn = document.querySelector('[data-bio-toggle]');
+        if (!textarea || !preview || !toggleBtn) return;
+
+        const url = "{% url 'profiles:bio_preview' %}";
+        let timer = null;
+
+        function refreshPreview() {
+            fetch(url, {
+                method: 'POST',
+                headers: {
+                    'X-CSRFToken': getCookie('csrftoken'),
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/x-www-form-urlencoded',
+                },
+                body: 'bio=' + encodeURIComponent(textarea.value),
+            })
+            .then(r => r.json())
+            .then(data => { preview.innerHTML = data.html; })
+            .catch(() => { preview.innerHTML = '<p><em>Preview unavailable.</em></p>'; });
+        }
+
+        toggleBtn.addEventListener('click', () => {
+            if (preview.hidden) {
+                preview.hidden = false;
+                toggleBtn.textContent = 'Hide preview';
+                refreshPreview();
+            } else {
+                preview.hidden = true;
+                toggleBtn.textContent = 'Preview';
+            }
+        });
+
+        textarea.addEventListener('input', () => {
+            if (preview.hidden) return;
+            clearTimeout(timer);
+            timer = setTimeout(refreshPreview, 300);
+        });
+    })();
+    </script>
+{% endif %}
+{% endblock %}