{% extends "base.html" %}

{% block head %}
<title>Task Inbox — {{ 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-6 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">Task Inbox</h1>

    <div id="mj-inbox-freeze" class="my-4 rounded-xl border border-danger bg-danger/10 px-4 py-3 text-sm text-danger" role="alert" hidden></div>
    <div id="mj-inbox-notmember" class="my-4 rounded-xl border border-warning bg-warning/10 px-4 py-3 text-sm text-foreground" role="alert" hidden>
        You are not enrolled as a subscriber yet. Please contact the store administrator.
    </div>

    <form id="mj-inbox-search" class="mb-6 grid w-full max-w-2xl grid-cols-1 items-end gap-3 sm:grid-cols-[minmax(0,1fr)_auto]">
        <div class="blocks-form-field"><label for="mj-inbox-query">Search tasks</label>
            <input id="mj-inbox-query" class="blocks-input" type="search" name="q" placeholder="Search tasks…">
        </div>
        <button type="submit" class="blocks-button blocks-button-secondary w-full sm:w-auto">Search</button>
    </form>

    <p id="mj-inbox-status" class="mb-3 text-sm text-muted" role="status" aria-live="polite">Loading tasks…</p>
    <button type="button" id="mj-inbox-retry" class="blocks-button blocks-button-secondary mb-4" hidden>Try again</button>
    <div id="mj-inbox-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-inbox-prev" class="blocks-button blocks-button-secondary">Previous</button>
        <span id="mj-inbox-page" class="min-w-24 text-center text-sm text-muted" aria-live="polite"></span>
        <button type="button" id="mj-inbox-next" class="blocks-button blocks-button-secondary">Next</button>
    </div>
</main>
{% endblock %}

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