Update templates/menu.html

templates/menu.html

@@ -461,7 +461,7 @@ form-check-input addon-option{
             <h3>{{ section }}</h3>
             <div class="row">
                 {% for item in items %}
-                    <div class="col-md-4 mb-4">
+                    <!-- <div class="col-md-4 mb-4">
                         <div class="card menu-card">
                             <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}" onerror="this.src='/static/placeholder.jpg';" "loading="lazy">
                             <div class="card-body">
@@ -473,7 +473,27 @@ form-check-input addon-option{
                                 </button>
                             </div>
                         </div>
-                    </div>
+                    </div> -->
+              <div class="col-md-4 mb-4">
+    <div class="card menu-card position-relative">
+        <img src="{{ item.Image1__c }}" class="card-img-top menu-image" alt="{{ item.Name }}"
+            onerror="this.src='/static/placeholder.jpg';" loading="lazy">
+
+        <!-- Customize Button on Image -->
+        <button class="btn btn-primary customize-btn"
+            data-bs-toggle="modal" data-bs-target="#itemModal"
+            onclick="showItemDetails('{{ item.Name }}', '{{ item.Price__c }}', '{{ item.Image2__c }}', '{{ item.Description__c }}', '{{ item.Section__c }}','{{ selected_category }}')">
+            Customize
+        </button>
+
+        <div class="card-body">
+            <h5 class="card-title">{{ item.Name }}</h5>
+            <p class="card-text">${{ item.Price__c }}</p>
+        </div>
+    </div>
+</div>
+
+              
                 {% endfor %}
             </div>
         {% endfor %}