<!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);">
                {{ get_media_type_icon(file['annotations']['file/base']['record']['media_type']) | safe }}
            </div>
            <div style="flex-grow: 1;">
                <h1 data-tooltip="{{ file['annotations']['file/base']['record']['name'] | e }}" data-tooltip-placement="top">{{ file['annotations']['file/base']['record']['name'] | e }}</h1>
                <p class="subtitle" data-tooltip="{{ local_filesystem_info['full_path'] | e }}" data-tooltip-placement="top">{{ local_filesystem_info['full_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>

        {% include '_file_view_body.html' %}

        <footer>
            Report generated by Dorsal v{{ dorsal_version }} on {{ generation_date }}
        </footer>
    </div>
    <div id="toast"></div>
    <script>
        {% include '_default_scripts.js' %}
    </script>
</body>
</html>