{% props title: String, description: String = "", variant: String = "", size: String = "", href: String = "", media: Slot = Slot::default(), media_variant: String = "", actions: Slot = Slot::default() %}
{#- href makes the row a link; media: an icon (media_variant="icon") or an avatar; actions: buttons or a badge. #}
{%- let tag = if href.is_empty() { "div" } else { "a" } %}
<{{ tag }} class="ui-item"{% if !href.is_empty() %} href="{{ href }}"{% end %}{% if !variant.is_empty() %} data-variant="{{ variant }}"{% end %}{% if !size.is_empty() %} data-size="{{ size }}"{% end %}>
{%- if media != Slot::default() %}
<div class="ui-item-media"{% if !media_variant.is_empty() %} data-variant="{{ media_variant }}"{% end %}>{{ media }}</div>
{%- end %}
<div class="ui-item-content">
<div class="ui-item-title">{{ title }}</div>
{%- if !description.is_empty() %}
<p class="ui-item-description">{{ description }}</p>
{%- end %}
</div>
{%- if actions != Slot::default() %}
<div class="ui-item-actions">{{ actions }}</div>
{%- end %}
</{{ tag }}>