<c-vars variant="default" size="default" asChild htmx></c-vars>

<button
    x-data="{
        asChild: {{ asChild|yesno:'true,false' }},
        htmx: {{ htmx|yesno:'true, false'}},
        init() {
            console.log(this.asChild, this.htmx);
            if (this.asChild) this.$nextTick(() => this.initAsChild());
        },
        initAsChild() {
            let slot, indicator, spinner;
            if (this.htmx) {
                indicator = this.$el.firstElementChild;
                slot = indicator?.firstElementChild;
                spinner = indicator?.nextElementSibling;
            }
            else {
                slot = this.$el.firstElementChild;
            }
            if (!slot) return;

            [...this.$el.attributes].forEach(attr => {
                if (slot.hasAttribute(attr.name) || attr.name.startsWith('x-') || attr.name === 'class') return;
                slot.setAttribute(attr.name, attr.value);
            });
            slot.classList.add(...this.$el.classList);
            
            if (this.htmx && indicator && spinner) {
                const element = slot.cloneNode()
                indicator = element.appendChild(indicator.cloneNode())
                element.appendChild(spinner);
                [...slot.childNodes].forEach(node => indicator.appendChild(node))

                this.$el.replaceWith(element);
                htmx.process(element);
            }
            else {
                this.$el.replaceWith(slot);
            }
        }
    }"
    class="
        inline-flex
        items-center
        justify-center
        gap-2
        whitespace-nowrap
        rounded-md
        text-sm
        font-medium
        transition-all
        disabled:pointer-events-none
        disabled:opacity-50
        [&_svg]:pointer-events-none
        [&_svg:not([class*='size-'])]:size-4
        shrink-0
        [&_svg]:shrink-0
        outline-none 
        focus-visible:border-ring 
        focus-visible:ring-ring/50 
        focus-visible:ring-[3px] 
        aria-invalid:ring-destructive/20 
        dark:aria-invalid:ring-destructive/40 
        aria-invalid:border-destructive
        {% if variant == 'default' %}bg-primary text-primary-foreground shadow-sm hover:bg-primary/90
        {% elif variant == 'outline' %}border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground
        {% elif variant == 'ghost' %}hover:bg-accent hover:text-accent-foreground
        {% elif variant == 'destructive' %}bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90
        {% elif variant == 'secondary' %}bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80
        {% elif variant == 'link' %}text-primary underline-offset-4 hover:underline
        {% endif %}
        {% if size == 'default' %}h-9 px-4 py-2
        {% elif size == 'sm' %}h-8 rounded-md px-3 text-xs
        {% elif size == 'lg' %}h-10 rounded-md px-8
        {% elif size == 'icon' %}size-9
        {% elif size == 'icon-sm' %}size-8
        {% elif size == 'icon-lg' %}size-10
        {% endif %}
        {% if class %}{{ class }}{% endif %}
    "
    {% if htmx %}
    @click="$el.classList.add('htmx')"
        {% if hx_get or hx_post or hx_put or hx_patch or hx_delete %}
        hx-indicator="this"
        {% endif %}
        {% if hx_disabled_elt %}
        {{ hx_disabled_elt }}
        {% else %}
        hx-disabled-elt="this"
        {% endif %}
    {% endif %}
    {{ attrs }}
>
    {% if htmx %}
    <span class="htmx-indicator-hide">
        {{ slot }}
    </span>
    <c-spinner />
    {% else %}
    {{ slot }}
    {% endif %}
</button>