{% comment %}
Component: Card / Panel (c-card)
Props:
  title: Card title
  eyebrow: Eyebrow label
  padding: compact | default
  interactive: boolean
  selected: boolean
  href: accessible stretch link url
  classes: custom classes
{% endcomment %}
<div class="c-card relative{% if interactive or href %} c-card--interactive cursor-pointer{% endif %}{% if selected %} c-card--selected{% endif %}{% if padding == 'compact' %} p-3{% else %} p-5{% endif %}{% if classes %} {{ classes }}{% endif %}"
     {% if selected %}aria-selected="true"{% endif %}
     {% if interactive and not href %}
     tabindex="0"
     role="button"
     @keydown.enter.prevent="$el.click()"
     @keydown.space.prevent="$el.click()"
     {% endif %}>
    {% if eyebrow or title %}
    <div class="flex items-center justify-between mb-3 border-b border-border pb-2">
        <div>
            {% if eyebrow %}<span class="text-xs font-mono text-subtle uppercase tracking-wider block">{{ eyebrow }}</span>{% endif %}
            {% if title %}
            <h4 class="text-sm font-semibold text-text">
                {% if href %}
                <a href="{{ href }}" class="focus:outline-none focus:underline after:absolute after:inset-0 text-text">{{ title }}</a>
                {% else %}
                {{ title }}
                {% endif %}
            </h4>
            {% endif %}
        </div>
    </div>
    {% endif %}
    <div class="c-card__body">
        {{ content|default:"" }}
    </div>
</div>