<ul class="no-style">

<% if @user_my_modules.size == 0 then %>
  <li><em><%= t 'experiments.canvas.full_zoom.modal_manage_users.no_users' %></em></li>
<% else %>
  <% @user_my_modules.each_with_index do |umm, i| user = umm.user %>
  <li>
  <% if i > 0 %><hr><% end %>
    <div class="row">

      <div class="col-xs-2">
        <span class='global-avatar-container'>
          <%= image_tag avatar_path(user, :icon_small), class: 'img-circle pull-left' %>
        </span>
      </div>

      <div class="col-xs-4" style="line-height: 15px">
        <span><%= user.full_name %></span>
        <br><span class="text-muted" title="<%=t "experiments.canvas.full_zoom.modal_manage_users.user_join_full", user: user.full_name, date: l(umm.created_at, format: :full_date), time: l(umm.created_at, format: :time) %>">
          <em><%=t "experiments.canvas.full_zoom.modal_manage_users.user_join", date: l(umm.created_at, format: :full_date) %></em>
        </span>
      </div>

      <% if can_manage_users_in_module?(@my_module) %>
        <div class="col-xs-2">
          <%= link_to my_module_user_my_module_path(@my_module, umm, format: :json), method: :delete, remote: true, class: 'btn btn-link remove-user-link' do %>
          <span class="fas fa-times"></span>
          <% end %>
        </div>
      <% end %>

    </div>
  </li>
  <% end %>
<% end %>

<% if can_manage_users_in_module?(@my_module) && @unassigned_users.count > 0 %>
  <li>
    <hr>
    <div class="row">
    <%= bootstrap_form_for [@my_module, @new_um], remote: true, format: :json, html: { class: 'add-user-form' } do |f| %>
      <div class="col-xs-4">
      <%= collection_select(:user_my_module, :user_id, @unassigned_users, :id, :full_name, {}, { class: 'selectpicker' }) %>
      </div>
      <div class="col-xs-2">
        <%= f.button class: 'btn btn-primary' do %>
          <span class="fas fa-plus"></span>
          <span class="hidden-xs"><%= t("experiments.canvas.full_zoom.modal_manage_users.create") %></span>
        <% end %>
      </div>
    <% end %>
    </div>
  </li>
<% end %>

</ul>
