{% load unfold %}

<!-- Section Header Component -->
<div class="flex items-center mb-6">
    {% if icon %}
    <div class="flex items-center justify-center w-8 h-8 bg-{{ icon_color|default:'primary' }}-100 dark:bg-{{ icon_color|default:'primary' }}-900/20 rounded-lg mr-3">
        <span class="material-icons text-{{ icon_color|default:'primary' }}-600 dark:text-{{ icon_color|default:'primary' }}-400 text-lg">{{ icon }}</span>
    </div>
    {% endif %}
    
    <h2 class="text-xl font-semibold text-font-important-light dark:text-font-important-dark">
        {{ title }}
    </h2>
    
    {% if badge %}
    <span class="ml-auto text-xs text-font-subtle-light dark:text-font-subtle-dark bg-base-100 dark:bg-base-800 px-2 py-1 rounded-full">
        {{ badge }}
    </span>
    {% endif %}
    
    {% if actions %}
    <div class="ml-auto flex items-center space-x-2">
        {{ actions }}
    </div>
    {% endif %}
</div>