{% load ui_classes %}
{% load ui_props %}

<c-vars as="div"
        href=""
        label=""
        interactive="False"
        variant="surface"
        size="md"
        padding="4"
        gap="4"
        class="" />
{% ui_class "ui.card" "root" variant=variant size=size padding=padding gap=gap class=class as root_class %}
{% ui_class "ui.overlay" "link" as overlay_link_class %}
<{{ as }} data-ui-card
{% if interactive|ui_bool or href %}
    {% if variant == "none" %}
        data-ui-interactive
    {% else %}
        data-ui-interactive="surface"
    {% endif %}
{% endif %}
data-variant="{{ variant }}"
data-size="{{ size }}"
data-padding="{{ padding }}"
data-gap="{{ gap }}"
class="{{ root_class }}"
{% if not href %}
    {{ attrs }}>
{% else %}
    >
{% endif %}
{{ slot }}
{% if href %}
    <a href="{{ href }}"
       data-ui-card-link
       data-ui-overlay-link
       {% if label %}aria-label="{{ label }}"{% endif %}
       class="{{ overlay_link_class }}"
       {{ attrs }}></a>
{% endif %}
</{{ as }}>