<div class="pod-body pod-body-menu is-paragraph">
  <div class="grid-row">
    <div class="grid-data is-2of5">
      <label for="search_location_continent_id">
        <!-- ID 5218462d -->Kontinent
      </label>
    </div><!-- /.grid-data -->
    <div class="grid-data is-3of5 js-event-tracking" data-gaq='{"category": "b2b candidate search", "action": "Click on Choose Location", "label": "Continent"}'>
      <%= select_tag 'search_location_continent_id',
      options_for_select(Country.internal_search_region_list($pjpp_country_version_id, $pjpp_locale).collect{ |c| [c.label, c.id ] }, search.location_continent_id ),
      { :id => :search_location_continent_id,
        :onchange => 'continent_changed(); location_params(jQuery("#search_location_country_id").val());',
        :class => "is-full" } %>
    </div><!-- /.grid-data -->
  </div><!-- /.grid-row -->
  <div class="grid-row is-paragraph">
    <div class="grid-data is-2of5">
      <label for="search_location_country_id">
        <!-- ID f96e5125 -->Land
      </label>
    </div><!-- /.grid-data -->
    <div class="grid-data is-3of5 js-event-tracking" data-gaq='{"category": "b2b candidate search", "action": "Click on Choose Location", "label": "Country"}'>
      <%# NOTE: The "real" list is generated by a call to continent_changed() after the definition of that function below.%>
      <%= select_tag 'search[location_country_id]',
          country_options_int(search.location_country_id),
          { :id => :search_location_country_id,
            :class => 'search_input is-full',
            :onchange => 'location_params(this.options[this.selectedIndex].value);' } %>
    </div><!-- /.grid-data -->
  </div><!-- /.grid-row -->
  <div class="is-checkbox-wrapper is-paragraph js-event-tracking" data-gaq='{"category": "b2b candidate search", "action": "Click on Choose Location", "label": "Tick international candidates"}'>
    <%= search_check_box 'search', 'international' %>
    <label for="search_international">
      <% if type == 'jobs' %>
        <!-- ID aa45962e -->auch Stellen im Ausland berücksichtigen
      <% elsif type == 'candidates' %>
        <!-- ID 0980652e -->Kandidaten weltweit berücksichtigen
      <% else %>
        <% raise 'unknown search type' %>
      <% end %>
    </label>
  </div><!-- /.is-checkbox-wrapper -->
  <div id="location_city" class="grid-row is-paragraph">
    <div class="grid-data is-2of5">
      <label for="search_location">
        <!-- ID a72957fb -->PLZ/Ort
      </label>
    </div><!-- /.grid-data -->
    <div class="grid-data is-3of5 has-action-element js-event-tracking" data-gaq='{"category": "b2b candidate search", "action": "Click on Choose Location", "label": "Free text postcode"}'>
      <%= text_field_with_auto_complete( :search,
                                         :location,
                                       { :class      => "auto-complete search_input is-full",
                                         :onkeypress => 'return no_submit_on_enter(event,this)' },
                                       { :after_update_element => 'function(element, value) { updateChosenLocation(element, value); }',
                                         :with       => "'location=' + jQuery('#search_location').val() + getCountryAndStateParametersInSearch('search_location_country_id')",
                                         :url        => { :action => 'search_location' } } ) %>
      <div id="location_label" class="is-input-field-dependant">
        <%= search.location_info %>
        <% if search.location_info.try(:empty?) %>
          <div class="is-error">
            <!-- ID 22d89fed -->unbekannt
          </div><!-- /.is-error -->
        <% end %>
      </div><!-- /#location_label -->
      <input id="search_longitude" class='search_input' name="search[longitude]" value="<%= search.longitude %>" type="hidden" />
      <input id="search_latitude"  class='search_input' name="search[latitude]" value="<%= search.latitude %>" type="hidden" />
      <input id="search_location_info" class='search_input' name="search[location_info]" value="<%=h search.location_info %>" type="hidden" />
      <input id="search_loc_checked" class='search_input' name="search[loc_checked]" value="<%=h "#{search.location_country_id}:#{search.location}" %>" type="hidden" />
    </div><!-- /.grid-data -->
  </div><!-- /.grid-row -->
  <div id="location_distance" class="grid-row is-paragraph">
    <div class="grid-data is-2of5">
      <!-- ID 2abb143a -->Umkreis
    </div><!-- /.grid-data -->
    <div class="grid-data is-3of5">
      <div class="slider js-event-tracking" data-gaq='{"category": "b2b candidate search", "action": "Click on Choose Location", "label": "Distance slider"}'>
        <div id="distance_slider_track" class="slider-body group">
          <div id="distance_slider_handle" class="slider-handle">
            <%= image_tag('ico-slider-handle.png') %>
          </div><!-- /.slider-handle -->
        </div><!-- /.slider-body -->
        <div class="slider-display group">
          <div id="distance_range" class="is-floating-left"></div>
        </div><!-- /.slider display -->
        <%= distance_slider(search.distance_slider, 'Experteer.Search.updater.observe(null, \'location\')') %>
      </div><!-- /.slider -->
    </div><!-- /.grid-data -->
  </div><!-- /.grid-row -->
