#{param name=users /}
#{param name=type /}
#{param name=keyword/}
#{param name=filter/}
#{param name=totalPage /}
#{param name=currentPage /}
#{param name=hasNext /}

<!-- selectGroupModal -->
<div id="userSelectorDialog" class="userSelectorDialog modal hide fade in uiPopup modal8" style="display:block" data-type="${type}" tabindex="-1" role="dialog" aria-labelledby="userSelectorLabel" aria-hidden="true" >
  <div class="popupHeader clearfix">
    <a onclick="" title="Close Window" class="uiIconClose pull-right close"></a>
    <h3 id="shareProjectLabel" class="PopupTitle popupTitle">&{popup.selectUser}</h3>
  </div>
  <div class="PopupContent popupContent uiUserSelector">
    <div class="uiSearch clearfix">
      <form action="#" class="formSearchUser" method="GET">
          <span class="searchByUser">
            <span class="inputLarge ">
              <a type="submit" data-original-title="&{label.quickSearch}" rel="tooltip" data-placement="left" class="btnSearchUser" id="">
                <i class="uiIconSearch uiIconLightGray"><span class="skipHidden">&{label.quickSearch}</span></i>
              </a>
              <input type="text" id="Quick Search" name="keyword" placeholder="&{label.search}" value="${keyword}">
            </span>
            <span class="selectboxMedium">
              <span class="uiSelectbox">
                <select id="filter" name="filter" class="selectbox">
                  <option value="userName" ${filter == '' || filter == 'userName' ? 'selected="selected"' : ''}>&{label.username}</option>
                  <option value="lastName" ${filter == 'lastName' ? 'selected="selected"' : ''}>&{label.lastName}</option>
                  <option value="firstName" ${filter == 'firstName' ? 'selected="selected"' : ''}>&{label.firstName}</option>
                  <option value="email" ${filter == 'email' ? 'selected="selected"' : ''}>&{label.email}</option>
                </select>
              </span>
            </span>
          </span>
          
          <input type="hidden" name="selectedUsers"/>
          <input type="hidden" name="page"/>
      </form>
      </div>
      <table class="uiGrid table table-hover table-striped" id="UIListUsers">
        <thead>
          <tr>            
            <th class="center" style="width:20px">
              <span class="uiCheckbox" style="margin-left: 10px">
                <input type="checkbox" name="selectall" class="checkbox"><span></span>
              </span>             
            </th>            
            <th>&{label.username}</th>
            <th>&{label.firstName}</th>
            <th>&{label.lastName}</th>
            <th>&{label.email}</th>
          </tr>
        </thead>
        <tbody>
        <% if (users.size() > 0) { for (def user in users) {%>
            <tr>
                <td class="center" style="width:20px">
                    <span class="uiCheckbox" style="margin-left: 10px">
                        <input type="checkbox" class="chkUser checkbox" name="username" value="${user.userName}" data-dispayname="${user.displayName}" id="root">
                        <span></span>
                    </span>
                </td>
                <td><span class="text">${user.userName}</span></td>
                <td><span class="text">${user.firstName}</span></td>
                <td><span class="text">${user.lastName}</span></td>
                <td><a class="text" href="javascript:void(0);">${user.email}</a></td>
            </tr>
        <%}} else {%>
          <tr>
              <td class="empty center" colspan="5">
                  &{message.noUserFound}
              </td>
          </tr>
        <%}%>
      </tbody>
    </table>

    <%if (totalPage < 0 || totalPage > 1) {%>
		<div class="pageIteratorBorder">
			#{include path=pageIterator.gtmpl}#{/include}
		</div>
	 <% } %>
    <div class="uiAction uiActionBorder">    
      <a class="btn addUser"  href="javascript:void(0);" >&{popup.add}</a>  
      <a class="btn btnClose"  href="javascript:void(0);">&{popup.close}</a>
    </div>
  </div>
</div>
<script type="text/javascript">
    require(['SHARED/jquery', 'taskManagementApp'], function($, taApp) {
        taApp.initTooltip($('#userSelectorDialog'));
    });
</script>
