{% load ui_classes %}
{% load ui_props %}
{% ui_class "ui.card" "root" size=size padding=padding paddingX=padding_x paddingY=padding_y gap=gap gapX=gap_x gapY=gap_y margin=margin marginX=margin_x marginY=margin_y class=class as root_class %}
{% ui_class "ui.overlay" "link" as overlay_link_class %}
<{{ as }} data-ui-card
data-ui-radius-owner="surface-md"
data-ui-selection-color
data-color="{{ color }}"
{% if interaction != "none" or href or selected|ui_bool %}
data-ui-interaction="{% if interaction != "none" %}{{ interaction }}{% else %}combined{% endif %}"
{% endif %}
data-selected="{% if selected|ui_bool %}true{% else %}false{% endif %}"
data-ui-surface="{{ surface }}"
data-ui-elevation="{{ elevation }}"
data-size="{{ size }}"
data-padding="{{ padding }}"
data-padding-x="{{ padding_x }}"
data-padding-y="{{ padding_y }}"
data-gap="{{ gap }}"
data-gap-x="{{ gap_x }}"
data-gap-y="{{ gap_y }}"
data-margin="{{ margin }}"
data-margin-x="{{ margin_x }}"
data-margin-y="{{ margin_y }}"
class="{{ root_class }}"
{% if href %}{{ attrs|ui_card_root_attrs }}{% else %}{{ attrs }}{% endif %}>
{{ slot }}
{% if href %}
{% endif %}