{#- chirp-ui: Glow Card
    Card with mouse-following radial glow effect.
    Requires Alpine.js.

    Usage:
        from "chirpui/glow_card.html" import glow_card

        call glow_card()
            <h3>Feature</h3>
            <p>Description of feature</p>
        end

        call glow_card(variant="accent")
            <p>Accent-colored glow</p>
        end
-#}

{% def glow_card(variant="", cls="", attrs="", attrs_map=none) %}
{% set variant = variant | validate_variant(("", "default", "accent", "muted"), "") %}
{% set variant_class = " chirpui-glow-card--" ~ variant if variant else "" %}
<div class="chirpui-glow-card{{ variant_class }}{{ " " ~ cls if cls else "" }}"
     x-data
     @mousemove="$el.style.setProperty('--chirpui-mouse-x', $event.offsetX + 'px'); $el.style.setProperty('--chirpui-mouse-y', $event.offsetY + 'px')"
     {{ attrs | html_attrs }}
     {{ attrs_map | html_attrs }}>
    <div class="chirpui-glow-card__glow" aria-hidden="true"></div>
    <div class="chirpui-glow-card__content">
        {% slot %}
    </div>
</div>
{% end %}