{% load cotton %}

<div class="component-variants">
    <h1>Date Picker Component</h1>
    
    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>

        <c-date-picker
            id="{{ variant.id }}" 
            name="{{ variant.name }}" 
            value="{{ variant.value }}" 
            min="{{variant.min}}"
            max="{{variant.max}}"
            required="{{variant.required}}"
            disabled="{{variant.disabled}}" 
        />
    </div>
    {% endfor %}
</div>