fix: update vendor templates to use new modal_simple macro API

The modal_simple macro was simplified to use {% call %}...{% endcall %}
syntax with content passed as the caller block. Updated 5 vendor templates:

- products.html (2 modals: delete, bulk delete)
- orders.html (2 modals: status update, bulk status update)
- inventory.html (3 modals: adjust, set quantity, bulk adjust)
- order-detail.html (2 modals: status update, ship all)
- team.html (2 modals: edit member, remove member)

The new pattern provides more flexibility by allowing custom content
including buttons to be placed inside the modal body.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app/templates/vendor/inventory.html

@@ -253,84 +253,85 @@
 {{ pagination(show_condition="!loading && pagination.total > 0") }}
 
 <!-- Adjust Stock Modal -->
-{{ modal_simple(
+{% call modal_simple('adjustStockModal', 'Adjust Stock', show_var='showAdjustModal', size='sm') %}
-    show_var='showAdjustModal',
+<div class="space-y-4">
-    title='Adjust Stock',
+    <template x-if="selectedItem">
-    icon='plus-minus',
-    icon_color='blue',
-    confirm_text='Adjust',
-    confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
-    confirm_fn='executeAdjust()',
-    loading_var='saving'
-) }}
-<template x-if="showAdjustModal && selectedItem">
-    <div class="mb-4">
-        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
-            Adjust stock for <span class="font-semibold" x-text="selectedItem.product_name"></span>
-            <span class="text-xs text-gray-500">(Current: <span x-text="selectedItem.quantity"></span>)</span>
-        </p>
-        <div class="mb-4">
-            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Adjustment (+ or -)</label>
-            <input
-                type="number"
-                x-model.number="adjustForm.quantity"
-                class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
-                placeholder="e.g., 10 or -5"
-            />
-        </div>
         <div>
-            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Reason (optional)</label>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
-            <input
+                Adjust stock for <span class="font-semibold" x-text="selectedItem.product_name"></span>
-                type="text"
+                <span class="text-xs text-gray-500">(Current: <span x-text="selectedItem.quantity"></span>)</span>
-                x-model="adjustForm.reason"
+            </p>
-                class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+            <div class="mb-4">
-                placeholder="e.g., Restock, Damaged goods"
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Adjustment (+ or -)</label>
-            />
+                <input
+                    type="number"
+                    x-model.number="adjustForm.quantity"
+                    class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                    placeholder="e.g., 10 or -5"
+                />
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Reason (optional)</label>
+                <input
+                    type="text"
+                    x-model="adjustForm.reason"
+                    class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                    placeholder="e.g., Restock, Damaged goods"
+                />
+            </div>
         </div>
+    </template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showAdjustModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="executeAdjust()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+        >Adjust</button>
     </div>
-</template>
+</div>
+{% endcall %}
 
 <!-- Set Quantity Modal -->
-{{ modal_simple(
+{% call modal_simple('setQuantityModal', 'Set Quantity', show_var='showSetModal', size='sm') %}
-    show_var='showSetModal',
+<div class="space-y-4">
-    title='Set Quantity',
+    <template x-if="selectedItem">
-    icon='pencil',
-    icon_color='purple',
-    confirm_text='Set',
-    confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
-    confirm_fn='executeSet()',
-    loading_var='saving'
-) }}
-<template x-if="showSetModal && selectedItem">
-    <div class="mb-4">
-        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
-            Set quantity for <span class="font-semibold" x-text="selectedItem.product_name"></span>
-        </p>
         <div>
-            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Quantity</label>
+            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
-            <input
+                Set quantity for <span class="font-semibold" x-text="selectedItem.product_name"></span>
-                type="number"
+            </p>
-                x-model.number="setForm.quantity"
+            <div>
-                min="0"
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Quantity</label>
-                class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                <input
-            />
+                    type="number"
+                    x-model.number="setForm.quantity"
+                    min="0"
+                    class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                />
+            </div>
         </div>
+    </template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showSetModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="executeSet()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+        >Set</button>
     </div>
-</template>
+</div>
+{% endcall %}
 
 <!-- Bulk Adjust Modal -->
