@page "/buttons5"
@{
    ViewData["Title"] = "Buttons 5";
}
@{
    ViewData["SidebarVariant"] = "5";
}

<div class="p-4 md:p-6 space-y-6">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold text-gray-900">Buttons Showcase</h1>
                    <p class="text-gray-500 mt-1 text-sm">Comprehensive button variants — Style V5 (Flat Sharp / Square Edges)</p>
                </div>
            </div>

            <div>
                <h2 class="text-lg font-bold text-gray-900 mb-3">Basic Buttons</h2>
                <div class="bg-white rounded-xl border border-gray-100 p-5">
                    <div class="flex flex-wrap items-center gap-3">
                        <button class="px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150">Primary</button>
                        <button class="px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150">Secondary</button>
                        <button class="px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150">Success</button>
                        <button class="px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150">Danger</button>
                        <button class="px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150">Warning</button>
                    </div>
                </div>
            </div>

            <div>
                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons with Icon</h2>
                <div class="bg-white rounded-xl border border-gray-100 p-5">
                    <div class="flex flex-wrap items-center gap-3">
                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> Primary
                        </button>
                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Secondary
                        </button>
                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg> Success
                        </button>
                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Danger
                        </button>
                        <button class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg> Warning
                        </button>
                    </div>
                </div>
            </div>

            <div>
                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Header</h2>
                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
                    <div class="p-5 border-b border-gray-100 flex flex-wrap items-center justify-end gap-2">
                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg> New
                        </button>
                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export
                        </button>
                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg> Edit
                        </button>
                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Delete
                        </button>
                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Close
                        </button>
                    </div>
                    <div class="p-5 space-y-4">
                        <div class="h-4 bg-gray-100 rounded w-3/4"></div>
                        <div class="h-4 bg-gray-100 rounded w-1/2"></div>
                        <div class="h-4 bg-gray-100 rounded w-5/6"></div>
                        <div class="h-4 bg-gray-100 rounded w-2/3"></div>
                    </div>
                    <div class="p-5 border-t border-gray-100 flex items-center justify-between">
                        <div class="h-4 bg-gray-100 rounded w-24"></div>
                        <div class="h-4 bg-gray-100 rounded w-32"></div>
                    </div>
                </div>
            </div>

            <div>
                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Footer</h2>
                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
                    <div class="p-5 space-y-4">
                        <div class="h-4 bg-gray-100 rounded w-3/4"></div>
                        <div class="h-4 bg-gray-100 rounded w-1/2"></div>
                        <div class="h-4 bg-gray-100 rounded w-5/6"></div>
                        <div class="h-4 bg-gray-100 rounded w-2/3"></div>
                    </div>
                    <div class="p-5 border-t border-gray-100 flex flex-wrap items-center justify-end gap-2">
                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Cancel
                        </button>
                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
                        </button>
                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
                        </button>
                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Confirm
                        </button>
                        <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
                        </button>
                    </div>
                </div>
            </div>

            <div>
                <h2 class="text-lg font-bold text-gray-900 mb-3">Buttons at Body</h2>
                <div class="bg-white rounded-xl border border-gray-100 overflow-hidden">
                    <div class="p-5 border-b border-gray-100">
                        <div class="flex items-center justify-between">
                            <div>
                                <h3 class="font-bold text-gray-900">Card Title</h3>
                                <p class="text-xs text-gray-400 mt-0.5">Card subtitle or description</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-5 space-y-4">
                        <div class="h-4 bg-gray-100 rounded w-full"></div>
                        <div class="h-4 bg-gray-100 rounded w-3/4"></div>
                        <div class="h-4 bg-gray-100 rounded w-5/6"></div>
                        <div class="flex flex-wrap items-center justify-end gap-2 mt-4 pt-4 border-t border-gray-100">
                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg> Cancel
                            </button>
                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Draft
                            </button>
                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/></svg> Save
                            </button>
                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Confirm
                            </button>
                            <button class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg> Reject
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                <h2 class="text-lg font-bold text-gray-900 mb-3">Loading State Buttons</h2>
                <div class="bg-white rounded-xl border border-gray-100 p-5">
                    <div class="flex flex-wrap items-center gap-3">
                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Primary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 active:bg-blue-700 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
                            <span class="btn-text">Primary</span>
                        </button>
                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Secondary'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-gray-500 hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 active:bg-gray-700 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                            <span class="btn-text">Secondary</span>
                        </button>
                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Success'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 active:bg-green-700 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            <span class="btn-text">Success</span>
                        </button>
                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Danger'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 active:bg-red-700 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            <span class="btn-text">Danger</span>
                        </button>
                        <button x-data="{ loading: false }" x-on:click="if(!loading){ loading=true; $el.querySelector('.btn-text').textContent='Loading...'; $el.querySelector('.spinner').classList.remove('hidden','opacity-0'); $el.querySelector('.spinner').classList.add('animate-spin'); $el.disabled=true; setTimeout(()=>{ loading=false; $el.querySelector('.btn-text').textContent='Warning'; $el.querySelector('.spinner').classList.add('hidden','opacity-0'); $el.querySelector('.spinner').classList.remove('animate-spin'); $el.disabled=false; },2000); }" :disabled="loading" class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold rounded-none text-white bg-amber-500 hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-400 active:bg-amber-700 transition-all duration-150 disabled:opacity-70 disabled:cursor-not-allowed">
                            <svg class="spinner hidden opacity-0 w-4 h-4 -ml-0.5" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
                            <span class="btn-text">Warning</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>