<{% if href %}a href="{{ href }}"{% else %}div{% endif %} class="bg-white block border border-base-200 flex flex-col grow overflow-hidden p-6 relative rounded-default shadow-xs dark:bg-base-900 dark:border-base-800 {% if href %}cursor-pointer transition-all hover:border-base-300 hover:shadow-md hover:shadow-base-200 dark:hover:border-base-700 dark:hover:shadow-base-800/50 {% endif %}{% if class %} {{ class }}{% endif %}">
{% if title %}
    <h2 class="border-b border-base-200 font-semibold mb-6 -mt-6 -mx-6 py-4 px-6 text-[15px] text-font-important-light dark:text-font-important-dark dark:border-base-800">
        {{ title }}
    </h2>
{% endif %}

<span class="grow relative {% if icon %} pl-6{% endif %}">
    {{ children }}

    {% if label %}
        <div class="absolute right-0 top-0">
            {% include "unfold/helpers/label.html" with text=label type="primary" %}
        </div>
    {% endif %}

    {% if icon %}
        <span class="material-symbols-outlined absolute -left-6 text-base-300 top-1/2 -translate-x-1/3 -translate-y-1/2 text-6xl! dark:text-base-500">{{ icon }}</span>
    {% endif %}
</span>

{% if footer %}
    <span class="border-t border-base-200 flex items-center -mb-6 -mx-6 mt-6 pb-2 pt-2 px-6 text-sm dark:border-base-800">
        {{ footer }}
    </span>
{% endif %}
</{% if href %}a{% else %}div{% endif %}>
