<span class="<%= main_css -%> input-append" id="<%= field_id -%>_lookup_trigger_container">
  <span id="<%= field_id %>-no_value" class="display-name" style="display: none;"><%= l(options[:label_none] || :label_none) %></span>
  <%= hidden_field_tag(field_name, '', :id => '') -%>
  <span class="easy-lookup-values-wrapper">
    <span id="<%= field_id -%>" class="easy-lookup-values">
      <% if selected_values.blank? %>
        <%= content_tag(:span, l(options[:label_none] || :actionview_instancetag_blank_option), :class => 'display-name placeholder') -%>
      <% else %>
        <%= render(:partial => 'modal_selectors/modal_selector_selected_values', :locals => {:selected_values => selected_values, :field_name => field_name, :field_id => field_id, :show_delete_link => true}) -%>
      <% end -%>
    </span>
  </span>
  <% style = '' %>
  <% style << 'display: none;' unless selected_values.any? %>
  <%= link_to('', 'javascript:void(0)', :id => "#{field_id}_lookup_delete_button", :title => l(:button_delete), :class => 'icon-del', :onclick => '$(this).siblings(".easy-lookup-values-wrapper").find(".icon-del").click();', :style => style) %>
  <%= link_to('', 'javascript:void(0)', :id => "#{field_id}_lookup_trigger", :title => l("title_easy_modal_selector_trigger.#{entity_type_underscored}"), :class => "icon-add #{entity_type_underscored}" ) %>
</span>

<script type="text/javascript">
  $( document ).on( "erui_interface_change_horizontal", function() {
    var $target = $('#<%=field_id%>');
    var height = $target.height();
    $target.parent().height(height);
  });
  $('.easy-lookup-selected-value-wrapper').click(function(event) {
    event.stopPropagation();
  });
  $('#<%= field_id -%>_lookup_trigger_container').click(function(event) {
    if (event.which != 1) return false;
    if ($(event.target).attr('id') === "<%= field_id %>_lookup_delete_button") {
      return;
    }

    var selected_values = $(event.target).closest('.easy-lookup').find('.easy-lookup-values input').serializeArray().map(function(el){ return el.value; });

    $.post('<%=j(url).html_safe -%>', {'selected_values': selected_values}, function(data) {
      var ajaxModal = $("#ajax-modal");
      if($('#easy_modal').length === 0)
        ajaxModal.parent().append($("<div/>").attr({id: "easy_modal"}).hide());
      var modal = $('#easy_modal');
      modal.html(data);

      EASY.modalSelector.showEasyModal(function() {
        return ['<%=j(url).html_safe -%>&' + $('#modal_selector_query_form, .modal-selected-values form').serialize() + '&page=', ''];
      });

      var btns = [];

      btns.push({text: '<%=j l(:button_close) -%>',
        click: function() {
          $(this).dialog('close');
        },
        'class': 'button'});

      <%= call_hook(:view_easy_modal_selector_tag_additional_buttons, {:field_id => field_id, :field_name => field_name, :entity_type => entity_type, :options => options}) %>

      btns.push({text: '<%=j options[:button_selector_assign_label] || l(:button_save) -%>',
        click: function() {
          EASY.modalSelector.saveAndCloseModal('<%= field_id -%>');
        },
        'class': 'button-positive'});

      modal.dialog({title: $("#<%= field_id -%>_lookup_trigger_container").prev("label").text(), buttons: btns});
    });
  });
</script>
