@props([
    'type' => 'button',
    'loadingText' => 'Traitement en cours…',
])

@php
    $classes = 'kt-btn';
    if (isset($attributes['class'])) {
        $classes .= ' ' . $attributes['class'];
    }
@endphp

<button 
    type="{{ $type }}" 
    {{ $attributes->merge(['class' => $classes]) }}
    x-data="{ loading: false }"
    x-on:click="loading = true; setTimeout(() => { if ($el.form) $el.form.requestSubmit() }, 10)"
    :disabled="loading"
>
    <span x-show="!loading">
        {{ $slot }}
    </span>
    
    <span x-show="loading" x-cloak style="display: none;">
        <svg fill="#FFFFFFFF" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width: 1em; height: 1em; display: inline-block; vertical-align: middle;">
            <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25"/>
            <path d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z">
                <animateTransform attributeName="transform" type="rotate" dur="0.75s" values="0 12 12;360 12 12" repeatCount="indefinite"/>
            </path>
        </svg>
        {{ $loadingText }}
    </span>
</button>