<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Dewy Oracle{% endblock %}</title>
    <link rel="stylesheet" href="/static/css/style.css">
    {% block extra_head %}{% endblock %}
</head>
<body>
    {% if user %}
    <div class="app-container">
        <!-- Sidebar Navigation -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <a href="/" class="sidebar-logo">
                    <img src="/static/img/logo.svg" alt="Dewy Oracle Logo">
                    <span>Dewy Oracle</span>
                </a>
            </div>

            <nav class="sidebar-nav">
                <ul>
                    <li>
                        <a href="/" class="{% if request.path == '/' %}active{% endif %}">
                            <span>📚</span>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    <li>
                        <a href="/reading-log" class="{% if request.path == '/reading-log' %}active{% endif %}">
                            <span>📊</span>
                            <span>Reading Log</span>
                        </a>
                    </li>
                    {% if user.is_admin %}
                    <li>
                        <a href="/admin" class="{% if request.path == '/admin' %}active{% endif %}">
                            <span>⚙️</span>
                            <span>Admin</span>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>

            <div class="sidebar-user">
                <div class="sidebar-user-info">
                    <div class="user-avatar">{{ user.display_name[0]|upper if user.display_name else user.username[0]|upper }}</div>
                    <div class="user-name">{{ user.display_name or user.username }}</div>
                </div>
                <button onclick="logout()" class="btn btn-secondary btn-full btn-small">Logout</button>
            </div>
        </aside>

        <!-- Main Content -->
        <main class="main-content">
            <div class="content-header">
                {% block header %}{% endblock %}
            </div>
            {% block content %}{% endblock %}
        </main>
    </div>
    {% endif %}

    <script src="/static/js/app.js"></script>
    {% block extra_scripts %}{% endblock %}
</body>
</html>