-{{ modal_simple(
+{% call modal_simple('bulkAdjustModal', 'Bulk Adjust Stock', show_var='showBulkAdjustModal', size='sm') %}
-    show_var='showBulkAdjustModal',
+<div class="space-y-4">
-    title='Bulk Adjust Stock',
+    <div>
-    icon='plus-minus',
-    icon_color='blue',
-    confirm_text='Adjust All',
-    confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
-    confirm_fn='bulkAdjust()',
-    loading_var='saving'
-) }}
-<template x-if="showBulkAdjustModal">
-    <div class="mb-4">
         <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
             Adjust stock for <span class="font-semibold" x-text="selectedItems.length"></span> selected item(s)
         </p>
@@ -353,7 +354,19 @@
             />
         </div>
     </div>
-</template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showBulkAdjustModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="bulkAdjust()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+        >Adjust All</button>
+    </div>
+</div>
+{% endcall %}
 {% endblock %}
 
 {% block extra_scripts %}

app/templates/vendor/order-detail.html

@@ -354,18 +354,9 @@
 </div>
 
 <!-- Status Update Modal -->
-{{ modal_simple(
+{% call modal_simple('updateOrderStatusModal', 'Update Order Status', show_var='showStatusModal', size='sm') %}
-    show_var='showStatusModal',
+<div class="space-y-4">
-    title='Update Order Status',
+    <div>
-    icon='pencil-square',
-    icon_color='blue',
-    confirm_text='Update',
-    confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
-    confirm_fn='confirmStatusUpdate()',
-    loading_var='saving'
-) }}
-<template x-if="showStatusModal">
-    <div class="mb-4">
         <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Status</label>
         <select
             x-model="newStatus"
@@ -400,44 +391,57 @@
             </div>
         </template>
     </div>
-</template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showStatusModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="confirmStatusUpdate()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+        >Update</button>
+    </div>
+</div>
+{% endcall %}
 
 <!-- Ship All Modal -->
-{{ modal_simple(
+{% call modal_simple('shipAllModal', 'Ship All Items', show_var='showShipAllModal', size='sm') %}
-    show_var='showShipAllModal',
+<div class="space-y-4">
-    title='Ship All Items',
+    <p class="text-sm text-gray-600 dark:text-gray-400">
-    icon='truck',
+        This will ship all remaining items and mark the order as shipped.
-    icon_color='indigo',
+    </p>
-    confirm_text='Ship All',
+    <div>
-    confirm_class='bg-indigo-600 hover:bg-indigo-700 focus:shadow-outline-indigo',
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tracking Number</label>
-    confirm_fn='shipAllItems()',
+        <input
-    loading_var='saving'
+            type="text"
-) }}
+            x-model="trackingNumber"
-<template x-if="showShipAllModal">
+            placeholder="Enter tracking number"
-    <div class="mb-4 space-y-3">
+            class="w-full px-3 py-2 text-sm border rounded-lg focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
-        <p class="text-sm text-gray-600 dark:text-gray-400">
+        />
-            This will ship all remaining items and mark the order as shipped.
-        </p>
-        <div>
-            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tracking Number</label>
-            <input
-                type="text"
-                x-model="trackingNumber"
-                placeholder="Enter tracking number"
-                class="w-full px-3 py-2 text-sm border rounded-lg focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
-            />
-        </div>
-        <div>
-            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Carrier</label>
-            <input
-                type="text"
-                x-model="trackingProvider"
-                placeholder="e.g., DHL, PostNL"
-                class="w-full px-3 py-2 text-sm border rounded-lg focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
-            />
-        </div>
     </div>
-</template>
+    <div>
+        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Carrier</label>
+        <input
+            type="text"
+            x-model="trackingProvider"
+            placeholder="e.g., DHL, PostNL"
+            class="w-full px-3 py-2 text-sm border rounded-lg focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200"
+        />
+    </div>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showShipAllModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="shipAllItems()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700 transition-colors disabled:opacity-50"
+        >Ship All</button>
+    </div>
+</div>
+{% endcall %}
 {% endblock %}
 
 {% block extra_scripts %}

app/templates/vendor/orders.html

@@ -265,46 +265,42 @@
 {{ pagination(show_condition="!loading && pagination.total > 0") }}
 
 <!-- Status Update Modal -->
