<div class="selector">
<div class="select-available">{% trans "Available" %}<br/>
  {{ select_available|safe }}
  <script type="dojo/method">
    var turn = this;
    require(["dojo/query", "dijit/registry"], function(query, registry) {
      while(1) {
        turn = registry.getEnclosingWidget(turn.domNode.parentNode);
        if(turn.isInstanceOf(dijit.form.Form)) break;
      }
      old = turn.onSubmit;
      turn.onSubmit = function(e) {
        query("select", turn.domNode).forEach(function(s) {
          for (var i = 0; i < s.length; i++) {
            s.options[i].selected = 'selected';
          }
        });
        old.call(turn, e);
      };
    });
  </script>
  <script type="dojo/event" data-dojo-event="onDblClick" item="e">
    var s = this.getSelected()[0];
    var sel = dijit.byId("{{ attrs.id }}");
    var c = dojo.doc.createElement('option');
    c.innerHTML = s.text;
    c.value = s.value;
    sel.domNode.appendChild(c);
    s.parentNode.removeChild(s);
  </script>
</select>

</div>

<div class="select-options">
  <br />
  <a href="#" aria-label="{% trans "Remove" %}" onClick="
  var s=dijit.byId('{{ attrs.id|escapejs }}');
  var s2=dijit.byId('select_from');
  s.getSelected().forEach(function(i){
      var c = dojo.doc.createElement('option');
      c.innerHTML = i.text;
      c.value = i.value;
      s2.domNode.appendChild(c);
      i.parentNode.removeChild(i);
  });if(s.doChange) s.doChange(); ">
      &lt;&lt;
  </a>
  <br />
  <br />
  <br />
  <a href="#" aria-label="{% trans "Add" %}" onClick="
  var s2=dijit.byId('{{ attrs.id }}');
  var s=dijit.byId('select_from');
  s.getSelected().forEach(function(i){
      var c = dojo.doc.createElement('option');
      c.innerHTML = i.text;
      c.value = i.value;
      s2.domNode.appendChild(c);
      i.parentNode.removeChild(i);
  });if(s2.doChange) s2.doChange(); ">
      &gt;&gt;
  </a>
</div>
<div class="select-selected">
  {% trans "Selected" %}<br/>
  {{ select_selected|safe }}
  <script type="dojo/event" data-dojo-event="onDblClick" item="e">
    var s = this.getSelected()[0];
    var sel = dijit.byId("{{ fromid }}");
    var c = dojo.doc.createElement('option');
    c.innerHTML = s.text;
    c.value = s.value;
    sel.domNode.appendChild(c);
    s.parentNode.removeChild(s);
  </script>

{% if sorter %}
  <script type="dojo/event" data-dojo-event="onChange" item="e">
    this.doChange();
  </script>
  <script type="dojo/method" data-dojo-event="doChange">
    var select = this;
    require(["dijit/registry"], function(registry) {
      var up = registry.byId('{{ attrs.id }}_Up');
      var down = registry.byId('{{ attrs.id }}_Down');
      if(select.get('value').length > 0) {
          up.set('disabled', false);
          down.set('disabled', false);
      } else {
          up.set('disabled', true);
          down.set('disabled', true);
      }
    });
  </script>
{% endif %}
</select>
</div>

{% if sorter %}
  <div class="select-buttons">
    <button id="{{ attrs.id }}_Up" data-dojo-type="dijit/form/Button">
      Up
      <script type="dojo/event" data-dojo-event="onClick" data-dojo-args="e">
        require(["dojo/query", "dijit/registry"], function(query, registry) {
          var select = registry.byId("{{ attrs.id }}");
          select.getSelected().forEach(function(i) {
             var prev = i.previousSibling;
             while(prev) {
               if(prev.localName != 'option') {
                  prev = prev.previousSibling;
               } else {
                  break;
               }
             }
             if(prev) {
               var parent = i.parentNode;
               i.parentNode.removeChild(i);
               parent.insertBefore(i, prev);
             }
          });
        });
      </script>
    </button>
    <br />
    <button id="{{ attrs.id }}_Down" data-dojo-type="dijit/form/Button">
      Down
      <script type="dojo/event" data-dojo-event="onClick" data-dojo-args="e">
        require(["dojo/query", "dijit/registry"], function(query, registry) {
          var select = registry.byId("{{ attrs.id }}");
          select.getSelected().forEach(function(i) {
             var nexts = i.nextSibling;
             while(nexts) {
               if(nexts.localName != 'option') {
                  nexts = nexts.nextSibling;
               } else {
                  break;
               }
             }
             if(nexts) {
               var parent = i.parentNode;
               i.parentNode.removeChild(i);
               parent.insertBefore(i, nexts.nextSibling);
             }
          });
        });
      </script>
    </button>
  </div>
{% endif %}
</div>
