{% comment %}
Card Component - Unified Django Template Version of shadcn/ui Card

A flexible card container with optional header, content, and footer sections.
Uses design tokens for consistent styling.

Usage Examples:
  Basic card with title:
    {% include 'components/ui/card.html' with title='Card Title' content='Card content here' %}

  Card with all sections:
    {% include 'components/ui/card.html' with title='Title' description='Subtitle' body_content='<p>Content</p>' footer_content='<button>Action</button>' %}

  Card with custom header:
    {% include 'components/ui/card.html' with header_content='<div>Custom header</div>' content='Content' %}

  Card with block content (for more complex layouts):
    {% include 'components/ui/card.html' with title='Title' %}
    {% block card_content %}
      Complex content here
    {% endblock %}

Parameters:
  - title: Card title text
  - description: Card subtitle/description text
  - header_content: HTML content for the header area (sanitized)
  - content: Main content (sanitized)
  - body_content: Alias for content (sanitized)
  - footer_content: Footer content (sanitized)
  - footer: Alias for footer_content (sanitized)
  - header: Alias for header_content (sanitized)
  - class: Additional CSS classes for the card container
  - id: Element ID

Security: All content variables are sanitized using the sanitize filter to prevent XSS attacks.
Only trusted HTML elements and attributes are allowed.
{% endcomment %}

{% load safe_html %}

<div
    {% if id %}id="{{ id }}"{% endif %}
    class="rounded-lg border bg-card text-card-foreground shadow-sm {{ class|default:'' }}">

    {# Header Section #}
    {% if title or description or header_content or header %}
    <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_content %}
        {{ header_content|sanitize }}
        {% elif header %}
        {{ header|sanitize }}
        {% endif %}
    </div>
    {% endif %}

    {# Content Section #}
    {% if content or body_content %}
    <div class="p-6 pt-0">
        {% if content %}
        {{ content|sanitize }}
        {% endif %}
        {% if body_content %}
        {{ body_content|sanitize }}
        {% endif %}
        {% block card_content %}{% endblock %}
    </div>
    {% else %}
    {# Allow block content even without content parameter #}
    <div class="p-6 pt-0">
        {% block card_content_fallback %}{% endblock %}
    </div>
    {% endif %}

    {# Footer Section #}
    {% if footer_content or footer %}
    <div class="flex items-center p-6 pt-0">
        {% if footer_content %}
        {{ footer_content|sanitize }}
        {% elif footer %}
        {{ footer|sanitize }}
        {% endif %}
    </div>
    {% endif %}
</div>