[% backends_selected=0 %]
[% IF selected_backends.size < backends.size && selected_backends.size > 0 %][% backends_selected=1 %][% END %]

<div class="flexrow flex-nowrap gap-1">
  <input type="checkbox" id="backends_toggle" name="backends_toggle"[% IF backends_selected %] checked[% END %] onclick="toggleElement('backends_toggle_table'); check_backends_input(this);" class="clickable"[% IF !can_edit %] disabled[% END %]>
  <label for="backends_toggle" class="clickable">Select specific backends:</label>
</div>

<div class="flexrow flex-nowrap gap-1 pt-2">
  <table style="[% IF !backends_selected %] display: none;[% END %]" id="backends_toggle_table" class="cellspacing-none">
    <tr>
      <th class="text-center">Available</th>
      <td></td>
      <th class="text-center">Selected</th>
    </tr>
    <tr>
      <td class="align-top w-1/2">
        <input class="w-full rounded-b-none border-b-0 deletable" type="text" id="filter_available" placeholder="filter..." onkeyup="data_filter_select('available_backends', this.value)"[% IF !can_edit || !backends_selected %] disabled[% END %]>
        <select class="w-full h-32 rounded-none overflow-y-scroll" multiple id="available_backends" name="available_backends" ondblclick="data_select_move('available_backends', '[% param_name %]', true); check_backend_validity()"[% IF !can_edit || !backends_selected %] disabled[% END %]>
          <option disabled>loading...</option>
        </select>
      </td>
      <td class="w-auto" id="backend_filter_button">
        <button class="m-2 p-0 px-1" onclick="data_select_move('available_backends', '[% param_name %]', true); check_backend_validity(); return false;"[% IF !can_edit || !backends_selected %] disabled[% END %]><i class="uil uil-angle-double-right m-0 text-2xl"></i></button>
        <button class="m-2 p-0 px-1" onclick="data_select_move('[% param_name %]', 'available_backends');       check_backend_validity(); return false;"[% IF !can_edit || !backends_selected %] disabled[% END %]><i class="uil uil-angle-double-left m-0 text-2xl"></i></button>
      </td>
      <td class="align-top w-1/2">
        <input class="w-full rounded-b-none border-b-0 deletable" type="text" id="filter_selected" placeholder="filter..." onkeyup="data_filter_select('[% param_name %]', this.value)"[% IF !can_edit || !backends_selected %] disabled[% END %]>
        <select class="w-full h-32 rounded-none overflow-y-scroll" multiple id="[% param_name %]" name="[% param_name %]" ondblclick="data_select_move('[% param_name %]', 'available_backends'); check_backend_validity()"[% IF !can_edit || !backends_selected %] disabled[% END %][% IF onchange%] onchange="[% onchange %]"[% END %]>
          <option disabled>loading...</option>
        </select>
      </td>
    </tr>
  </table>
</div>

<script>
<!--
  selected_backends = new Array();
  var options       = [];

  [%
    active_backends   = selected_backends;
    inactive_backends = [];
    IF !backends_selected;
      active_backends   = [];
      inactive_backends = selected_backends;
    END;
   %]
  [% FOREACH b = list_intersect(active_backends, backends) %]
    selected_backends.push('[% b %]');
    options.push(new Option('[% backend_detail.$b.name %]', '[% b %]'));
  [% END %]

  set_select_options('[% param_name %]', options);
  reset_original_options('[% param_name %]');

  // initialize available backends
  available_backends = new Array();
  var options        = [];

  [% FOREACH b = list_not_intersect(backends, active_backends) %]
    available_backends.push('[% b %]');
    options.push(new Option('[% backend_detail.$b.name %]', '[% b %]'));
  [% END %]

  set_select_options('available_backends', options);
  reset_original_options('available_backends');
  sortlist('available_backends');

  jQuery('#filter_available').val('');
  jQuery('#filter_selected').val('');
  data_filter_select('available_backends', '');
  data_filter_select('[% param_name %]', '');

  // add eventhandler to form
  jQuery('#[% param_name %]').closest('FORM').on('submit', function() { select_all_options('[% param_name %]') });

  function check_backends_input(checkbox) {
    if(checkbox.checked) {
      jQuery('#filter_available').prop('disabled', false);
      jQuery('#available_backends').prop('disabled', false);
      jQuery('#filter_selected').prop('disabled', false);
      jQuery('#[% param_name %]').prop('disabled', false);
      jQuery('#backend_filter_button BUTTON').prop('disabled', false);
    } else {
      jQuery('#filter_available').prop('disabled', true);
      jQuery('#available_backends').prop('disabled', true);
      jQuery('#filter_selected').prop('disabled', true);
      jQuery('#[% param_name %]').prop('disabled', true);
      jQuery('#backend_filter_button BUTTON').prop('disabled', true);
    }
    check_backend_validity();
  }

  function check_backend_validity() {
    if(jQuery("#backends_toggle").prop("checked")) {
      if(jQuery('#[% param_name %] OPTION').length > 0) {
        jQuery('#[% param_name %]').prop('required', false);
      } else {
        jQuery('#[% param_name %]').prop('required', true);
      }
    } else {
      jQuery('#[% param_name %]').prop('required', false);
    }
  }

-->
</script>
