From 3001e6f436eebc6bf2565569119ecbc7c3081da7 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Tue, 19 Apr 2022 22:39:27 +1000
Subject: [PATCH] chap2 -> Creating templates -> The catalog template -> part 1

Adding catalog template in simplest way
---
 ko-cart/index.html | 41 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/ko-cart/index.html b/ko-cart/index.html
index e2baf47..c0509c7 100644
--- a/ko-cart/index.html
+++ b/ko-cart/index.html
@@ -44,7 +44,46 @@
       </button>
       <hr />
     </script>
-    <script type="text/html" id="catalog"></script>
+    <script type="text/html" id="catalog">
+      <div class="input-group">
+        <span class="input-group-addon">
+          <i class="glyphicon glyphicon-search"></i> Search
+        </span>
+        <input type="text" class="form-control" data-bind="textInput:searchTerm">
+      </div>
+      <table class="table">
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Price</th>
+            <th>Stock</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody data-bind="foreach:catalog">
+          <tr data-bind="style:{color:stock() < 5 ? 'red' : 'black'}">
+            <td data-bind="text:name"></td>
+            <td data-bind="text:price"></td>
+            <td data-bind="text:stock"></td>
+            <td>
+              <button class="btn btn-primary" data-bind="click:$parent.addToCart">
+                <i class="glyphicon glyphicon-plus-sign"></i> Add
+              </button>
+            </td>
+          </tr>
+        </tbody>
+        <tfoot>
+          <tr>
+            <td colspan="3">
+              <strong>Items:</strong><span data-bind="text:catalog().length"></span>
+            </td>
+            <td colspan="1">
+              <span data-bind="template:{name: 'cart-widget'}"></span>
+            </td>
+          </tr>
+        </tfoot>
+      </table>
+    </script>
     <script type="text/html" id="add-to-catalog-modal"></script>
     <script type="text/html" id="cart-widget"></script>
     <script type="text/html" id="cart-item"></script>