<!DOCTYPE html>
<html lang="{{ lang }}" data-theme="{{ user.theme or 'auto' }}">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Crumbforest{% endblock %}</title>

    <!-- Load CSS based on group config -->
    {% if group_config and group_config.css_files %}
    {% for css_file in group_config.css_files %}
    <link rel="stylesheet" href="/static/css/{{ css_file }}">
    {% endfor %}
    {% else %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
    {% endif %}

    {% if user and user.accessibility %}
    <style>
        :root {
                {
                % if user.accessibility.font_size=='large' %
            }

            font-size: 120%;

                {
                % endif %
            }

                {
                % if user.accessibility.high_contrast %
            }

            --primary: #ffff00;
            --background-color: #000000;
            --color: #ffffff;

                {
                % endif %
            }
        }

            {
            % if user.accessibility.animation_reduced %
        }

        * {
            animation: none !important;
            transition: none !important;
        }

            {
            % endif %
        }
    </style>
    {% endif %}
</head>

<body>
    <nav class="container-fluid">
        <ul>
            <li><strong>🌲 Crumbforest</strong></li>
        </ul>
        <ul>
            {% if group_config and group_config.navbar %}
            {% for nav_item in group_config.navbar %}
            {% if nav_item == 'home' %}
            <li><a href="/">Home</a></li>
            {% elif nav_item == 'about' %}
            <li><a href="/about">About</a></li>
            {% elif nav_item == 'contact' %}
            <li><a href="/contact">Contact</a></li>
            {% elif nav_item == 'dashboard' %}
            <li><a href="/dashboard">Dashboard</a></li>
            {% elif nav_item == 'roles' %}
            <li><a href="/crumbforest/roles">Characters</a></li>
            {% elif nav_item == 'search' %}
            <li><a href="/search">Search</a></li>
            {% elif nav_item == 'rag' %}
            <li><a href="/rag">RAG</a></li>
            {% elif nav_item == 'users' %}
            <li><a href="/users">Users</a></li>
            {% elif nav_item == 'settings' %}
            <li><a href="/settings">Settings</a></li>
            {% endif %}
            {% endfor %}
            {% endif %}

            {% if user %}
            <li>
                <details class="dropdown">
                    <summary>{{ user.email }}</summary>
                    <ul dir="rtl">
                        <li><a href="/settings">Settings</a></li>
                        <li>
                            <form action="/logout" method="post" style="margin:0;">
                                <button type="submit" class="contrast">Logout</button>
                            </form>
                        </li>
                    </ul>
                </details>
            </li>
            {% else %}
            <li><a href="/login" role="button">Login</a></li>
            {% endif %}
        </ul>
    </nav>

    {% block content %}{% endblock %}

    <footer class="container">
        <small>
            Group: {{ group_config.name if group_config else 'Public' }} |
            Theme: {{ user.theme if user else 'Default' }} |
            Made with 💚 in the Crumbforest
        </small>
    </footer>
</body>

</html>