<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Admin - {{ 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_url('skrift/css/skrift.css') }}">
    <link rel="stylesheet" href="{{ static_url('skrift/css/admin.css') }}">
    {% block head %}{% endblock %}
</head>
<body>
<div class="sk-admin">
    <aside class="sk-sidebar">
        <div class="sk-sidebar-brand">
            <h1><a href="/admin">{{ site_name() }}</a></h1>
            <div class="sk-sidebar-sub">Content Management</div>
        </div>
        <nav class="sk-sidebar-nav">
            {% for item in admin_nav %}
            <a href="{{ item.path }}" class="sk-sidebar-link{% if current_path.startswith(item.path) %} active{% endif %}">
                {{ item.label }}
            </a>
            {% endfor %}
        </nav>
        <div class="sk-sidebar-footer">
            {% if user %}
            <div class="sk-sidebar-avatar">
                {% if user.picture_url %}
                <img src="{{ user.picture_url }}" alt="{{ user.name }}" referrerpolicy="no-referrer">
                {% else %}
                {{ (user.name or user.email)[:2] | upper }}
                {% endif %}
            </div>
            <div class="sk-sidebar-user">
                <div class="sk-sidebar-name">{{ user.name or user.email }}</div>
                <div class="sk-sidebar-role"><a href="/auth/logout">Logout</a></div>
            </div>
            {% endif %}
        </div>
    </aside>
    <div class="sk-admin-content">
        {# Flash messages #}
        {% if flash_messages %}
        <div class="sk-flash-messages" role="status" aria-live="polite">
            {% for msg in flash_messages %}
            <article role="alert" class="sk-flash sk-flash-{{ msg.type.value }}" {% if msg.dismissible %}data-dismissible{% endif %}>
                <span class="sk-flash-message">{{ msg.message }}</span>
                {% if msg.dismissible %}
                <button type="button" class="sk-flash-dismiss" aria-label="Dismiss">&times;</button>
                {% endif %}
            </article>
            {% endfor %}
        </div>
        {% elif flash %}
        <div class="sk-flash-messages" role="status" aria-live="polite">
            <article role="alert" class="sk-flash sk-flash-info" data-dismissible>
                <span class="sk-flash-message">{{ flash }}</span>
                <button type="button" class="sk-flash-dismiss" aria-label="Dismiss">&times;</button>
            </article>
        </div>
        {% endif %}

        {% block admin_content %}{% endblock %}
    </div>
</div>

<script src="{{ static_url('skrift/js/notifications.js') }}"></script>
<script nonce="{{ csp_nonce() }}">
document.querySelectorAll('.sk-flash-dismiss').forEach(btn => {
    btn.addEventListener('click', () => {
        btn.closest('.sk-flash').remove();
    });
});
document.querySelectorAll('.sk-flash-success[data-dismissible]').forEach(flash => {
    setTimeout(() => {
        flash.style.opacity = '0';
        setTimeout(() => flash.remove(), 300);
    }, 5000);
});
</script>
{% block scripts %}{% endblock %}
</body>
</html>
