{% extends "base.html" %}

{% block title %}Quests — Mission Control{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1 class="mc-title">Token Quests</h1>
            <p class="mc-subtitle">Complete quests to earn bonus tokens</p>
        </div>
    </div>

    <div class="row mt-4">
        <div class="col-md-8">
            <div id="quests-panel" hx-get="/quests/panel/{{ agent_id }}" hx-trigger="load, every 30s">
                <div class="mc-loading">Loading quests...</div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card mc-panel">
                <div class="card-header">
                    <h5 class="mb-0">Leaderboard</h5>
                </div>
                <div class="card-body">
                    <div id="leaderboard" hx-get="/quests/api/leaderboard" hx-trigger="load, every 60s">
                        <div class="mc-loading">Loading leaderboard...</div>
                    </div>
                </div>
            </div>

            <div class="card mc-panel mt-4">
                <div class="card-header">
                    <h5 class="mb-0">About Quests</h5>
                </div>
                <div class="card-body">
                    <p class="mb-2">Quests are special objectives that reward tokens upon completion.</p>
                    <ul class="mc-list mb-0">
                        <li>Complete Daily Run sessions</li>
                        <li>Close flaky-test issues</li>
                        <li>Reduce P1 issue backlog</li>
                        <li>Improve documentation</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}