<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{{ site_name() }}{% endblock %}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=Lora:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/style.css">
    {% block head %}{% endblock %}
</head>
<body>
    <header class="container">
        <nav>
            <ul>
                <li><a href="/" class="site-name">{{ site_name() }}</a></li>
            </ul>
            <ul>
                {% if user %}
                    <li class="user-info">
                        {% if user.picture_url %}
                            <img src="{{ user.picture_url }}" alt="{{ user.name }}" referrerpolicy="no-referrer">
                        {% endif %}
                        <span>{{ user.name or user.email }}</span>
                    </li>
                    <li><a href="/auth/logout" role="button" class="outline">Logout</a></li>
                {% else %}
                    <li><a href="/auth/login" role="button">Login</a></li>
                {% endif %}
            </ul>
        </nav>
    </header>

    <main class="container{% block main_class %}{% endblock %}">
        {% if flash %}
            <div class="flash-messages">
                <article role="alert">{{ flash }}</article>
            </div>
        {% endif %}

        {% block content %}{% endblock %}
    </main>

    <footer class="container">
        <hr>
        <p><small>&copy; {% if site_copyright_start_year() and site_copyright_start_year() != now().year %}{{ site_copyright_start_year() }}-{% endif %}{{ now().year }} {{ site_copyright_holder() or site_name() }}. All rights reserved.</small></p>
    </footer>

    {% block scripts %}{% endblock %}
</body>
</html>
