{# Page header with title and optional subtitle (supports HTML) #}
{% macro page_header(title, subtitle=None) %}
<div class="mb-6">
    <h1 class="text-3xl font-bold rainbow-hover">{{ title }}</h1>
    {% if subtitle %}
    <p class="text-base-content/60 text-lg">{{ subtitle | safe }}</p>
    {% endif %}
</div>
{% endmacro %}

{# Collapsible section #}
{% macro collapse(title, id=None, checked=False, badge=None, icon=None, subtitle=None) %}
<div class="collapse collapse-arrow bg-base-100 shadow mb-4">
    <input type="checkbox" {% if id %}id="{{ id }}"{% endif %} {% if checked %}checked{% endif %} />
    <div class="collapse-title font-semibold flex items-center gap-2">
        {% if icon %}{{ icon }}{% endif %}{{ title }}
        {% if badge %}<code class="text-xs ml-2 opacity-60">{{ badge }}</code>{% endif %}
        {% if subtitle %}<span class="text-xs opacity-50 font-normal">{{ subtitle }}</span>{% endif %}
    </div>
    <div class="collapse-content">
        {{ caller() }}
    </div>
</div>
{% endmacro %}

{# Action button with htmx #}
{% macro action_btn(label, url, style="outline", title=None, icon=None) %}
{% if title %}<div class="tooltip" data-tip="{{ title }}">{% endif %}
<button hx-post="{{ url }}"
        hx-swap="none"
        class="btn btn-{{ style }}">
    {% if icon %}{{ icon }}{% endif %}{{ label }}
</button>
{% if title %}</div>{% endif %}
{% endmacro %}

{# Stat card for dashboard #}
{% macro stat_card(label, value, color=None, icon=None) %}
<div class="card bg-base-100 shadow">
    <div class="card-body items-center text-center">
        <h2 class="card-title text-base-content/60 text-sm gap-1">{% if icon %}{{ icon }}{% endif %}{{ label }}</h2>
        <p class="text-4xl font-bold {% if color %}text-{{ color }}{% endif %}">{{ value }}</p>
    </div>
</div>
{% endmacro %}

{# Data table wrapper #}
{% macro table() %}
<div class="overflow-x-auto">
    <table class="table table-zebra">
        {{ caller() }}
    </table>
</div>
{% endmacro %}