<% content_for :head do %>
  <%= javascript_include_tag 'app_table' %>
<% end %>

  <div class="user-management">
  <%= '<h1 class="head"><i class="fa fa-user" aria-hidden="true"></i>
 Benutzerverzeichnis</h1>'.html_safe if theUser(session).is_admin? || theUser(session).is_team_admin? %>

    <div class="table-actions">
      <span class=table-filter>Filter:&nbsp;
         <input type="text" id="filter" value="" onchange="filterchanged();" onkeyup="filterkeyup()">
         <i class="fa fa-times" aria-hidden="true"  onclick="filterselected();"></i>
      </span>

    <% if theUser(session).is_admin? || theUser(session).is_team_admin? %>
      <%= link_to({:action => "new"}, {}) do %>
        <span><i class="fa fa-user-plus" aria-hidden="true"></i> Neuen Benutzer anlegen</span>
      <%end%>
    <%end%>

    <% if theUser(session).is_admin? %>
      <%= link_to({ :controller => 'teams' }, {}) do %>
        <span><i class="fa fa-book" aria-hidden="true"></i> Benutzerrollen verwalten</span>
      <%end%>
    <%end%>

    </div>

    <table id="usertable">
     <thead>
      <tr>
        <th class="zeile0 t_head"><%= link_to("Benutzername",  {:action => "index" , :sorting => "0"}, {}) %></th>
        <th class="zeile0 t_head"><%= link_to("Benutzerrolle", {:action => "index" , :sorting => "1"}, {}) %></th>
        <th class="zeile0 t_head"><%= link_to("Bundesländer",  {:action => "index" , :sorting => "2"}, {}) %></th>
        <th class="zeile0 t_head">Aktion</th>
      </tr>
    </thead>
    <tbody>
      <% @users.each do |user| %>
        <tr theuser="<%= user.loginname %>" srch="<%= h("#{user.loginname} #{user.team.name} #{user.federal_states.map { |x| x.name }.join(' ')}") %>">

          <td testatt="username=<%= user.loginname %>" class="zeile<%= $x %>"><%= user.loginname %></td>

          <td class="zeile<%= $x %>" id="role-view<%=  user.id %>">
            <%= render :partial => "role_btn", :locals => {:user => user}%>
          </td>

          <td class="zeile<%= $x %>" id="state-view<%=  user.id %>">
            <%= render :partial => "state_btn", :locals => {:user => user} %>
          </td>

          <td class="zeile<%= $x %>" id="action-view<%=  user.id %>">
            <%= render :partial => "actions", :locals => {:user => user} %>
          </td>
        </tr>
      <% end %>
      </tbody>
    </table>
  </div>
</div>

<script type="text/javascript">
var currentFilter = '';
var currentTimeout = null;

function filter() {
   if( currentTimeout !== null ) {
      window.clearTimeout(currentTimeout);
      currentTimeout = null;
   }
   var by = document.getElementById('filter').value.toLowerCase();
   if( by === currentFilter )
      return;
   var table = document.getElementById('usertable');
   for( var i=1, cl=1, row; i<table.rows.length; ++i ) {
      row = table.rows[i];
      // check for visibility
      var visi = false;
      if( by.length > 0 && i != table.rows.length-1 ) {
         visi = (row.getAttribute('srch').indexOf(by) >= 0);
      }else
         visi = true;
      if( visi ) {
         for( var j=0; j<row.cells.length; ++j )
            row.cells[j].setAttribute('class',  'zeile'+cl);
         row.style.display = '';
         cl = 1-cl;
      }else{
         row.style.display = 'none';
      }
   }
   currentFilter = by;
}
function filterchanged() {
   // alert("filterchanged(); content=„"+document.getElementById('filter').value+"“");
   filter();
}
function filterselected() {
   // alert("filterselected(); content=„"+document.getElementById('filter').value+"“");
   // bei Doppelklick ins Feld, au mei.
   document.getElementById('filter').value = '';
   filter();
   document.getElementById('filter').focus();
}
function filterkeyup() {
   // 1 second after key-up, redraw the table
   if( currentTimeout !== null ) {
      window.clearTimeout(currentTimeout);
      currentTimeout = null;
   }
   currentTimeout = window.setTimeout(filter, 1000);
}
document.getElementById('filter').focus();
</script>