-{{ modal_simple(
+{% call modal_simple('updateStatusModal', 'Update Order Status', show_var='showStatusModal', size='sm') %}
-    show_var='showStatusModal',
+<div class="space-y-4">
-    title='Update Order Status',
+    <template x-if="selectedOrder">
-    icon='pencil-square',
+        <div>
-    icon_color='blue',
+            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
-    confirm_text='Update',
+                Update status for order <span class="font-semibold" x-text="selectedOrder.order_number || `#${selectedOrder.id}`"></span>
-    confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
+            </p>
-    confirm_fn='updateStatus()',
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Status</label>
-    loading_var='saving'
+            <select
-) }}
+                x-model="newStatus"
-<template x-if="showStatusModal && selectedOrder">
+                class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
-    <div class="mb-4">
+            >
-        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                <template x-for="status in statuses" :key="status.value">
-            Update status for order <span class="font-semibold" x-text="selectedOrder.order_number || `#${selectedOrder.id}`"></span>
+                    <option :value="status.value" x-text="status.label"></option>
-        </p>
+                </template>
-        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">New Status</label>
+            </select>
-        <select
+        </div>
-            x-model="newStatus"
+    </template>
-            class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
-        >
+        <button
-            <template x-for="status in statuses" :key="status.value">
+            @click="showStatusModal = false"
-                <option :value="status.value" x-text="status.label"></option>
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
-            </template>
+        >Cancel</button>
-        </select>
+        <button
+            @click="updateStatus()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+        >Update</button>
     </div>
-</template>
+</div>
+{% endcall %}
 
 <!-- Bulk Status Update Modal -->
-{{ modal_simple(
+{% call modal_simple('bulkUpdateStatusModal', 'Bulk Update Status', show_var='showBulkStatusModal', size='sm') %}
-    show_var='showBulkStatusModal',
+<div class="space-y-4">
-    title='Bulk Update Status',
+    <div>
-    icon='pencil-square',
-    icon_color='blue',
-    confirm_text='Update All',
-    confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
-    confirm_fn='bulkUpdateStatus()',
-    loading_var='saving'
-) }}
-<template x-if="showBulkStatusModal">
-    <div class="mb-4">
         <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
             Update status for <span class="font-semibold" x-text="selectedOrders.length"></span> selected order(s)
         </p>
@@ -319,7 +315,19 @@
             </template>
         </select>
     </div>
-</template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showBulkStatusModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="bulkUpdateStatus()"
+            :disabled="saving || !bulkStatus"
+            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+        >Update All</button>
+    </div>
+</div>
+{% endcall %}
 {% endblock %}
 
 {% block extra_scripts %}

app/templates/vendor/products.html

@@ -319,40 +319,48 @@
 {{ pagination(show_condition="!loading && pagination.total > 0") }}
 
 <!-- Delete Confirmation Modal -->
-{{ modal_simple(
+{% call modal_simple('deleteProductModal', 'Delete Product', show_var='showDeleteModal', size='sm') %}
-    show_var='showDeleteModal',
+<div class="space-y-4">
-    title='Delete Product',
+    <template x-if="selectedProduct">
-    icon='exclamation-triangle',
+        <p class="text-sm text-gray-600 dark:text-gray-400">
-    icon_color='red',
+            Are you sure you want to delete <span class="font-semibold" x-text="selectedProduct.name"></span>?
-    confirm_text='Delete',
+            This action cannot be undone.
-    confirm_class='bg-red-600 hover:bg-red-700 focus:shadow-outline-red',
+        </p>
-    confirm_fn='deleteProduct()',
+    </template>
-    loading_var='saving'
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
-) }}
+        <button
-<template x-if="showDeleteModal && selectedProduct">
+            @click="showDeleteModal = false"
-    <p class="text-gray-600 dark:text-gray-400 mb-4">
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
-        Are you sure you want to delete <span class="font-semibold" x-text="selectedProduct.name"></span>?
+        >Cancel</button>
-        This action cannot be undone.
+        <button
-    </p>
+            @click="deleteProduct()"
-</template>
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+        >Delete</button>
+    </div>
+</div>
+{% endcall %}
 
 <!-- Bulk Delete Confirmation Modal -->
-{{ modal_simple(
+{% call modal_simple('bulkDeleteProductModal', 'Delete Selected Products', show_var='showBulkDeleteModal', size='sm') %}
-    show_var='showBulkDeleteModal',
+<div class="space-y-4">
-    title='Delete Selected Products',
+    <p class="text-sm text-gray-600 dark:text-gray-400">
-    icon='exclamation-triangle',
-    icon_color='red',
-    confirm_text='Delete All',
-    confirm_class='bg-red-600 hover:bg-red-700 focus:shadow-outline-red',
-    confirm_fn='bulkDelete()',
-    loading_var='saving'
-) }}
-<template x-if="showBulkDeleteModal">
-    <p class="text-gray-600 dark:text-gray-400 mb-4">
         Are you sure you want to delete <span class="font-semibold" x-text="selectedProducts.length"></span> selected product(s)?
         This action cannot be undone.
     </p>
