<style>
  .alert {
    border: 2px red solid;
  }
</style>
<h3 class="top-nav" style="font-weight:400;font-size:0.9em;">
  <a href="/internal/users" style="<%= "font-weight:bold" if params[:state].blank? %>">All</a> |
  <a href="/internal/users?state=role-admin" style="<%= "font-weight:bold" if params[:state] == "role-admin" %>">Admins</a> |
  <a href="/internal/users?state=role-super_admin" style="<%= "font-weight:bold" if params[:state] == "role-super_admin" %>">Super Admins</a> |
  <a href="/internal/users?state=role-trusted" style="<%= "font-weight:bold" if params[:state] == "role-trusted" %>">Trusted</a> |
  <a href="/internal/users?state=role-tag_moderator" style="<%= "font-weight:bold" if params[:state] == "role-tag_moderator" %>">Tag Mods</a>
</h3>
<%= form_tag("/internal/users", method: "get") do %>
  <%= label_tag(:search, "Find by:") %>
  <%= text_field_tag(:search, params[:search]) %>
  <% if params[:state].present? %>
    <%= hidden_field_tag(:state, params[:state]) %>
  <% end %>
  <%= submit_tag("Search") %>
  <em style="font-size:0.78em;">(<b>fields:</b> name, username, twitter_username, github_username, email)</em>
<% end %>
<%= paginate @users %>
<br>
<div class="wrapper" style="font-weight: 600; border-bottom: 2px solid black;">
  <div>User</div>
  <div>ID</div>
  <div>Name</div>
  <div>Twitter</div>
  <div>GitHub</div>
  <div>Email</div>
</div>

<% @users.each do |user| %>
  <div class="wrapper" style="border-bottom: 1px solid grey; padding: 10px;">
    <div class="grid-item"><a href="/internal/users/<%= user.id %>" target="_blank">@<%= user.username %></a></div>
    <div class="grid-item"><%= user.id %></div>
    <div class="grid-item"><%= user.name %></div>
    <div class="grid-item"><%= user.twitter_username %></div>
    <div class="grid-item"><%= user.github_username %></div>
    <div class="grid-item"><%= user.email %></div>
  </div>
<% end %>
<%= paginate @users %>
