{% extends "base.html" %}

{% block head %}
<title>My Tasks — {{ 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">My Tasks</h1>

    {% if frozen_until %}
    <div class="my-4 rounded-xl border border-danger bg-danger/10 px-4 py-3 text-sm text-danger" role="alert">
        Cannot assign new tasks until {{ frozen_until | date_in_tz(timezone=settings.timezone, format="%d-%m-%Y %H:%M") }}.
    </div>
    {% endif %}

    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        <article class="rounded-2xl border border-divider bg-surface p-5 shadow-sm">
            <div class="text-sm font-medium text-muted">Wallet balance</div>
            <div class="my-2 text-2xl font-bold tracking-tight text-foreground">{{ currency_symbol }}{{ wallet_balance | default(value=0) | price }}</div>
        </article>
        <article class="rounded-2xl border border-divider bg-surface p-5 shadow-sm">
            <div class="text-sm font-medium text-muted">Earned from tasks</div>
            <div class="my-2 text-2xl font-bold tracking-tight text-foreground">{{ currency_symbol }}{{ earned_total | default(value=0) | price }}</div>
        </article>
        <article class="rounded-2xl border border-divider bg-surface p-5 shadow-sm">
            <div class="text-sm font-medium text-muted">Open tasks</div>
            <div class="my-2 text-2xl font-bold tracking-tight text-foreground">{{ open_count | default(value=0) }}</div>
            <a class="text-sm font-semibold text-brand underline-offset-4 hover:underline" href="/plugins/micro-jobs/inbox">Browse inbox</a>
        </article>
    </div>

    <h2 class="mb-3 mt-8 border-b border-divider pb-2 text-lg font-semibold text-foreground">Active assignments</h2>
    {% if active_assignments %}
    <ul class="grid list-none gap-3 p-0" id="mj-active-list">
        {% for a in active_assignments %}
        <li class="flex min-w-0 flex-col gap-3 rounded-xl border border-divider bg-surface p-4 sm:flex-row sm:items-center sm:justify-between">
            <a class="font-semibold text-brand underline-offset-4 hover:underline" href="/plugins/micro-jobs/task/{{ a.task_id }}">{{ a.subject }}</a>
            <span class="text-sm text-muted">{{ currency_symbol }}{{ a.payment_amount | default(value=0) | price }} · due {{ a.deadline_at | date_in_tz(timezone=settings.timezone, format="%d %b %Y %H:%M") }}</span>
            <span class="text-sm text-muted" role="status" aria-live="polite" data-mj-release-status="{{ a.id }}"></span>
            <button type="button" class="blocks-button blocks-button-secondary sm:self-start" data-mj-unassign="{{ a.id }}">Release</button>
        </li>
        {% endfor %}
    </ul>
    {% else %}
    <p class="text-sm text-muted">No active tasks. Claim one from the <a class="font-semibold text-brand underline" href="/plugins/micro-jobs/inbox">inbox</a>.</p>
    {% endif %}

    <h2 class="mb-2 mt-8 border-b border-divider pb-2 text-lg font-semibold text-foreground">Request a payout</h2>
    <p class="mb-4 max-w-3xl text-sm leading-6 text-muted">Minimum {{ currency_symbol }}{{ min_payout_amount | default(value=0) | price }}. Approved payouts are debited from your wallet and released through banking.</p>
    <form id="mj-payout-form" class="grid w-full max-w-lg gap-4" data-min="{{ min_payout_amount | default(value=0) }}">
        <div class="blocks-form-field"><label for="mj-payout-amount">Amount</label>
            <input id="mj-payout-amount" class="blocks-input" type="number" name="amount" min="0" step="0.01" required>
        </div>
        <div class="blocks-form-field"><label for="mj-payout-note">Note (optional)</label>
            <input id="mj-payout-note" class="blocks-input" type="text" name="note" maxlength="200">
        </div>
        <button type="submit" class="blocks-button blocks-button-primary w-full sm:w-auto">Request payout</button>
        <span id="mj-payout-msg" class="text-sm text-muted" role="status"></span>
    </form>

    <h2 class="mb-3 mt-8 border-b border-divider pb-2 text-lg font-semibold text-foreground">My payout requests</h2>
    {% if payout_requests %}
    <ul class="grid list-none gap-3 p-0">
        {% for p in payout_requests %}
        <li class="flex min-w-0 flex-col gap-2 rounded-xl border border-divider bg-surface p-4 sm:flex-row sm:items-center sm:justify-between">
            <span>{{ currency_symbol }}{{ p.amount_requested | price }}</span>
            <span class="text-sm text-muted">{{ p.status }} · {{ p.created_at | date_in_tz(timezone=settings.timezone, format="%d %b %Y") }}</span>
        </li>
        {% endfor %}
    </ul>
    {% else %}
    <p class="text-sm text-muted">No payout requests yet.</p>
    {% endif %}

    <h2 class="mb-3 mt-8 border-b border-divider pb-2 text-lg font-semibold text-foreground">Recent history</h2>
    {% if history %}
    <ul class="grid list-none gap-3 p-0">
        {% for h in history %}
        <li class="flex min-w-0 flex-col gap-2 rounded-xl border border-divider bg-surface p-4 sm:flex-row sm:items-center sm:justify-between">
            <span>{{ h.subject }}</span>
            <span class="text-sm text-muted">{{ h.status }}</span>
        </li>
        {% endfor %}
    </ul>
    {% else %}
    <p class="text-sm text-muted">Nothing completed yet.</p>
    {% endif %}
</main>
{% endblock %}

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