<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}Report{% endblock %} - chronobox</title>
    <style>
    {{ css }}
    </style>
    {% block head_extra %}{% endblock %}
</head>
<body>
    <div class="report-container">
        <nav class="report-sidebar">
            <h3>{% block sidebar_title %}Navigation{% endblock %}</h3>
            <ul>
                {% block sidebar_nav %}
                {% for section in sections %}
                <li><a href="#section-{{ loop.index0 }}">{{ section.title }}</a></li>
                {% endfor %}
                {% endblock %}
            </ul>
        </nav>

        <main class="report-main">
            <header class="report-header">
                <h1>{% block header_title %}{{ title }}{% endblock %}</h1>
                {% block header_subtitle %}{% endblock %}
            </header>

            {% block model_info %}
            {% if model_info is defined and model_info %}
            <div class="cb-metrics">
                {% for key, value in model_info.items() %}
                <div class="cb-metric">
                    <div class="cb-metric-value">{{ value }}</div>
                    <div class="cb-metric-label">{{ key | replace('_', ' ') | title }}</div>
                </div>
                {% endfor %}
            </div>
            {% endif %}
            {% endblock %}

            {% block content %}
            {% for section in sections %}
            <section id="section-{{ loop.index0 }}" class="cb-section">
                {% if section.collapsible %}
                <div class="cb-collapsible">
                    <div class="cb-collapsible-toggle">{{ section.title }}</div>
                    <div class="cb-collapsible-content">
                        {% if section.content %}{{ section.content }}{% endif %}
                        {% if section.table %}
                        {% include 'includes/table.html' ignore missing %}
                        {% endif %}
                    </div>
                </div>
                {% else %}
                <h2>{{ section.title }}</h2>
                {% if section.content %}{{ section.content }}{% endif %}
                {% if section.table %}
                <table class="cb-table">
                    <thead>
                        <tr>
                            {% for key in section.table[0].keys() %}
                            <th>{{ key | replace('_', ' ') | title }}</th>
                            {% endfor %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in section.table %}
                        <tr>
                            {% for key, val in row.items() %}
                            {% if val is number %}
                            <td class="num">{{ val | format_number(4) }}</td>
                            {% elif key == 'significance' %}
                            <td class="sig">{{ val }}</td>
                            {% else %}
                            <td>{{ val }}</td>
                            {% endif %}
                            {% endfor %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% endif %}
                {% if section.plot %}
                <div class="cb-plot">
                    <img src="data:image/png;base64,{{ section.plot }}" alt="{{ section.title }}" />
                </div>
                {% endif %}
                {% endif %}
            </section>
            {% endfor %}
            {% endblock %}

            <footer class="report-footer">
                {% block footer %}
                <p>Generated by <strong>chronobox</strong></p>
                {% endblock %}
            </footer>
        </main>
    </div>

    <script>
    {% block scripts %}
    // Smooth scrolling
    document.querySelectorAll('.report-sidebar a').forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            var target = document.querySelector(this.getAttribute('href'));
            if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
        });
    });
    // Collapsible
    document.querySelectorAll('.cb-collapsible-toggle').forEach(function(toggle) {
        toggle.addEventListener('click', function() {
            this.parentElement.classList.toggle('open');
        });
    });
    {% endblock %}
    </script>
</body>
</html>
