<form method="post" action="{{ url("table_action") }}">
    <input type="hidden" name="_token" value="{{ csrf_token('table_action') }}">

    <input type="hidden" name="redirect_back" value="{{ app.request.uri }}">

    <input type="hidden" name="ids" id="select_ids" value="">

    <div class="d-none mb-2" id="select_panel">
        {# <span id="select_count"></span> #}
        <span class="badge badge-secondary">{% trans with {'%count%': '<span id="select_count"></span>'} %}part_list.action.part_count{% endtrans %}</span>

        <select class="selectpicker" name="action" id="select_action"
                title="{% trans %}part_list.action.action.title{% endtrans %}" onchange="updateTargetSelect()" required>
            <optgroup label="{% trans %}part_list.action.action.group.favorite{% endtrans %}">
                <option {% if not is_granted('@parts.edit') %}disabled{% endif %} value="favorite">{% trans %}part_list.action.action.favorite{% endtrans %}</option>
                <option {% if not is_granted('@parts.edit') %}disabled{% endif %} value="unfavorite">{% trans %}part_list.action.action.unfavorite{% endtrans %}</option>
            </optgroup>

            <optgroup label="{% trans %}part_list.action.action.group.change_field{% endtrans %}">
                <option {% if not is_granted('@parts_category.edit') %}disabled{% endif %} value="change_category" data-url="{{ path('select_category') }}">{% trans %}part_list.action.action.change_category{% endtrans %}</option>
                <option {% if not is_granted('@parts_footprint.edit') %}disabled{% endif %} value="change_footprint" data-url="{{ path('select_footprint') }}">{% trans %}part_list.action.action.change_footprint{% endtrans %}</option>
                <option {% if not is_granted('@parts_manufacturer.edit') %}disabled{% endif %} value="change_manufacturer" data-url="{{ path('select_manufacturer') }}">{% trans %}part_list.action.action.change_manufacturer{% endtrans %}</option>
                <option {% if not is_granted('@parts_unit.edit') %}disabled{% endif %} value="change_unit" data-url="{{ path('select_measurement_unit') }}">{% trans %}part_list.action.action.change_unit{% endtrans %}</option>
            </optgroup>

            <option {% if not is_granted('@parts.delete') %}disabled{% endif %} value="delete">{% trans %}part_list.action.action.delete{% endtrans %}</option>
        </select>

        <select class="" style="display: none;" data-live-search="true" name="target" id="select_target">
            {# This is left empty, as this will be filled by Javascript #}
        </select>

        <button type="submit" class="btn btn-secondary">{% trans %}part_list.action.submit{% endtrans %}</button>
    </div>

    <div id="part_list" class="" data-select="true" data-part_table="true" data-datatable data-settings='{{ datatable_settings(datatable)|escape('html_attr') }}'>
        <div class="card-body">
            <div class="card">
                <div class="card-body">
                    <h4>{% trans %}part_list.loading.caption{% endtrans %}</h4>
                    <h6>{% trans %}part_list.loading.message{% endtrans %}</h6>
                </div>
            </div>
        </div>
    </div>
</form>

<script>

    function updateOptions(selector, json)
    {
        var select = document.querySelector(selector);

        //Clear options
        select.innerHTML = null;

        for(i=0; i<json.length; i++) {
            var json_opt = json[i];
            var opt = document.createElement('option');
            opt.value = json_opt.value;
            opt.innerHTML = json_opt.text;

            if(json_opt['data-subtext']) {
                opt.dataset.subtext = json_opt['data-subtext'];
            }

            select.appendChild(opt);
        }
    }

    function updateTargetSelect() {
        var element = document.querySelector('#select_action');

        var selected = element.options[element.options.selectedIndex];

        var url = selected.dataset.url;

        if (url) {


            fetch(url)
                .then(response => response.json())
                .then(data => updateOptions('#select_target', data))
                .then(data => $('#select_target').selectpicker('refresh'));

        } else {
            $('#select_target').selectpicker('hide');
        }
    }
</script>