{% 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">
            <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 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_display }}</span>
                        <span class="history-domain">{{ run.domain }}</span>
                        <span class="history-dir" title="{{ run.output_dir }}">{{ run.output_dir }}</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="report-grid">
                        {% for f in run.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="/reports/file/{{ run.id }}/{{ f.path }}" target="_blank" class="btn btn-sm btn-primary">Open</a>
                            </div>
                            <div x-show="showPreview" x-transition class="report-preview">
                                <iframe src="/reports/file/{{ run.id }}/{{ f.path }}" sandbox="allow-same-origin" loading="lazy"></iframe>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="history-no-files">Files no longer available on disk.</p>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </section>
        {% endif %}

        {% if report_files %}
        <section class="current-output-section">
            <h3>Current Output Directory</h3>
            <span class="reports-dir">{{ output_dir }}</span>
            <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>
        </section>
        {% elif not history %}
        <div class="empty-state-container">
            <p class="empty-state-text">No reports found.</p>
            <p class="empty-state-hint">Run some recipes from the <a href="/">Dashboard</a> to generate reports.</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}