<h2>Abuse Reports</h2>

<div class="row my-3">
  <div class="col">
    <ul class="nav nav-pills">
      <li class="nav-item">
        <a href="<%= internal_reports_path(state: @feedback_type, status: "Open") %>" class="nav-link <%= "active" if @status == "Open" %>">Open/Unresolved</a>
      </li>
      <li class="nav-item">
        <a href="<%= internal_reports_path(state: @feedback_type, status: "Resolved") %>" class="nav-link <%= "active" if @status == "Resolved" %>">Resolved</a>
      </li>
      <li class="nav-item">
        <a href="<%= internal_reports_path(state: @feedback_type, status: "Invalid") %>" class="nav-link <%= "active" if @status == "Invalid" %>">Invalid</a>
    </ul>
  </div>
</div>

<div class="row my-3" id="vomitReactions">
  <div class="card w-100">
    <div class="card-header" id="vomitReactionsHeader">
      <h2 class="d-inline">Vomit Reactions</h2>
      <button class="btn btn-secondary float-right" type="button" data-toggle="collapse" data-target="#vomitReactionsBodyContainer" aria-expanded="false" aria-controls="vomitReactionsBodyContainer">
        Toggle
      </button>
    </div>
    <div id="vomitReactionsBodyContainer" class="collapse hide" aria-labelledby="vomitReactionsHeader" data-parent="#vomitReactions">
      <div class="card-body" style="overflow: scroll; max-height: 500px;">
        <% @vomits.each do |reaction| %>
          <% next if (reaction.reactable_type == "Article" && !reaction.reactable.published) || (reaction.reactable_type == "User" && reaction.reactable&.banished?) %>
          <div class="d-flex justify-content-between" data-controller="reaction" data-reaction-id="<%= reaction.id %>">
            <span>
              🤢 <a href="<%= reaction.user.path %>">@<%= reaction.user.username %></a>
            </span>
            <span>
              <strong><%= reaction.reactable_type %>:</strong>
              <a href="<%= reaction.reactable.path %>"><%= reaction.reactable_type == "User" ? reaction.reactable.username : reaction.reactable.title %></a>
              <% if reaction.reactable_type == "User" && reaction.reactable.banned %>
                <span class="badge badge-danger">Suspended</span>
              <% end %>
              <% if reaction.reactable_type == "User" && reaction.reactable.vomitted_on? %>
                <span class="badge badge-warning">Vomitted</span>
              <% end %>
            </span>
            <span>
              <% if params[:status] == "Open" || params[:status].blank? %>
                <% if reaction.reactable_type == "User" %>
                  <button
                    class="btn btn-success btn-sm"
                    type="button"
                    data-reactable="user"
                    data-status="confirmed"
                    data-target="reaction.confirmed"
                    data-action="reaction#reactableUserCheck">
                    CONFIRM
                  </button>
                <% else %>
                  <button
                    class="btn btn-success btn-sm"
                    type="button"
                    data-reactable="non-user"
                    data-status="confirmed"
                    data-target="reaction.confirmed"
                    data-action="reaction#reactableUserCheck">
                    CONFIRM
                  </button>
                <% end %>
                <button
                  class="btn btn-danger btn-sm"
                  type="button"
                  data-altstatus="invalid"
                  data-target="reaction.invalid"
                  data-action="reaction#updateReactionInvalid">
                  INVALID
                </button>
              <% end %>
            </span>
          </div>
          <hr id="js__reaction__div__hr__<%= reaction.id %>">
        <% end %>
      </div>
    </div>
  </div>
</div>
