<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ experiment_name }}</title>
    <link rel="stylesheet" href="./experiment.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <div class="header-content">
            <div class="title">
                Experiment: {{ experiment_name }}
                <div style="font-size: 14px; color: grey;">
                    Version: {{ version }}
                </div>
            </div>
            <div class="navigation">
                <div class="nav-group">
                    <a href="{{ navigation.prev }}.html" class="nav-button {% if not navigation.prev %}disabled{% endif %}">← Previous</a>
                    <a href="index.html" class="nav-button">Index</a>
                    <a href="{{ navigation.next }}.html" class="nav-button {% if not navigation.next %}disabled{% endif %}">Next →</a>
                </div>
                <div class="breadcrumb-container">
                    <div class="breadcrumb">
                        {{ navigation.group }} / {{ navigation.dataset }}
                    </div>
                </div>
            </div>
        </div>
    </header>

    <div>
        {{ content | safe }}  <!-- Render the full content as HTML -->
    </div>
    
</body>
</html>
