<%= page_title "Moderation Queue" %>

<div class="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-4 mb-6">
  <div>
    <h1 class="text-h2 text-neutral-900">Moderation Queue</h1>
    <p class="text-body text-neutral-700 mt-1">
      Review and approve or reject pending content submissions.
    </p>
  </div>
</div>

<% if @submissions.any? %>
  <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
    <% @submissions.each do |submission| %>
      <%= render partial: "submissions/card", locals: { submission: submission } %>
    <% end %>
  </div>
<% else %>
  <div class="card">
    <div class="card-body text-center py-12">
      <%= heroicon("check-circle", class: "mx-auto h-12 w-12 text-success") %>
      <h3 class="text-h3 text-neutral-900 mt-4">All caught up!</h3>
      <p class="text-body text-neutral-500 mt-2">There are no submissions waiting for moderation.</p>
    </div>
  </div>
<% end %>
