<% tag_id = tag_name.gsub(/[\[\]]+/, '_').sub(/_+$/, '') %>
<% available_tag_id = "available_#{tag_id}" %>
<% selected_tag_id = "selected_#{tag_id}" %>

<div class="query-columns">
      <%= label_tag available_tag_id, l(:description_available_columns) %>
      <%= select_tag 'available_columns',
              options_for_select(query_available_inline_columns_options(query)),
              :id => available_tag_id,
              :multiple => true, :size => 10,
              :ondblclick => "moveOptions(this.form.#{available_tag_id}, this.form.#{selected_tag_id});" %>
</div>
<div class="buttons">
      <button type="button" class="move-right" onclick="moveOptions(this.form.<%= available_tag_id %>, this.form.<%= selected_tag_id %>);"><%= sprite_icon("arrow-narrow-right", rtl: true) %></button>
      <button type="button" class="move-left" onclick="moveOptions(this.form.<%= selected_tag_id %>, this.form.<%= available_tag_id %>);"><%= sprite_icon("arrow-narrow-left", rtl: true) %></button>
</div>
<div class="query-columns">
      <%= label_tag selected_tag_id, l(:description_selected_columns) %>
      <%= select_tag tag_name,
              options_for_select(query_selected_inline_columns_options(query)),
              :id => selected_tag_id,
              :multiple => true, :size => 10,
              :ondblclick => "moveOptions(this.form.#{selected_tag_id}, this.form.#{available_tag_id});" %>
</div>
<div class="buttons">
      <button type="button" onclick="moveOptionTop(this.form.<%= selected_tag_id %>);">&#8648;</button>
      <button type="button" onclick="moveOptionUp(this.form.<%= selected_tag_id %>);">&#8593;</button>
      <button type="button" onclick="moveOptionDown(this.form.<%= selected_tag_id %>);">&#8595;</button>
      <button type="button" onclick="moveOptionBottom(this.form.<%= selected_tag_id %>);">&#8650;</button>
</div>

<%= javascript_tag do %>
$(document).ready(function(){
  $('.query-columns').closest('form').submit(function(){
    $('#<%= selected_tag_id %> option:not(:disabled)').prop('selected', true);
  });
});
<% end %>
