{% load safe_html %}
{# Security: Header, content, and footer are sanitized to prevent XSS. #}

<div class="border rounded-lg shadow-sm bg-card text-card-foreground">
    {% if header or title %}
    <div class="flex flex-col space-y-1.5 p-6">
        {% if title %}
        <h3 class="text-2xl font-semibold leading-none tracking-tight">{{ title }}</h3>
        {% endif %}
        {% if description %}
        <p class="text-sm text-muted-foreground">{{ description }}</p>
        {% endif %}
        {% if header %}
        {{ header|sanitize }}
        {% endif %}
    </div>
    {% endif %}

    <div class="p-6 pt-0">
        {{ content|sanitize }}
        {% block card_content %}{% endblock %}
    </div>

    {% if footer %}
    <div class="flex items-center p-6 pt-0">
        {{ footer|sanitize }}
    </div>
    {% endif %}
</div>