{% extends "admin_base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/admin.css') }}">
<link rel="stylesheet" href="{{ static_url('/static/css/sidebar.css') }}">
<link rel="stylesheet" href="{{ static_url('/static/css/planning.css') }}">
{% endblock %}
{% block admin_content %}
<div class="admin-header planning-header">
    <h1>Ticket Planning</h1>
    <p class="planning-subtitle">Pick the open tickets to include, then generate a phased implementation document. Each selected ticket's full text is reproduced verbatim so the result can be handed straight to a coding agent.</p>
</div>

{% if not configured %}
<div class="empty-state">The issue tracker is not configured yet. Configure Gitea in Services first.</div>
{% elif tickets_error %}
<div class="empty-state">Could not load the open tickets from the tracker. Try again shortly.</div>
{% elif not tickets %}
<div class="empty-state">There are no open tickets to plan.</div>
{% else %}
<div class="planning-select" data-planning-select>
    <div class="planning-select-head">
        <label class="planning-select-all">
            <input type="checkbox" data-planning-select-all checked>
            <span>Select all</span>
        </label>
        <span class="planning-select-count" data-planning-count>{{ tickets|length }} of {{ tickets|length }} selected</span>
    </div>
    <ul class="planning-ticket-list">
        {% for ticket in tickets %}
        <li class="planning-ticket">
            <label>
                <input type="checkbox" data-planning-ticket value="{{ ticket.number }}" checked>
                <span class="planning-ticket-number">#{{ ticket.number }}</span>
                <span class="planning-ticket-title">{{ ticket.title }}</span>
                {% if ticket.labels %}
                <span class="planning-ticket-labels">
                    {% for label in ticket.labels %}<span class="planning-ticket-label">{{ label }}</span>{% endfor %}
                </span>
                {% endif %}
            </label>
        </li>
        {% endfor %}
    </ul>
    <div class="planning-select-foot">
        <button type="button" class="btn btn-primary" data-planning-generate data-action="/issues/planning">
            <span class="btn-spinner" aria-hidden="true"></span> Generate planning
        </button>
        <span class="planning-hint">A report covers only the tickets selected above.</span>
    </div>
</div>

<div class="planning-output">
    <div class="empty-state" data-planning-empty>
        No planning generated yet. Select tickets and click "Generate planning".
    </div>

    <div class="planning-status" data-planning-status hidden role="status" aria-live="polite">
        <span class="planning-spinner" aria-hidden="true"></span>
        <span class="planning-status-text">Generating the planning report...</span>
    </div>

    <div class="planning-result" data-planning-result hidden role="region" aria-label="Planning report">
        <div class="planning-actions">
            <a class="btn btn-secondary" data-planning-download href="#" download>Download markdown</a>
            <span class="planning-hint">Hover the report and use the Copy button to copy the markdown source.</span>
        </div>
        <dp-content class="planning-report" data-planning-report></dp-content>
    </div>
</div>
{% endif %}
{% endblock %}