{% extends "base.html" %}

{% block head %}
<title>{{ task.subject | default(value="Task") }} — {{ site_name | default(value="Blocks") }}</title>
{% endblock %}

{% block content %}
<main class="mx-auto w-full max-w-4xl px-4 py-8 sm:px-6 lg:py-10" data-plugin="micro-jobs">
    <p class="mb-5"><a class="text-sm font-semibold text-brand underline-offset-4 hover:underline" href="/plugins/micro-jobs/inbox">← Back to inbox</a></p>
    <h1 class="mb-3 text-2xl font-bold tracking-tight text-foreground sm:text-3xl">{{ task.subject }}</h1>
    <p class="mb-6 inline-flex flex-wrap items-center gap-2 rounded-full bg-canvas px-3 py-1.5 text-sm text-muted">
        Payment {{ currency_symbol }}{{ task.payment_amount | default(value=0) | price }}
        {% if task.run_number %} · Run {{ task.run_number }}{% if task.recurrence_total %} of {{ task.recurrence_total }}{% endif %}{% endif %}
        · Status {{ task.status }}
    </p>
    {% if task.description %}
    <div class="mb-6 whitespace-pre-wrap leading-7 text-foreground">{{ task.description }}</div>
    {% endif %}
    {% if task.criteria_text %}
    <h2 class="mb-2 mt-8 text-lg font-semibold text-foreground">Qualifying criteria</h2>
    <div class="mb-6 whitespace-pre-wrap leading-7 text-foreground">{{ task.criteria_text }}</div>
    {% endif %}

    <div id="mj-task-actions">
        {% if not my_assignment %}
        <button type="button" id="mj-claim" class="blocks-button blocks-button-primary w-full sm:w-auto" data-task-id="{{ task.id }}">Claim this task</button>
        {% elif my_assignment.status == "active" %}
        <p class="text-sm text-muted">Claimed. Submit before {{ my_assignment.deadline_at | date_in_tz(timezone=settings.timezone, format="%d %b %Y %H:%M") }}.</p>
        {% else %}
        <p class="text-sm text-muted">Your submission for this task is {{ my_assignment.status }}.</p>
        {% endif %}
        <p id="mj-task-msg" class="mt-3 text-sm text-muted" role="status" aria-live="polite"></p>
    </div>

    {% if my_assignment and my_assignment.status == "active" %}
    <h2 class="mb-4 mt-8 border-b border-divider pb-2 text-lg font-semibold text-foreground">Submit your work</h2>
    <script type="application/json" id="mj-form-schema">{{ form_schema | json_encode | replace(from="</script>", to="<\\/script>") | safe }}</script>
    <div id="mj-dynamic-fields" class="w-full max-w-2xl" data-assignment-id="{{ my_assignment.id }}"></div>
    <p id="mj-submit-msg" class="mt-3 text-sm text-muted" role="status" aria-live="polite"></p>
    {% endif %}
</main>
{% endblock %}

{% block scripts %}
<script src="/static/js/blocks-datetime.js"></script>
<script src="/plugins/micro-jobs/assets/js/micro-jobs-task-form.js"></script>
{% endblock %}