{% load cotton %}

<div class="component-variants">
    <h1>Alert Component</h1>
    
    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>
        
        <c-alert 
            type="{{ variant.type }}"
            heading="{{ variant.heading }}"
            role="{{ variant.role }}"
            extra_classes="{{ variant.extra_classes }}">
            {{ variant.content|safe }}
        </c-alert>
    </div>
    {% endfor %}
</div>