{% extends "base.html" %}

{% block title %}Reports — Finite State Report Kit{% endblock %}

{% block content %}
<div class="reports-page">
    <div class="reports-header">
        <h2>Generated Reports</h2>
        <div class="reports-header-actions">
            <span class="reports-dir">{{ output_dir }}</span>
            <button class="btn btn-sm btn-default"
                    hx-get="/reports"
                    hx-target="#report-list"
                    hx-select="#report-list"
                    hx-swap="outerHTML">
                Refresh
            </button>
        </div>
    </div>

    <div id="report-list">
        {% if report_files %}
        <div class="report-grid">
            {% for f in report_files %}
            <div class="report-card" x-data="{ showPreview: false }">
                <div class="report-info" @click="showPreview = !showPreview">
                    <h3 class="report-name">{{ f.name }}</h3>
                    <div class="report-meta">
                        <span class="report-path">{{ f.path }}</span>
                        <span class="report-size">{{ f.size_kb }} KB</span>
                        <span class="report-age">{{ f.age }}</span>
                    </div>
                </div>
                <div class="report-actions">
                    <a href="/output/{{ f.path }}" target="_blank" class="btn btn-sm btn-primary">Open</a>
                </div>
                <div x-show="showPreview" x-transition class="report-preview">
                    <iframe src="/output/{{ f.path }}" sandbox="allow-same-origin" loading="lazy"></iframe>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state-container">
            <p class="empty-state-text">No HTML reports found.</p>
            <p class="empty-state-hint">Run some recipes from the <a href="/">Dashboard</a> to generate reports.</p>
        </div>
        {% endif %}
    </div>

    {% if history %}
    <section class="run-history">
        <h3>Run History</h3>
        <div class="history-list">
            {% for run in history %}
            <div class="history-item">
                <div class="history-meta">
                    <span class="history-id">{{ run.id }}</span>
                    <span class="history-time">{{ run.timestamp }}</span>
                    <span class="history-domain">{{ run.domain }}</span>
                </div>
                <div class="history-recipes">
                    {% for r in run.recipes %}
                    <span class="history-recipe-badge">{{ r }}</span>
                    {% endfor %}
                </div>
                {% if run.files %}
                <div class="history-files">
                    {% for f in run.files %}
                    <a href="/output/{{ f.path }}" class="history-file-link">{{ f.recipe }} ({{ f.format }})</a>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </section>
    {% endif %}
</div>
{% endblock %}