</div><!-- /.pod-body -->
<!--
set visibility of city/distance and enable/disable
search_internationl depending on a specific country or
all countries;
This method is called for initial side creation with
flag initial = true and without initial flag in case
of a change in the selected country
if 'all countries' is selected
- city/distance are hidden
- search_international is checked and disabled
if a specific country is selected
- city/distance are shown
- search_international is enabled
- if initial is not set search_international is unchecked,
if initial is set search_international is checked.
-->
<script type="text/javascript">
  var location_params_last_index = null;
  var location_params_last_country = null;
  var location_params_last_state = -1;

  var countries = new Array();
  <% [ 1, 3 ].each do |i| -%> <%# EU and US only at the moment %>
    countries[<%=i%>] = "<%= country_options_int( search.location_country_id, 500 + i ) %>";
  <% end -%>

  function continent_changed() {
    selected = parseInt(jQuery('#search_location_continent_id').val(), 10) - 500;
    jQuery('#search_location_country_id').html(countries[selected]);
    if ( Experteer.Search.updater ) {
      Experteer.Search.updater.update();
    }
  }

  function location_params(index, initial) {
    if (index >= 500 && index <= 510 ) {
      jQuery('#location_city').hide();
      jQuery('#location_distance').hide();
    } else if (index == null || index == '' ) {
      jQuery('#location_city').hide();
      jQuery('#location_distance').hide();
      jQuery('#search_international').attr('checked','checked');
      jQuery('#search_international').attr('disabled','disabled');
    } else {
      jQuery('#location_city').show();
      jQuery('#location_distance').show();
      if ( !initial ) {
        jQuery('#search_international').removeAttr('checked');
      }
      jQuery('#search_international').removeAttr('disabled');
    }
    country = getCountryAndStateInSearch('search_location_country_id');
    if ( ( location_params_last_country && country.country_id != location_params_last_country ) ||
         ( location_params_last_state != -1 && country.state_id != location_params_last_state ) ) {
      jQuery('#search_location').val('');
      jQuery('#location_label').html('');
    }
    location_params_last_index = index;
    location_params_last_country = country.country_id;
    location_params_last_state = country.state_id;
  }

  function update_location( location ) {
    jQuery('#location_label').html(location['info_label']);
    jQuery('#search_longitude').val(location['longitude']);
    jQuery('#search_latitude').val(location['latitude']);
    jQuery('#search_location_info').val(location['info']);
    jQuery('#search_loc_checked').val(location['checked']);
  }

  function validate_locations() {
    parameters = 'search[location]=' + jQuery('#search_location').val() + getCountryAndStateParametersInSearch('search_location_country_id', 'search');
    jQuery.ajax({
      url: '<%= validate_location_path %>',
      async: true,
      data: parameters,
      accept: 'application/json',
      success: function(response) {
        update_location(response);
      }
    });
    return false;
  }

  function updateChosenLocation (element, value){
      var search_location = jQuery('#search_location')
      var location = value.innerText ? value.innerText : search_location.val();
      search_location.val(location);
      jQuery('#search_loc_checked').val(location);
      validate_locations();
      Experteer.Search.updater.update(element, false);
  }

  continent_changed(); /* replace country list options */
  location_params( jQuery('#search_location_country_id').val(), true);
</script>

<script type="text/javascript">
  jQuery(document).ready(function($){
    jQuery('#search_location').
            attr('data-ujs-observed', true).
     attr('data-ujs-function', "validate_locations()"). // would call validate location on location value which is not yet updated by autocompleter.
            attr('data-ujs-update-frequency',1);
  });
</script>