{% import "fragments/_icon_fragment.html" as icons %}

{% macro render_combobox(id, options, label=none, placeholder=none, onAdd=none, onRemove=none, onEdit=none, data_attributes=none) %}
    <!-- Combobox Widget Fragment -->

    {% if label %}
        <label for="{{ id }}-input" class="form-label">{{ label }}</label>
    {% endif %}
    <div class="combo-box-widget" id="{{ id }}-container">
        <div class="input-group">
            <input type="text" class="form-control rounded-bottom-0" id="{{ id }}-input"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}>
            <button type="button" class="btn btn-primary rounded-bottom-0" id="{{ id }}-add" disabled>
                {{ icons.render_icon('plus-lg', 16, 'icon-state') }}
            </button>
            <button type="button" class="btn btn-danger rounded-bottom-0" id="{{ id }}-remove" disabled>
                {{ icons.render_icon('dash-lg', 16) }}
            </button>
        </div>
        <select class="form-select border-top-0 rounded-top-0" id="{{ id }}-list" name="{{ id }}" size="10" multiple>
            {% for option in options %}
                <option value="{{ option.id }}"
                    {% if data_attributes %}
                        {% for key, data_attr in data_attributes.items() %}
                            {% if option[key] is defined %}
                                data-{{ data_attr }}="{{ option[key] }}"
                            {% endif %}
                        {% endfor %}
                    {% endif %}>
                    {{ option.name }}
                </option>
            {% endfor %}
        </select>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            ComboBoxWidget.initComboBox("{{ id }}"{% if onAdd or onRemove or onEdit %}, {
                {% if onAdd %}onAdd: function(newItem, list, createOption) { {{ onAdd | safe }} },{% endif %}
                {% if onRemove %}onRemove: function(option) { {{ onRemove | safe }} },{% endif %}
                {% if onEdit %}onEdit: function(option) { {{ onEdit | safe }} }{% endif %}
            }{% endif %});
        });
    </script>
{% endmacro %}