{%- macro render_annotation_fields(data, parent_key='') -%}
{%- for key, value in data.items() -%}
{%- set current_key = parent_key ~ key if parent_key else key -%}
{%- if value is mapping -%}
<div class="annotation-group">
    <h3 class="sub-header">{{ current_key }}</h3>
    <div class="nested-item">
        {{ render_annotation_fields(value, parent_key=current_key ~ ' -> ') }}
    </div>
</div>
{%- elif value is iterable and value is not string -%}
<div class="annotation-group">
    <h3 class="sub-header">{{ current_key }}</h3>
    <div class="nested-item">
        {%- for item in value -%}
        {# Fix: Check if item is mapping before recursing #}
        {%- if item is mapping -%}
            {{ render_annotation_fields(item, parent_key=current_key ~ ' (' ~ loop.index ~ ') -> ') }}
        {%- else -%}
            <div class="grid-item">
                <span class="value">{{ item }}</span>
            </div>
        {%- endif -%}
        {% if not loop.last %}
        <hr style="border-color: var(--border-color); margin: 0.5rem 0;">{% endif %}
        {%- endfor -%}
    </div>
</div>
{%- else -%}
<div class="grid-item">
    <span class="label">{{ current_key }}</span>
    <span class="value">{{ value }}</span>
</div>
{%- endif -%}
{%- endfor -%}
{%- endmacro -%}

<!-- dorsal/templates/collection/default.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ report_title }}</title>
    <style>
        {% include '_default_styles.css' %}
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div style="flex-shrink: 0; width: 3rem; height: 3rem; color: var(--accent-color);">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 3.75 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H16.5A2.25 2.25 0 0 1 18.75 6v3.776" />
                </svg>
            </div>
            <div style="flex-grow: 1;">
                <h1 data-tooltip="{{ collection_source_path | e }}" data-tooltip-placement="top">{{ report_title }}</h1>
                <p class="subtitle" data-tooltip="{{ collection_source_path | e }}" data-tooltip-placement="top">{{ collection_source_path | e }}</p>
            </div>
            <div id="theme-toggle" class="theme-switch" title="Toggle light/dark mode">
                <svg id="light-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" /></svg>
                <svg id="dark-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" /></svg>
            </div>
        </header>

        <main>
            {% for panel in panels %}
                {% include ['panels/_', panel.id, '.html'] | join %}
            {% endfor %}
        </main>

        <footer>
            Report generated by Dorsal v{{ dorsal_version }} on {{ generation_date }}
        </footer>
    </div>
    <div id="toast"></div>
    <script type="application/json" id="full-collection-data">
        {{ full_collection_data_json | safe }}
    </script>
    <script>{% include 'libs/chart.min.js' %}</script>
    <script>{% include 'libs/chartjs-adapter-date-fns.bundle.min.js' %}</script>
    <script>{% include '_default_scripts.js' %}</script>
    <div id="file-modal-overlay" class="modal-overlay">
    <div id="file-modal-content" class="modal-content">
        <div class="modal-header">
            <h2 id="file-modal-title" class="modal-title">File Details</h2>
            <button id="file-modal-close" class="modal-close-btn">&times;</button>
        </div>
        <div id="file-modal-body" class="modal-body">
            </div>
    </div>
</div>
</body>
</html>