1 files changed, 82 insertions, 0 deletions
diff --git a/alphabetlearning/templates/resources/resource_detail.html b/alphabetlearning/templates/resources/resource_detail.html
new file mode 100644
index 0000000..6c6ceda
--- /dev/null
+++ b/alphabetlearning/templates/resources/resource_detail.html
@@ -0,0 +1,82 @@
+{% extends 'base.html' %}
+
+{% load markdown_extras %}
+
+{% block content %}
+
+<div class="row my-4">
+    <div class="col-md-7">
+        {% for tn_url, tn_filename in resource.thumbnails %}
+        <div>
+            <img class="img-fluid rounded mx-1" src="{{ tn_url }}" alt="{{ tn_filename }}"/>
+        </div>
+        {% endfor %}
+    </div> 
+    <div class="col-md-5">
+        <div class="row">
+            <div class="col">
+                <p class="my-1 fw-bold fs-3">{{ resource.name }}</p>
+            </div> 
+        </div>
+        <div class="d-flex justify-content-between align-items-center">
+            <div>
+                <p class="boo-magenta my-1 fw-semibold fs-5">{{ resource.main_resource_category }}</p>
+            </div> 
+            <div>
+                <p class="text-secondary my-1 fw-semibold fs-5">{{ resource.age_range }}</p>
+            </div>
+        </div>
+
+        <div class="col">
+            {% if resource.pdf_filenames|length > 1 %} 
+                <p class="text-secondary my-1">Contains {{ resource.pdf_filenames|length }} PDF files.</p>
+            {% else %}
+                <p class="text-secondary my-1">Contains {{ resource.pdf_filenames|length }} PDF file.</p>
+            {% endif %}
+        </div>
+        <div class="col">
+            <p class="fs-3 fw-semibold">£1.50 (or 1 credit)</p>
+        </div>
+
+        <hr>
+
+        <div class="row">
+            <div class="col">
+                <p class="my-1 fw-semibold fs-5">Product summary</p>
+                <p>{{resource.card_description}}</p>
+            </div> 
+        </div>
+        <div class="row align-items-end">
+            <div class="my-4 d-flex justify-content-center">
+                <form action="{% url 'payments:add_to_cart' resource.id  %}" method="get" accept-charset="utf-8">
+                    <button class="btn btn-primary w-100"> 
+                        Add to cart 
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div> 
+</div>
+
+<!-- Here be the carousel stuff -->
+<!-- except we are doing away with the carousel in this design -->
+<div class="d-flex justify-content-start">
+    {% for snapshot_filename, snapshot_urls in resource.snapshot_urls.items %}
+    {% for snapshot_url in snapshot_urls %}
+    <div>
+        <img src="{{ snapshot_url }}" class="d-block mx-auto img-thumbnail rounded" alt="{{ snapshot_name }}">
+    </div>
+    {% endfor %}
+    {% endfor %}
+</div>
+
+<!-- detailed description row -->
+<div class="row py-4">
+    <div class="col-12">
+        <h4>Product detail</h4>
+        {{ resource.description | markdown | safe }}
+    </div>
+</div>
+
+{% endblock content %}
+