<%= turbo_frame_tag :index_result do %>
<h1><%= t('views.user_menu.address_books') %></h1>

<div class="comment">
  <%= form_with(url: {action: :index}, id: :search_form, method: :get, data: {turbo: true, turbo_frame: :index_result}) do %>
  <div class="table-address-search-u">
    <%= select_tag('conditions[search_select]', options_for_select(
                   {t('activerecord.attributes.address_book.organization') => 'organization',
                    t('activerecord.attributes.address_book.name') => 'name',
                    t('activerecord.attributes.address_book.email') => 'email' },
                    params[:conditions][:search_select]),
                   :include_blank => true) %>
              &nbsp;
    <%= text_field_tag 'conditions[search_text]', params[:conditions][:search_text], { :size => 30 } %>
    <%= submit_tag(t('address_books.search_button'), :id => 'search_form_submit') %>
    <span id="search_progress"></span>
  </div>

  <div class="table-address-search-d">
    表示順序：
    <%= select_tag('conditions[sort_select_1]', options_for_select(
        { t('activerecord.attributes.address_book.organization') => 'organization',
          t('activerecord.attributes.address_book.name') => 'name',
          t('activerecord.attributes.address_book.email') => 'email' },
        params[:conditions][:sort_select_1])) %>

    <%= select_tag('conditions[sort_select_2]', options_for_select(
        { t('views.sort.asc') => 'asc', t('views.sort.desc') => 'desc'},
       params[:conditions][:sort_select_2])) %>
  </div>
  <% end %>

  <div id="result">
    <%= render 'index_result' %>
  </div>
</div>

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  // ソート
  document.querySelectorAll("#conditions_sort_select_1, #conditions_sort_select_2").forEach(function(el) {
    el.addEventListener('change', function() {
      document.getElementById("search_form_submit").click();
    });
  });
})

</script>
<% end %>
