{# @description Opinionated card: header (icon/title, badges, actions), body, footer. #}
{# @prop title:text | default:"" | description:"Heading text." #}
{# @prop icon:text | default:"" | description:"Leading icon name for the heading." #}
{# @prop tight:boolean | description:"Remove body padding, for full-bleed tables/lists." #}
{# @prop class:text | description:"Extra classes on the .card surface." #}
{# @prop body_class:text | description:"Extra classes on the .card-body." #}
{# @slot Card body content — The main card content. #}
{# @slot:badges Status, counts — Header, just after the title. #}
{# @slot:actions Buttons, dropdown — Header, end-aligned. #}
{# @slot:footer Footer content — Footer, start-aligned. #}
{# @slot:footer_end Footer content — Footer, end-aligned. #}
<c-vars title="" icon="" tight class body_class />
<c-mvp.card.wrapper class="{{ class }}" :attrs="attrs">
  <div class="card-body {% if tight %}p-0{% endif %} {{ body_class }}">
    {% if title or icon or badges or actions %}
      <div class="flex items-center gap-3">
        {% if title or icon %}
          <h2 class="card-title">
            {% if icon %}<c-icon name="{{ icon }}" />{% endif %}
            {% if title %}<span>{{ title }}</span>{% endif %}
          </h2>
        {% endif %}
        {% if badges %}<div class="flex items-center gap-1">{{ badges }}</div>{% endif %}
        {% if actions %}<div class="flex items-center gap-1 ms-auto">{{ actions }}</div>{% endif %}
      </div>
    {% endif %}
    {{ slot }}
    {% if footer or footer_end %}
      <div class="flex flex-wrap items-center gap-2 pt-2">
        {% if footer %}<div class="flex items-center gap-2">{{ footer }}</div>{% endif %}
        {% if footer_end %}<div class="flex items-center gap-2 ms-auto">{{ footer_end }}</div>{% endif %}
      </div>
    {% endif %}
  </div>
</c-mvp.card.wrapper>