{% load static %}
<div class="checkbox-multiselect-wrapper" data-widget-id="{{ widget.attrs.id }}">
    <div class="multiselect-input-container">
        <div class="multiselect-tags" id="{{ widget.attrs.id }}_tags"></div>
        <input type="text" 
               class="multiselect-search form-control" 
               placeholder="{{ widget.attrs.placeholder|default:'Выберите элементы...' }}"
               id="{{ widget.attrs.id }}_search"
               autocomplete="off">
        <button type="button" class="multiselect-clear" id="{{ widget.attrs.id }}_clear" title="Очистить все">×</button>
    </div>
    <div class="multiselect-dropdown" id="{{ widget.attrs.id }}_dropdown">
        <div class="multiselect-options">
            {% for group_name, group_choices, group_index in widget.optgroups %}
                {% for option in group_choices %}
                    <label class="multiselect-option">
                        <input type="checkbox" 
                               name="{{ widget.name }}" 
                               value="{{ option.value }}"
                               {% if option.selected %}checked{% endif %}
                               data-label="{{ option.label }}">
                        <span class="option-label">{{ option.label }}</span>
                    </label>
                {% endfor %}
            {% endfor %}
        </div>
    </div>
</div>
