<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %> | پنل مدیریت مایا اسلامی</title>
  <link href="/css/output.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-50 dark:bg-gray-900 min-h-screen">
  <div class="flex h-screen overflow-hidden">
    <!-- Sidebar -->
    <div class="hidden md:flex md:flex-shrink-0">
      <div class="flex flex-col w-64">
        <div class="flex flex-col flex-grow pt-5 pb-4 overflow-y-auto bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700">
          <div class="flex items-center flex-shrink-0 px-4">
            <div class="flex items-center">
              <div class="h-8 w-8 bg-primary-600 dark:bg-primary-500 rounded-lg flex items-center justify-center">
                <i class="fas fa-crown text-white text-sm"></i>
              </div>
              <h1 class="mr-3 text-lg font-bold text-gray-900 dark:text-white">پنل مدیریت</h1>
            </div>
          </div>

          <div class="mt-5 flex-grow flex flex-col">
            <nav class="flex-1 px-2 space-y-1">
              <a href="/admin/dashboard" class="admin-nav-link <%= currentPage === 'dashboard' ? 'active' : '' %>">
                <i class="fas fa-tachometer-alt"></i>
                <span>داشبورد</span>
              </a>

              <a href="/admin/users" class="admin-nav-link <%= currentPage === 'users' ? 'active' : '' %>">
                <i class="fas fa-users"></i>
                <span>کاربران</span>
              </a>

              <a href="/admin/content" class="admin-nav-link <%= currentPage === 'content' ? 'active' : '' %>">
                <i class="fas fa-newspaper"></i>
                <span>مقالات</span>
              </a>

              <a href="/admin/signals" class="admin-nav-link <%= currentPage === 'signals' ? 'active' : '' %>">
                <i class="fas fa-signal"></i>
                <span>سیگنال‌ها</span>
              </a>

              <a href="/admin/settings" class="admin-nav-link <%= currentPage === 'settings' ? 'active' : '' %>">
                <i class="fas fa-cog"></i>
                <span>تنظیمات</span>
              </a>
            </nav>
          </div>

          <div class="flex-shrink-0 flex border-t border-gray-200 dark:border-gray-700 p-4">
            <form action="/admin/logout" method="POST" class="w-full">
              <button type="submit" class="w-full flex items-center px-4 py-2 text-sm font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-md transition-all duration-200">
                <i class="fas fa-sign-out-alt ml-3"></i>
                خروج
              </button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- Main content -->
    <div class="flex flex-col w-0 flex-1 overflow-hidden">
      <!-- Top navigation -->
      <div class="relative z-10 flex-shrink-0 flex h-16 bg-white dark:bg-gray-800 shadow-sm dark:shadow-dark border-b border-gray-200 dark:border-gray-700">
        <button id="sidebar-toggle" class="px-4 border-l border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary-500 md:hidden">
          <i class="fas fa-bars h-6 w-6"></i>
        </button>

        <div class="flex-1 px-4 flex justify-between items-center">
          <div class="flex-1 flex">
            <h1 class="text-xl font-semibold text-gray-900 dark:text-white"><%= title %></h1>
          </div>

          <div class="mr-4 flex items-center md:mr-6">
            <!-- Theme toggle -->
            <button id="theme-toggle" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200">
              <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
              </svg>
              <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
              </svg>
            </button>

            <!-- User menu -->
            <div class="mr-3 relative">
              <div class="flex items-center">
                <div class="h-8 w-8 bg-primary-600 dark:bg-primary-500 rounded-full flex items-center justify-center">
                  <i class="fas fa-user text-white text-sm"></i>
                </div>
                <span class="mr-2 text-sm font-medium text-gray-700 dark:text-gray-300">مدیر</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Page content -->
      <main class="flex-1 relative overflow-y-auto focus:outline-none">
        <div class="py-6">
          <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
            <%- body %>
          </div>
        </div>
      </main>
    </div>
  </div>

  <!-- Mobile sidebar overlay -->
  <div id="sidebar-overlay" class="fixed inset-0 flex z-40 md:hidden hidden">
    <div class="fixed inset-0 bg-gray-600 bg-opacity-75"></div>
    <div class="relative flex-1 flex flex-col max-w-xs w-full bg-white dark:bg-gray-800">
      <div class="absolute top-0 left-0 -ml-12 pt-2">
        <button id="sidebar-close" class="mr-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white">
          <i class="fas fa-times h-6 w-6 text-white"></i>
        </button>
      </div>

      <div class="flex-1 h-0 pt-5 pb-4 overflow-y-auto">
        <div class="flex-shrink-0 flex items-center px-4">
          <div class="h-8 w-8 bg-primary-600 dark:bg-primary-500 rounded-lg flex items-center justify-center">
            <i class="fas fa-crown text-white text-sm"></i>
          </div>
          <h1 class="mr-3 text-lg font-bold text-gray-900 dark:text-white">پنل مدیریت</h1>
        </div>
        <nav class="mt-5 px-2 space-y-1">
          <a href="/admin/dashboard" class="admin-nav-link <%= currentPage === 'dashboard' ? 'active' : '' %>">
            <i class="fas fa-tachometer-alt"></i>
            <span>داشبورد</span>
          </a>
          <a href="/admin/users" class="admin-nav-link <%= currentPage === 'users' ? 'active' : '' %>">
            <i class="fas fa-users"></i>
            <span>کاربران</span>
          </a>
          <a href="/admin/content" class="admin-nav-link <%= currentPage === 'content' ? 'active' : '' %>">
            <i class="fas fa-newspaper"></i>
            <span>مقالات</span>
          </a>
          <a href="/admin/signals" class="admin-nav-link <%= currentPage === 'signals' ? 'active' : '' %>">
            <i class="fas fa-signal"></i>
            <span>سیگنال‌ها</span>
          </a>
          <a href="/admin/settings" class="admin-nav-link <%= currentPage === 'settings' ? 'active' : '' %>">
            <i class="fas fa-cog"></i>
            <span>تنظیمات</span>
          </a>
        </nav>
      </div>
    </div>
  </div>

  <script src="/js/theme.js"></script>
  <script src="/js/admin.js"></script>
</body>
</html>