<%
const layout = '../admin/layout';
const body = `
<div class="space-y-6">
  <!-- Header -->
  <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 id="add-article-btn" class="btn-primary">
        <i class="fas fa-plus ml-2"></i>
        افزودن مقاله جدید
      </button>
    </div>
  </div>

  <!-- Articles Table -->
  <div class="card">
    <div class="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4">
      <h3 class="text-lg font-medium text-gray-900 dark:text-white flex items-center">
        <i class="fas fa-list ml-2 text-primary-600 dark:text-primary-400"></i>
        لیست مقالات
      </h3>
    </div>

    <!-- Search and filters -->
    <div class="mb-4 flex items-center justify-between">
      <div class="flex space-x-3 space-x-reverse">
        <div class="relative">
          <input type="text" placeholder="جستجو در مقالات..." class="input-field pr-10 w-64">
          <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
            <i class="fas fa-search text-gray-400"></i>
          </div>
        </div>
        <select class="input-field w-40">
          <option>همه دسته‌ها</option>
          <option>آموزش تحلیل</option>
          <option>استراتژی</option>
          <option>اخبار بازار</option>
          <option>مدیریت ریسک</option>
        </select>
      </div>
      <div class="text-sm text-gray-500 dark:text-gray-400">
        ۵ مقاله
      </div>
    </div>

    <!-- Articles Table -->
    <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">
              <div class="text-sm font-medium text-gray-900 dark:text-white">آموزش تحلیل تکنیکال</div>
              <div class="text-sm text-gray-500 dark:text-gray-400">راهنمای کامل تحلیل تکنیکال برای مبتدیان</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-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200">
                آموزش تحلیل
              </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 text-gray-900 dark:text-white">
              ۱,۲۴۷
            </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 p-1 rounded" title="ویرایش">
                <i class="fas fa-edit"></i>
              </button>
              <button class="text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300 p-1 rounded" title="مشاهده">
                <i class="fas fa-eye"></i>
              </button>
              <button class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 p-1 rounded" title="حذف">
                <i class="fas fa-trash"></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">
              <div class="text-sm font-medium text-gray-900 dark:text-white">مدیریت ریسک در معاملات</div>
              <div class="text-sm text-gray-500 dark:text-gray-400">نحوه مدیریت ریسک و حفظ سرمایه</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-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-200">
                مدیریت ریسک
              </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-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-200">
                <i class="fas fa-edit 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 text-gray-900 dark:text-white">
              -
            </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 p-1 rounded" title="ویرایش">
                <i class="fas fa-edit"></i>
              </button>
              <button class="text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300 p-1 rounded" title="انتشار">
                <i class="fas fa-upload"></i>
              </button>
              <button class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 p-1 rounded" title="حذف">
                <i class="fas fa-trash"></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">
              <div class="text-sm font-medium text-gray-900 dark:text-white">روانشناسی معاملات</div>
              <div class="text-sm text-gray-500 dark:text-gray-400">کنترل احساسات در بازارهای مالی</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-pink-100 dark:bg-pink-900/30 text-pink-800 dark:text-pink-200">
                استراتژی
              </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 text-gray-900 dark:text-white">
              ۸۹۲
            </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 p-1 rounded" title="ویرایش">
                <i class="fas fa-edit"></i>
              </button>
              <button class="text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300 p-1 rounded" title="مشاهده">
                <i class="fas fa-eye"></i>
              </button>
              <button class="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 p-1 rounded" title="حذف">
                <i class="fas fa-trash"></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 mt-4">
      <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">
            <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-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>

  <!-- Add Article Form (Hidden by default) -->
  <div id="add-article-form" class="card hidden">
    <div class="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 flex items-center justify-between">
      <h3 class="text-lg font-medium text-gray-900 dark:text-white flex items-center">
        <i class="fas fa-plus ml-2 text-primary-600 dark:text-primary-400"></i>
        افزودن مقاله جدید
      </h3>
      <button id="close-article-form" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">
        <i class="fas fa-times"></i>
      </button>
    </div>

    <form class="space-y-6">
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">عنوان</label>
          <input type="text" placeholder="عنوان مقاله یا صفحه" class="input-field">
        </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>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">خلاصه</label>
        <textarea rows="3" placeholder="خلاصه‌ای از محتوا..." class="input-field"></textarea>
      </div>

      <div>
        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">محتوا</label>
        <div class="border border-gray-300 dark:border-gray-600 rounded-lg">
          <!-- Toolbar -->
          <div class="flex items-center justify-between p-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
            <div class="flex space-x-2 space-x-reverse">
              <button type="button" class="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded">
                <i class="fas fa-bold"></i>
              </button>
              <button type="button" class="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded">
                <i class="fas fa-italic"></i>
              </button>
              <button type="button" class="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded">
                <i class="fas fa-underline"></i>
              </button>
              <div class="border-l border-gray-300 dark:border-gray-600 mx-2"></div>
              <button type="button" class="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded">
                <i class="fas fa-list-ul"></i>
              </button>
              <button type="button" class="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded">
                <i class="fas fa-list-ol"></i>
              </button>
              <button type="button" class="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded">
                <i class="fas fa-link"></i>
              </button>
              <button type="button" class="p-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded">
                <i class="fas fa-image"></i>
              </button>
            </div>
            <div class="flex space-x-2 space-x-reverse">
              <button type="button" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200">پیش‌نمایش</button>
            </div>
          </div>
          <!-- Editor -->
          <textarea rows="12" placeholder="محتوای مقاله را اینجا بنویسید..." class="w-full px-4 py-3 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:outline-none resize-none"></textarea>
        </div>
      </div>

      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4 space-x-reverse">
          <label class="flex items-center">
            <input type="checkbox" class="rounded border-gray-300 dark:border-gray-600 text-primary-600 focus:ring-primary-500">
            <span class="mr-2 text-sm text-gray-700 dark:text-gray-300">انتشار فوری</span>
          </label>
          <label class="flex items-center">
            <input type="checkbox" class="rounded border-gray-300 dark:border-gray-600 text-primary-600 focus:ring-primary-500">
            <span class="mr-2 text-sm text-gray-700 dark:text-gray-300">ارسال اعلان</span>
          </label>
        </div>
        <div class="flex space-x-3 space-x-reverse">
          <button type="button" class="btn-secondary">ذخیره پیش‌نویس</button>
          <button type="submit" class="btn-primary">انتشار</button>
        </div>
      </div>
    </form>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const addArticleBtn = document.getElementById('add-article-btn');
  const addArticleForm = document.getElementById('add-article-form');
  const closeArticleForm = document.getElementById('close-article-form');

  if (addArticleBtn && addArticleForm) {
    addArticleBtn.addEventListener('click', function() {
      addArticleForm.classList.remove('hidden');
      addArticleForm.scrollIntoView({ behavior: 'smooth' });
    });
  }

  if (closeArticleForm && addArticleForm) {
    closeArticleForm.addEventListener('click', function() {
      addArticleForm.classList.add('hidden');
    });
  }
});
</script>
`;
%>

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