webseite/frontend/projects/product-manager.html

@@ -49,6 +49,23 @@
       <!-- ▼ product-manager ▼ -->
       <div class="product-manager">
         <div class="container">
+          <nav class="nav-products-actions">
+            <ul class="list">
+              <li>
+                <button class="btn btn-danger button-products-reset">
+                  <i class="fa-solid fa-box-archive"></i>
+                  Reset Products
+                </button>
+              </li>
+              <li>
+                <button class="btn btn-dark button-products-save">
+                  <i class="fa-solid fa-hard-drive"></i>
+                  Save Products
+                </button>
+              </li>
+            </ul>
+          </nav>
+
           <!-- table.table.table-striped.table-products>(thead.table-dark>tr>th{Name}+th{Price in &euro;})+tbody>tr>td*2 -->
           <table class="table table-striped table-products">
             <thead class="table-dark">
@@ -119,7 +136,10 @@
                 <i class="fas fa-file-pen"></i>
                 <span class="visually-hidden">Edit Product</span>
               </button>
-              <button class="btn btn-sm btn-danger button-product-remove">
+              <button
+                class="btn btn-sm btn-danger button-product-remove"
+                data-bs-toggle="modal"
+                data-bs-target="#modal-delete">
                 <i class="fas fa-trash-can"></i>
                 <span class="visually-hidden">Remove Product</span>
               </button>
@@ -188,6 +208,34 @@
           </div>
         </div>
         <!-- ▲ /Modal ▲ -->
+
+        <!-- Modal Delete -->
+        <div
+          class="modal modal-delete fade"
+          id="modal-delete"
+          tabindex="-1"
+          aria-labelledby="modal-delete-label"
+          aria-hidden="true">
+          <div class="modal-dialog">
+            <div class="modal-content">
+              <div class="modal-header">
+                <h1 class="modal-title fs-5" id="modal-delete-label">Delete Product</h1>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+              </div>
+              <div class="modal-body">
+                <p>
+                  Do you really want to delete Product:<br />
+                  <strong class="product-name">PRODUCT_NAME</strong>
+                </p>
+              </div>
+              <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-danger button-confirm-delete">Confirm to delete</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- ▲ /Modal Delete ▲ -->
       </div>
       <!-- ▲ /product-manager ▲ -->
     </main>