<%
const layout = '../admin/layout';
const body = `
<div class="space-y-6">
  <!-- Header with search and actions -->
  <div class="sm:flex sm:items-center sm:justify-between">
    <div>
      <h2 class="text-2xl font-bold text-gray-900 dark:text-white">مدیریت کاربران</h2>
      <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">مدیریت و نظارت بر کاربران سیستم</p>
    </div>
    <div class="mt-4 sm:mt-0">
      <button class="btn-primary">
        <i class="fas fa-user-plus ml-2"></i>
        افزودن کاربر جدید
      </button>
    </div>
  </div>

  <!-- Search and filters -->
  <div class="card">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">جستجو</label>
        <div class="relative">
          <input type="text" placeholder="نام، ایمیل یا شماره تماس..." class="input-field pr-10">
          <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
            <i class="fas fa-search text-gray-400"></i>
          </div>
        </div>
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">وضعیت</label>
        <select class="input-field">
          <option>همه کاربران</option>
          <option>فعال</option>
          <option>غیرفعال</option>
          <option>مسدود</option>
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">نوع اشتراک</label>
        <select class="input-field">
          <option>همه اشتراک‌ها</option>
          <option>رایگان</option>
          <option>ویژه</option>
          <option>پریمیوم</option>
        </select>
      </div>
    </div>
  </div>

  <!-- Users table -->
  <div class="card">
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
        <thead class="bg-gray-50 dark:bg-gray-800/50">
          <tr>
            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">کاربر</th>
            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">ایمیل</th>
            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">اشتراک</th>
            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">وضعیت</th>
            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">تاریخ عضویت</th>
            <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">عملیات</th>
          </tr>
        </thead>
        <tbody class="bg-white dark:bg-gray-900 divide-y divide-gray-200 dark:divide-gray-700">
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-200">
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="h-10 w-10 bg-primary-600 dark:bg-primary-500 rounded-full flex items-center justify-center">
                  <span class="text-white font-medium">ا</span>
                </div>
                <div class="mr-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-white">احمد محمدی</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">09123456789</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">ahmad@example.com</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200">
                <i class="fas fa-crown ml-1"></i>
                ویژه
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200">
                <i class="fas fa-check-circle ml-1"></i>
                فعال
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              ۱۴۰۳/۰۱/۱۵
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2 space-x-reverse">
              <button class="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300">
                <i class="fas fa-edit"></i>
              </button>
              <button class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">
                <i class="fas fa-trash"></i>
              </button>
              <button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300">
                <i class="fas fa-eye"></i>
              </button>
            </td>
          </tr>

          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors duration-200">
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center">
                <div class="h-10 w-10 bg-pink-600 dark:bg-pink-500 rounded-full flex items-center justify-center">
                  <span class="text-white font-medium">س</span>
                </div>
                <div class="mr-4">
                  <div class="text-sm font-medium text-gray-900 dark:text-white">سارا احمدی</div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">09987654321</div>
                </div>
              </div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="text-sm text-gray-900 dark:text-white">sara@example.com</div>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200">
                <i class="fas fa-user ml-1"></i>
                رایگان
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap">
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200">
                <i class="fas fa-check-circle ml-1"></i>
                فعال
              </span>
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">
              ۱۴۰۳/۰۲/۰۸
            </td>
            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium space-x-2 space-x-reverse">
              <button class="text-primary-600 dark:text-primary-400 hover:text-primary-900 dark:hover:text-primary-300">
                <i class="fas fa-edit"></i>
              </button>
              <button class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300">
                <i class="fas fa-trash"></i>
              </button>
              <button class="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300">
                <i class="fas fa-eye"></i>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <div class="bg-white dark:bg-gray-900 px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-gray-700 sm:px-6">
      <div class="flex-1 flex justify-between sm:hidden">
        <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
          قبلی
        </button>
        <button class="mr-3 relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700">
          بعدی
        </button>
      </div>
      <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
        <div>
          <p class="text-sm text-gray-700 dark:text-gray-300">
            نمایش <span class="font-medium">۱</span> تا <span class="font-medium">۱۰</span> از <span class="font-medium">۱۲۴۷</span> نتیجه
          </p>
        </div>
        <div>
          <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px space-x-reverse" aria-label="Pagination">
            <button class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
              <i class="fas fa-chevron-right h-5 w-5"></i>
            </button>
            <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              ۱
            </button>
            <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              ۲
            </button>
            <button class="relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700">
              ۳
            </button>
            <button class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700">
              <i class="fas fa-chevron-left h-5 w-5"></i>
            </button>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>
`;
%>

<%- include(layout, { body: body, title: title, currentPage: currentPage }) %>