{% extends "base.html" %}

{% block body_class %}bg-neutral-50 text-neutral-900{% endblock %}

{% block content %}
<div x-data="{ sidebarOpen: $persist(true) }" class="min-h-screen flex flex-col">
    {% include "components/topbar.html" %}

    <div class="flex flex-1">
        {% include "components/sidebar.html" %}

        <main :class="sidebarOpen ? 'ml-60' : 'ml-16'" class="flex-1 px-6 py-4 transition-all">
            {% block main %}{% endblock %}
        </main>
    </div>
</div>

<div id="small-screen-gate"
     class="hidden fixed inset-0 bg-neutral-900/95 text-white items-center justify-center z-[100] text-center px-6">
    <p class="text-lg">Fonrey 当前仅支持桌面端（≥1280px），请在电脑上访问</p>
</div>
<script>
    (function () {
        var gate = document.getElementById('small-screen-gate');
        function check() {
            if (window.innerWidth < 1280) {
                gate.classList.remove('hidden');
                gate.classList.add('flex');
            } else {
                gate.classList.add('hidden');
                gate.classList.remove('flex');
            }
        }
        window.addEventListener('resize', check);
        check();
    })();
</script>
{% endblock %}