{% load static %}


{% with id=widget.attrs.id %}
    <div{% if id %} id="{{ id }}"{% endif %} class="select-box">
        <div class="options-container">
            {% for group, options, index in widget.optgroups %}
                {% for option in options %}
                    <div class="option-wrapper {%if option.selected%}active{%endif%}">
                        {% include option.template_name with widget=option %}
                    </div>
                {% endfor %}
            {% endfor %}
        </div>
        <div class="selected">
            {% for group, options, index in widget.optgroups %}
                {% for option in options %}
                    {% if option.selected %}
                        <p class="selected_text"> {{option.label}}</p>
                    {% endif %}
                {% endfor %}
            {% endfor %}
            <i class="bi bi-caret-down-fill" id="arrow_icon"></i>
        </div>
    </div>
{% endwith %}