<div id="member-filter" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3><%= t('list.user') %></h3>
  </div>
  <div class="modal-body">
    <div class="tabbable tabs-left">
      <div class="nano">
        <div class="content">
          <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#all" data-toggle="tab"><%= t('list.role') %></a></li>
            <% @sorted_users.each_key do |role| %>
              <li class=""><a href="#r_<%= role.id %>" data-toggle="tab"><%= role.title %></a></li>
            <% end %>
          </ul>
        </div>
      </div>
      <div class="tab-content">
        <div class="tab-pane fade in active" id="all">
          <%= form_tag role_form_url, remote: true do %>
            <fieldset>
              <% @sorted_users.each_key do |role| %>
                <label class="checkbox inline">
                  <%= check_box_tag 'role_ids[]', role.id , false %> <%= role.title %>
                </label>
              <% end %>
            </fieldset>
            <div class="form-actions">
              <button type="button" class="btn" data-dismiss="modal"><%= t(:cancel) %></button>
              <%= submit_tag t(:submit), class: "btn btn-primary" %>
              <%= hidden_field_tag field, @field %>              
            </div>
          <% end %>
        </div>
        <% @sorted_users.each do |role, users| %>
          <div class="tab-pane fade" id="r_<%= role.id %>">
            <%= form_tag user_form_url, remote: true do %>
              <fieldset class="clearfix">
                <div class="member-filter-result nano">
                  <div class="content">
                    <ul class="checkbox-card clearfix">
                      <% users.each do |user| %>
                        <li class="check-item">
                          <label>
                            <%= image_tag (user.avatar.file ? user.avatar : "menber-pic.png"), class: "user-pic" %>
                            <span class="user-name"><%= user.name %></span>
                          </label>
                          <%= check_box_tag 'user_ids[]', user.id , false %>
                        </li>
                      <% end %>
                    </ul>
                  </div>
                </div>
                <div class="form-actions condition">
                  <button type="button" class="btn" data-dismiss="modal"><%= t(:cancel) %></button>
                  <%= submit_tag t(:submit), class: "btn btn-primary" %>
                  <%= hidden_field_tag field, @field %>                  
                </div>
              </fieldset>
            <% end %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>


<script type="text/javascript">
  $(document).ready(function() {
    $(".modal").on("hidden", function () {
      $("#select_user").remove();
    });
    $('#member-filter').on('shown', function() {
      $('#member-filter').off('shown')
      $(this).find('.nano').nanoScroller({ scrollTop: 0, iOSNativeScrolling: true });
      $(this).find('.checkbox-card').cardCheck();
    });
  });
</script>