<!--! This component is used to generate a channels selector. The jinja2 function expects as inputs:
    @param title: the title of the selection box
    @param divId: the id of the top level div
    @param groupedOptions: a collection of option groups. an opntion group is a tuple : group name, [ (value, name)]
    @param initialSelection: a collection of the initially selected values
    @param namedSelections: a collection of tuples [(selectionName, selectionValueList)]
-->
{% macro drawRegionSelectorToolbar(namedSelections) -%}
    <div class="selection-toolbar">
        <button class="action action-all-on" title="Add all">&nbsp;</button>
        <button class="action action-all-off" title="Remove all">&nbsp;</button>
        <select>
            {% include 'visualizers/commons/channel_selector_opts.html' %}
        </select>
        <input type="text" title="Enter new selection name here"/>
        <button class="action action-store" title="Save your currently selected nodes">Save</button>
    </div>
{%- endmacro %}

{% macro drawRegionSelectorChannels(groupedOptions, initialSelection, radio=None) -%}
    {% for groupName, options in groupedOptions %}
        {% set sectionWidth = 100 / (groupedOptions | length ) %}
        <section class="submatrix" style="width:{{ sectionWidth }}%">
            <h6>{{ groupName }}</h6>
            {% for value, label in options %}
                {% set selected = value in initialSelection %}

                <label title="{{ label }}" class="{{ 'selected' if selected else none }}">
                    <input type="{{ 'checkbox' if not radio else 'radio' }}" autocomplete="off"
                           name="{{ radio }}"
                           value="{{ value }}"
                    {{ ("checked='checked'") | safe if selected else None }}"/>
                    {{ label }}
                </label>
            {% endfor %}
        </section>
    {% endfor %}
{%- endmacro %}

{% macro drawRegionSelector(title, divId, groupedOptions, initialSelection=[], namedSelections=[], radio=false) -%}
    <div id='{{ divId }}' class="regionSelector">
        <h5>{{ title }}</h5>
        {% if not radio %}
            {{ drawRegionSelectorToolbar(namedSelections) }}
        {% endif %}

        {{ drawRegionSelectorChannels(groupedOptions, initialSelection, divId if radio else none) }}
    </div>
{%- endmacro %}
