{#
Card component for displaying information.

Usage:
    {% include "components/card.html" with title="Status", content="Active", class="col-span-2" %}

Or as a block:
    {% call card(title="Details") %}
        <p>Card content here</p>
    {% endcall %}
#}

{% macro card(title=None, class="") %}
<div class="bg-dark-600 rounded-lg p-4 {{ class }}">
    {% if title %}
    <h3 class="text-sm font-medium text-gray-400 mb-2">{{ title }}</h3>
    {% endif %}
    <div class="text-white">
        {{ caller() if caller else "" }}
    </div>
</div>
{% endmacro %}

{% macro stat_card(title, value, color="white", class="") %}
<div class="bg-dark-600 rounded-lg p-4 text-center {{ class }}">
    <div class="text-2xl font-bold text-{{ color }}-400">{{ value }}</div>
    <div class="text-sm text-gray-400">{{ title }}</div>
</div>
{% endmacro %}

{% macro info_card(title, items, class="") %}
<div class="bg-dark-600 rounded-lg p-4 {{ class }}">
    {% if title %}
    <h3 class="text-sm font-medium text-gray-400 mb-3">{{ title }}</h3>
    {% endif %}
    <dl class="space-y-2">
        {% for label, value in items %}
        <div class="flex justify-between">
            <dt class="text-gray-400">{{ label }}</dt>
            <dd class="text-white font-mono text-sm">{{ value }}</dd>
        </div>
        {% endfor %}
    </dl>
</div>
{% endmacro %}