<style>
  textarea {
    height: 140px;
  }
</style>
<h1><%= params[:state] || "community" %> mods</h1>
<%= form_tag("/internal/mods", method: "get") do %>
  <%= label_tag(:search, "Find by tag name:") %>
  <%= text_field_tag(:search, params[:search]) %>
  <% if params[:state].present? %>
    <%= hidden_field_tag(:state, params[:state]) %>
  <% end %>
  <%= submit_tag("Search") %>
<% end %>

<h3>
  <a href="/internal/mods"
     style="<%= "background: yellow" if params[:state].blank? %>">General Community</a> |
  <a href="/internal/mods?state=tag"
     style="<%= "background: yellow" if params[:state] == "tag" %>">Tag Mods</a> |
  <a href="/internal/mods?state=potential"
     style="<%= "background: yellow" if params[:state] == "potential" %>">Potential Mods</a>
</h3>

<%= paginate @mods %>
<div class="wrapper" style="font-weight: 600; border-bottom: 2px solid black; grid-template-columns: 15% 25% 13% 13% 20% 14%;">
  <div>ID</div>
  <div>Profile</div>
  <div>Comments</div>
  <div>Badges</div>
  <div>Last Comment</div>
  <% if params[:state] == "potential" %>
    <div>Action</div>
  <% end %>
</div>
<% @mods.each do |user| %>
  <div class="wrapper" style="border-top: 1px solid grey; padding: 10px; grid-template-columns: 15% 25% 13% 13% 20% 14%; font-size: 0.9em">
    <div><a href="/internal/users/<%= user.id %>"><%= user.id %></a></div>
    <div><a href="<%= user.path %>">@<%= user.username %></a></div>
    <div><%= user.comments_count %></div>
    <div><%= user.badge_achievements_count %></div>
    <div><%= time_ago_in_words user.last_comment_at %> ago</div>
    <% if params[:state] == "potential" && !user.trusted %>
      <div style="font-size: 0.8em;">
        <%= form_for([:internal, user], url: "/internal/mods/#{user.id}", method: :patch) do |f| %>
          <%#= f.hidden_field :id, value: user.id %>
          <%= f.submit "Make Trusted Mod" %>
        <% end %>
      </div>
    <% end %>
  </div>
  <% if user.notes.any? %>
    <details closed>
      <summary style="cursor: pointer; font-weight: bold; padding: 7px 12px; background: #f0f3f7"><%= pluralize user.notes.size, "Note" %></summary>
      <ul>
        <% user.notes.each do |note| %>
          <li>
            <b><%= note.reason %>:</b> <%= note.content %> <em>—<%= note.created_at.strftime("%B %e, %Y") %></em>
          </li>
        <% end %>
      </ul>
    </details>
  <% end %>
<% end %>
<%= paginate @mods %>
<br /><br />

<script>
function submitForms() {
  var form = $(this);
  var valuesToSubmit = $(this).serialize();
  form.parents(".wrapper").addClass("submitting-no-border")
  $.ajax({
    type: "POST",
    url: $(this).attr('action'), //sumbits it to the given url of the form
    data: valuesToSubmit,
    // dataType: "JSON" // you want a difference between normal and ajax-calls, and json is standard
  }).success(function (json) {
    console.log("success")
    form.parents(".wrapper").addClass("highlighted-no-border")
  });
  return false; // prevents normal behaviour
}

$('.wrapper').on("submit", "form", submitForms)

</script>
