{% extends "base.html" %}

{% block head %}
<title>Evaluation Queue — {{ site_name | default(value="Blocks") }}</title>
{% endblock %}

{% block content %}
<main class="mx-auto w-full max-w-5xl px-4 py-8 sm:px-6 lg:py-10" data-plugin="micro-jobs">
    <h1 class="mb-2 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">Evaluation Queue</h1>
    <p class="mb-6 text-sm leading-6 text-muted">Submissions waiting for your decision.</p>
    <p id="mj-review-status" class="mb-3 text-sm text-muted" role="status" aria-live="polite">Loading submissions…</p>
    <button type="button" id="mj-review-retry" class="blocks-button blocks-button-secondary mb-4" hidden>Try again</button>
    <div id="mj-review-list" class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3" aria-busy="true"></div>
    <div class="mt-6 flex flex-wrap items-center gap-3">
        <button type="button" id="mj-review-prev" class="blocks-button blocks-button-secondary">Previous</button>
        <span id="mj-review-page" class="min-w-24 text-center text-sm text-muted" aria-live="polite"></span>
        <button type="button" id="mj-review-next" class="blocks-button blocks-button-secondary">Next</button>
    </div>
</main>
{% endblock %}

{% block scripts %}
<script src="/plugins/micro-jobs/assets/js/micro-jobs-review.js"></script>
{% endblock %}