{% extends "base.html" %}

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

{% block content %}
<div x-data="{ sidebarOpen: $persist(true).as('fonrey.sidebar.open') }" class="min-h-screen">
  <header class="sticky top-0 z-20 h-14 bg-primary-800 text-white flex items-center px-4 gap-4">
    <div class="w-[150px] font-semibold">Fonrey</div>
    <nav class="flex-1 flex items-center gap-2 overflow-x-auto">
      <a href="#" class="px-3 py-2 rounded bg-primary-700">主页</a>
      <a href="#" class="px-3 py-2 rounded hover:bg-primary-700">房源</a>
      <a href="#" class="px-3 py-2 rounded hover:bg-primary-700">客源</a>
      <a href="#" class="px-3 py-2 rounded hover:bg-primary-700">营销</a>
      <a href="#" class="px-3 py-2 rounded hover:bg-primary-700">交易</a>
      <a href="#" class="px-3 py-2 rounded hover:bg-primary-700">数据</a>
      <a href="#" class="px-3 py-2 rounded hover:bg-primary-700">人事</a>
      <a href="#" class="px-3 py-2 rounded hover:bg-primary-700">系统</a>
      <input class="ml-2 h-9 rounded px-3 text-neutral-900 w-64" placeholder="全局搜索">
    </nav>
    <div class="flex items-center gap-3">
      <button type="button" class="p-2 rounded hover:bg-primary-700">🔔</button>
      <button type="button" class="p-2 rounded hover:bg-primary-700">⚙️</button>
      <button type="button" class="h-8 w-8 rounded-full bg-primary-600">U</button>
    </div>
  </header>

  <aside :class="sidebarOpen ? 'w-60' : 'w-16'" class="fixed top-14 left-0 bottom-0 z-20 bg-white border-r border-neutral-200 transition-all">
    <div class="p-3">
      <button type="button" class="text-sm text-primary-600" @click="sidebarOpen = !sidebarOpen">切换侧栏</button>
    </div>
    {% include "components/sidebar.html" %}
  </aside>

  <main :class="sidebarOpen ? 'ml-60' : 'ml-16'" class="px-6 py-4 transition-all">
    {% include "components/topbar.html" %}
    <section hx-get="/property/" hx-trigger="load" hx-target="#page-async" hx-swap="innerHTML">
      <div id="page-async">
        {% block app_content %}{% endblock %}
      </div>
    </section>
  </main>

  <div id="toast-container" class="fixed bottom-4 right-4 z-70 space-y-2"></div>
</div>

<div id="desktop-only-gate" class="hidden fixed inset-0 z-70 bg-neutral-900/80 text-white items-center justify-center p-6">
  <div class="max-w-lg text-center text-lg font-medium">Fonrey 当前仅支持桌面端（≥1280px），请在电脑上访问</div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  (function () {
    function toggleGate() {
      var gate = document.getElementById('desktop-only-gate');
      if (!gate) return;
      if (window.innerWidth < 1280) {
        gate.classList.remove('hidden');
        gate.classList.add('flex');
      } else {
        gate.classList.add('hidden');
        gate.classList.remove('flex');
      }
    }
    toggleGate();
    window.addEventListener('resize', toggleGate);
  })();
</script>
{% endblock %}