Begin implementing Bulma

core/templates/partials/product-list.html

@@ -1,50 +1,52 @@
 {% load static %}
 
 {% for plan in plans %}
-  {% if plan not in user_plans %}
-    <a href="/order/{{ plan.product_id}}">
+
+  {% if plan in user_plans %}
+    <div class="box has-background-info-light">
+  {% else %}
+    <div class="box">
   {% endif %}
 
-  <div class="product">
-    <img src="{% static plan.image %}" alt="Data image"/>
-    <div class="description">
-      <h3>{{ plan.description }}</h3>
-      <h5>£{{ plan.cost }}</h5>
-      {% if plan in user_plans %}
-        <h5> (purchased) </h5>
-      {% endif %}
-    </div>
+    <article class="media">
+      <div class="media-left">
+        <figure class="image is-64x64">
+          <img src="{% static plan.image %}" alt="Image">
+        </figure>
+      </div>
+      <div class="media-content">
+        <div class="content">
+          <p>
+            <strong>{{ plan.name }}</strong> <small>£{{ plan.cost }}</small>
+            {% if plan in user_plans %}
+            <i class="fas fa-check" aria-hidden="true"></i>
+            {% endif %}
+            <br>
+            {{ plan.description }}
+          </p>
+        </div>
+        <nav class="level is-mobile">
+          <div class="level-left">
+            {% if plan not in user_plans %}
+            <a class="level-item" href="/order/{{ plan.name }}">
+              <span class="icon is-small has-text-success">
+                <i class="fas fa-plus" aria-hidden="true"></i>
+              </span>
+            </a>
+            {% endif %}
+
+            {% if plan in user_plans %}
+            <a class="level-item" href="/cancel/{{ plan.name }}">
+              <span class="icon is-small has-text-info">
+                <i class="fas fa-cancel" aria-hidden="true"></i>
+              </span>
+            </a>
+            {% endif %}
+          </div>
+        </nav>
+      </div>
+    </article>
   </div>
-  {% if plan not in user_plans %}
-    </a>
-  {% endif %}
-  
 {% endfor %}
 
-<script type="text/javascript">
-  // Create an instance of the Stripe object with your publishable API key
-  var stripe = Stripe("pk_test_51HbqYzAKLUD9ELc0KSyiQ9YohsfiUCeBpAfpflAIg2Uu2RFecx3sfWYXzM1xDtI5XlQihqHMnaPKd45JzDuqXdGP00pYWvRvRe");
-  var setupButton = document.getElementById('setup-button');
-  setupButton.addEventListener("click", function () {
-    fetch("/setup-bacs", {
-      method: "POST",
-    })
-      .then(function (response) {
-        return response.json();
-      })
-      .then(function (session) {
-        return stripe.redirectToCheckout({ sessionId: session.id });
-      })
-      .then(function (result) {
-        // If redirectToCheckout fails due to a browser or network
-        // error, you should display the localized error message to your
-        // customer using error.message.
-        if (result.error) {
-          alert(result.error.message);
-        }
-      })
-      .catch(function (error) {
-        console.error("Error:", error);
-      });
-  });
-</script>
+