From b299143ee2b264201944523c1ffecba45e8c5a04 Mon Sep 17 00:00:00 2001
From: Jason Zhu <jasonzhuyq@outlook.com>
Date: Wed, 20 Apr 2022 19:25:18 +1000
Subject: [PATCH] chap02 -> Creating templates -> The add-to-cart-modal
 template

---
 ko-cart/index.html | 44 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 43 insertions(+), 1 deletion(-)

diff --git a/ko-cart/index.html b/ko-cart/index.html
index 45fdc00..67b2aab 100644
--- a/ko-cart/index.html
+++ b/ko-cart/index.html
@@ -84,7 +84,49 @@
         </tfoot>
       </table>
     </script>
-    <script type="text/html" id="add-to-catalog-modal"></script>
+    <script type="text/html" id="add-to-catalog-modal">
+      <div class="modal fade" id="addToCatalogModal">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <form class="form-horizontal" role="form" data-bind="with:newProduct">
+              <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal">
+                  <span aria-hidden="true">&times;</span>
+                  <span class="sr-only">Close</span>
+                </button>
+                <h3>Add New Product to the Catalog</h3>
+              </div>
+              <div class="modal-body">
+                <div class="form-group">
+                  <div class="col-sm-12">
+                    <input type="text" class="form-control" placeholder="Name" data-bind="textInput:name">
+                  </div>
+                </div>
+                <div class="form-group">
+                  <div class="col-sm-12">
+                    <input type="text" class="form-control" placeholder="Price" data-bind="textInput:price">
+                  </div>
+                </div>
+                <div class="form-group">
+                  <div class="col-sm-12">
+                    <input type="text" class="form-control" placeholder="Stock" data-bind="textInput:stock">
+                  </div>
+                </div>
+              </div>
+              <div class="modal-footer">
+                <div class="form-group">
+                  <div class="col-sm-12">
+                    <button type="submit" class="btn btn-default" data-bind="{click:$parent.addProduct}">
+                      <i class="glyphicon glyphicon-plus-sign"></i> Add Product
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div> <!-- /.modal-content -->
+        </div> <!-- /.modal-diaglog -->
+      </div> <!-- /.modal -->
+    </script>
     <script type="text/html" id="cart-widget"></script>
     <script type="text/html" id="cart-item"></script>
     <script type="text/html" id="cart"></script>