<!doctype html>
<html lang="fa" dir="rtl" class="<%= '' %>">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="csrf-token" content="<%= csrfToken ?? '' %>">
  <meta name="realtime-token" content="<%= realtimeToken ?? '' %>">
  <meta name="vapid-public-key" content="<%= vapidPublicKey ?? '' %>">
  <title><%= title %> | <%= appName %></title>
  <link rel="stylesheet" href="/build/app.css">
  <script defer src="/build/app.js"></script>
  <script defer src="/build/alpine.min.js"></script>
</head>
<body x-data="themeController()">
<% if (user) { %>
  <div class="min-h-screen lg:grid lg:grid-cols-[17rem_1fr]">
    <aside class="desktop-sidebar sticky top-0 hidden h-screen border-l border-slate-200 bg-white p-4 lg:flex lg:flex-col dark:border-slate-800 dark:bg-slate-900">
      <a href="/" class="mb-5 flex items-center gap-3 rounded-2xl bg-brand-100/60 p-3 dark:bg-slate-800">
        <img src="/images/mandegar-logo.jpg" alt="نشان بازرگانی ماندگار" class="h-12 w-16 rounded-lg object-contain bg-white">
        <span class="text-sm font-black leading-6 text-brand-950 dark:text-brand-300">سامانه تحویل<br>بازرگانی ماندگار</span>
      </a>
      <nav class="space-y-1 overflow-y-auto" aria-label="ناوبری اصلی">
        <a class="nav-link <%= currentPath === '/' ? 'nav-link-active' : '' %>" href="/">⌂ داشبورد</a>
        <% if (permissions?.has('invoices.view_all')) { %><a class="nav-link <%= currentPath.startsWith('/invoices') ? 'nav-link-active' : '' %>" href="/invoices">▤ فاکتورها</a><% } %>
        <% if (permissions?.has('deliveries.warehouse_view')) { %><a class="nav-link <%= currentPath.startsWith('/warehouse') ? 'nav-link-active' : '' %>" href="/warehouse">▣ صف انبار</a><% } %>
        <% if (permissions?.has('imports.invoices')) { %><a class="nav-link <%= currentPath.startsWith('/imports') ? 'nav-link-active' : '' %>" href="/imports">⇧ ورود مالی</a><% } %>
        <% if (permissions?.has('discrepancies.resolve')) { %><a class="nav-link <%= currentPath.startsWith('/discrepancies') ? 'nav-link-active' : '' %>" href="/discrepancies">⚠ مغایرت‌ها</a><% } %>
        <% if (permissions?.has('products.manage')) { %><a class="nav-link <%= currentPath === '/products' ? 'nav-link-active' : '' %>" href="/products">◇ کالاها</a><% } %>
        <% if (permissions?.has('requesters.manage')) { %><a class="nav-link <%= currentPath === '/requesters' ? 'nav-link-active' : '' %>" href="/requesters">♙ درخواست‌کنندگان</a><% } %>
        <% if (permissions?.has('reports.view')) { %><a class="nav-link <%= currentPath.startsWith('/reports') ? 'nav-link-active' : '' %>" href="/reports">▥ گزارش‌ها</a><% } %>
        <% if (permissions?.has('users.manage')) { %><a class="nav-link <%= currentPath === '/users' ? 'nav-link-active' : '' %>" href="/users">♟ کاربران</a><% } %>
        <% if (permissions?.has('roles.manage')) { %><a class="nav-link <%= currentPath === '/roles' ? 'nav-link-active' : '' %>" href="/roles">⌘ نقش و مجوز</a><% } %>
        <% if (permissions?.has('audit.view_operational')) { %><a class="nav-link <%= currentPath === '/audit' ? 'nav-link-active' : '' %>" href="/audit">◴ ممیزی</a><% } %>
        <% if (permissions?.has('settings.manage')) { %><a class="nav-link <%= currentPath === '/settings' ? 'nav-link-active' : '' %>" href="/settings">⚙ تنظیمات</a><% } %>
      </nav>
      <div class="mt-auto border-t border-slate-200 pt-4 dark:border-slate-800">
        <div class="mb-3 px-2"><div class="font-bold"><%= user.name %></div><div class="text-xs text-slate-500"><%= user.roles.join('، ') %></div></div>
        <a class="nav-link" href="/profile">◉ پروفایل و امنیت</a>
      </div>
    </aside>
    <div class="min-w-0">
      <header class="sticky top-0 z-30 flex h-16 items-center justify-between border-b border-slate-200 bg-white/95 px-4 backdrop-blur md:px-7 dark:border-slate-800 dark:bg-slate-900/95">
        <div class="flex items-center gap-3"><img src="/images/mandegar-logo.jpg" alt="" class="h-9 w-12 rounded-md object-contain bg-white lg:hidden"><h1 class="text-lg font-black"><%= title %></h1></div>
        <div class="flex items-center gap-2">
          <span class="hidden text-xs text-emerald-700 data-[realtime=disconnected]:text-amber-700 sm:inline" aria-live="polite">● ارتباط بلادرنگ</span>
          <button type="button" class="btn-secondary px-3" @click="toggle()" :aria-label="dark ? 'فعال‌کردن حالت روشن' : 'فعال‌کردن حالت تیره'"><span x-text="dark ? '☀' : '◐'">◐</span></button>
          <a href="/notifications" class="btn-secondary px-3" aria-label="اعلان‌ها">🔔</a>
          <form method="post" action="/logout"><input type="hidden" name="_csrf" value="<%= csrfToken %>"><button class="btn-secondary" type="submit">خروج</button></form>
        </div>
      </header>
      <main class="mx-auto max-w-[1700px] p-4 md:p-7">
<% } else { %>
  <main class="min-h-screen">
<% } %>

