From b5aab085bcb59be40aaff7c6378792abe5859dc8 Mon Sep 17 00:00:00 2001
From: corbz <corbz.jones@gmail.com>
Date: Tue, 27 Feb 2024 23:45:46 +0000
Subject: [PATCH] dynamic template implementation

---
 apps/templates/home/main.html | 66 +++++++++++++++++++++--------------
 1 file changed, 39 insertions(+), 27 deletions(-)

diff --git a/apps/templates/home/main.html b/apps/templates/home/main.html
index 9c220b6..62320ab 100644
--- a/apps/templates/home/main.html
+++ b/apps/templates/home/main.html
@@ -68,33 +68,9 @@
             </div>
       
             <div class="masonry-item col-12">
-                <div class="row gap-20">
+                <div id="subscriptionContainer" class="row gap-20">
 
-                    <div class="col-md-3">
-                        <div class="layers bd bg-body p-20">
-                            <div class="layer w-100 mB-10">
-                                <h5 class="lh-1">BBC News · Top Stories</h5>
-                            </div>
-                            <div class="layer w-100 mB-10">
-                                <h6 class="lh-1">UUID</h6>
-                                <span>ed078c82-1693-40f0-b7e9-aab1d7db2c0e
-                                </span>
-                            </div>
-                            <div class="layer w-100 mB-5">
-                                <h6 class="lh-1">RSS URL</h6>
-                                <a href="http://feeds.bbci.co.uk/news/rss.xml">http://feeds.bbci.co.uk/news/rss.xml</a>
-                            </div>
-                            <div class="layer d-flex flex-wrap w-100">
-                                <div class="me-auto">
-                                    <button class="btn btn-sm btn-primary mR-5 mT-10">Link to Channel</button>
-                                </div>
-                                <div>
-                                    <button class="btn btn-sm btn-secondary mT-10">Edit</button>
-                                    <button class="btn btn-sm btn-danger mL-5 mT-10">Delete</button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
+                    <!-- Subscriptions Here! -->
 
                 </div>
             </div>
@@ -106,4 +82,40 @@
 {% endblock content %}
 
 <!-- Specific Page JS goes HERE  -->
-{% block javascripts %}{% endblock javascripts %}
+{% block javascripts %}
+<script id="subItemTemplate" type="text/template">
+    <div class="col-md-3">
+        <div class="layers bd bg-body p-20">
+            <div class="layer w-100 mB-10">
+                <h5 class="lh-1 sub-name"></h5>
+            </div>
+            <div class="layer w-100 mB-10">
+                <h6 class="lh-1">UUID</h6>
+                <span class=sub-uuid></span>
+            </div>
+            <div class="layer w-100 mB-5">
+                <h6 class="lh-1">RSS URL</h6>
+                <a class="sub-rss"></a>
+            </div>
+            <div class="layer d-flex flex-wrap w-100">
+                <div class="me-auto">
+                    <button class="btn btn-sm btn-primary mR-5 mT-10">Link to Channel</button>
+                </div>
+                <div>
+                    <button class="btn btn-sm btn-secondary mT-10">Edit</button>
+                    <button class="btn btn-sm btn-danger mL-5 mT-10">Delete</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</script>
+<script type="text/javascript">
+    function createSubscriptionItem(data) {
+        var template = $($("#subItemTemplate").html());
+        template.find(".sub-name").text(data.name);
+        template.find(".sub-uuid").text(data.uuid);
+        template.find(".sub-rss").text(data.rss_url);
+        return template
+    }
+</script>
+{% endblock javascripts %}