{% extends "base.html" %}
{% block content %}
    <section class="grid-2">
        <article class="panel">
            <h2>Current Job</h2>
            {% if current_job %}
                <p><strong>{{ current_job.name }}</strong></p>
                <p class="muted">{{ current_job.description }}</p>
                <p class="muted">Pay: ${{ current_job.base_pay }} • Cooldown: {{ format_duration(current_job.cooldown_seconds) }}</p>
                {% if current_user.job_seconds_left %}
                    <p class="muted">Work ready in {{ format_duration(current_user.job_seconds_left) }}</p>
                {% endif %}
                <form method="post">
                    <input type="hidden" name="action" value="work">
                    <button type="submit" class="primary">Work Now</button>
                </form>
            {% else %}
                <p class="muted">No active job yet. Join one below for steady income.</p>
            {% endif %}
        </article>
        <article class="panel">
            <h2>Why Jobs Matter</h2>
            <p class="muted">Jobs are the low-risk side of the economy. Crimes are spikier, mugging is predatory, and the bank keeps the loop honest.</p>
        </article>
    </section>

    <section class="cards">
        {% for job in jobs %}
            <article class="card">
                <h3>{{ job.name }}</h3>
                <p class="muted">{{ job.description }}</p>
                <p class="muted mini">Requires level {{ job.required_level }} • Pays ${{ job.base_pay }} per shift</p>
                <form method="post" class="inline-form">
                    <input type="hidden" name="action" value="join">
                    <input type="hidden" name="job_id" value="{{ job.id }}">
                    <button type="submit" class="subtle">Join {{ job.name }}</button>
                </form>
            </article>
        {% endfor %}
    </section>

    <section class="panel">
        <h2>Recent Shifts</h2>
        {% if job_logs %}
            <ul class="log-list">
                {% for log in job_logs %}
                    <li>
                        <strong>{{ log.job_name }}</strong>
                        <p class="muted mini">${{ log.payout }} • {{ log.xp_reward }} xp • {{ format_ts(log.created_at) }}</p>
                    </li>
                {% endfor %}
            </ul>
        {% else %}
            <p class="muted">No shift history yet.</p>
        {% endif %}
    </section>
{% endblock %}