-</template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showBulkDeleteModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="bulkDelete()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+        >Delete All</button>
+    </div>
+</div>
+{% endcall %}
 {% endblock %}
 
 {% block extra_scripts %}

app/templates/vendor/team.html

@@ -222,56 +222,66 @@
 </div>
 
 <!-- Edit Modal -->
-{{ modal_simple(
+{% call modal_simple('editTeamMemberModal', 'Edit Team Member', show_var='showEditModal', size='sm') %}
-    show_var='showEditModal',
+<div class="space-y-4">
-    title='Edit Team Member',
+    <template x-if="selectedMember">
-    icon='pencil',
+        <div>
-    icon_color='blue',
+            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
-    confirm_text='Save',
+                Edit <span class="font-semibold" x-text="selectedMember.email"></span>
-    confirm_class='bg-purple-600 hover:bg-purple-700 focus:shadow-outline-purple',
+            </p>
-    confirm_fn='updateMember()',
+            <div class="mb-4">
-    loading_var='saving'
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Role</label>
-) }}
+                <select
-<template x-if="showEditModal && selectedMember">
+                    x-model="editForm.role_id"
-    <div class="mb-4">
+                    class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
-        <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                >
-            Edit <span class="font-semibold" x-text="selectedMember.email"></span>
+                    <template x-for="role in roles" :key="role.id">
-        </p>
+                        <option :value="role.id" x-text="role.name"></option>
-        <div class="mb-4">
+                    </template>
-            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Role</label>
+                </select>
-            <select
+            </div>
-                x-model="editForm.role_id"
+            <div class="flex items-center">
-                class="w-full px-4 py-2 text-sm text-gray-700 bg-gray-50 border border-gray-200 rounded-lg dark:text-gray-300 dark:bg-gray-700 dark:border-gray-600 focus:border-purple-400 focus:outline-none focus:ring-1 focus:ring-purple-400"
+                <input type="checkbox" x-model="editForm.is_active" id="is_active" class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500" />
-            >
+                <label for="is_active" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Active</label>
-                <template x-for="role in roles" :key="role.id">
+            </div>
-                    <option :value="role.id" x-text="role.name"></option>
-                </template>
-            </select>
-        </div>
-        <div class="flex items-center">
-            <input type="checkbox" x-model="editForm.is_active" id="is_active" class="w-4 h-4 text-purple-600 rounded focus:ring-purple-500" />
-            <label for="is_active" class="ml-2 text-sm text-gray-700 dark:text-gray-300">Active</label>
         </div>
+    </template>
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
+        <button
+            @click="showEditModal = false"
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
+        >Cancel</button>
+        <button
+            @click="updateMember()"
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors disabled:opacity-50"
+        >Save</button>
     </div>
-</template>
+</div>
+{% endcall %}
 
 <!-- Remove Confirmation Modal -->
-{{ modal_simple(
+{% call modal_simple('removeTeamMemberModal', 'Remove Team Member', show_var='showRemoveModal', size='sm') %}
-    show_var='showRemoveModal',
+<div class="space-y-4">
-    title='Remove Team Member',
+    <template x-if="selectedMember">
-    icon='exclamation-triangle',
+        <p class="text-sm text-gray-600 dark:text-gray-400">
-    icon_color='red',
+            Are you sure you want to remove <span class="font-semibold" x-text="selectedMember.email"></span> from the team?
-    confirm_text='Remove',
+            They will lose access to this vendor.
-    confirm_class='bg-red-600 hover:bg-red-700 focus:shadow-outline-red',
+        </p>
-    confirm_fn='removeMember()',
+    </template>
-    loading_var='saving'
+    <div class="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
-) }}
+        <button
-<template x-if="showRemoveModal && selectedMember">
+            @click="showRemoveModal = false"
-    <p class="text-gray-600 dark:text-gray-400 mb-4">
+            class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
-        Are you sure you want to remove <span class="font-semibold" x-text="selectedMember.email"></span> from the team?
+        >Cancel</button>
-        They will lose access to this vendor.
+        <button
-    </p>
+            @click="removeMember()"
-</template>
+            :disabled="saving"
+            class="px-4 py-2 text-sm font-medium text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors disabled:opacity-50"
+        >Remove</button>
+    </div>
+</div>
+{% endcall %}
 {% endblock %}
 
 {% block extra_scripts %}