<%
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 flex space-x-3 space-x-reverse">
      <div class="text-sm text-gray-600 dark:text-gray-400 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-700 rounded-lg px-4 py-2">
        <i class="fas fa-telegram ml-2"></i>
        کارت‌ها در کانال تلگرام نمایش داده می‌شوند
      </div>
      <button id="add-card-btn" class="btn-primary">
        <i class="fas fa-plus ml-2"></i>
        افزودن کارت جدید
      </button>
    </div>
  </div>

  <!-- Channel Cards -->
  <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-cards-blank ml-2 text-primary-600 dark:text-primary-400"></i>
        کارت‌های کانال تلگرام
      </h3>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">مدیریت کارت‌های نمایشی که در کانال تلگرام نشان داده می‌شوند</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
      <!-- Card 1 - Educational -->
      <div class="border border-blue-200 dark:border-blue-700 rounded-lg p-4 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20">
        <div class="flex items-center justify-between mb-3">
          <div class="flex items-center">
            <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/50 text-blue-800 dark:text-blue-200">
              <i class="fas fa-graduation-cap ml-1"></i>
              آموزشی
            </span>
          </div>
          <div class="flex space-x-2 space-x-reverse">
            <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 p-2 rounded hover:bg-blue-50 dark:hover:bg-blue-900/30" title="ویرایش کارت">
              <i class="fas fa-edit"></i>
            </button>
            <button class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 p-2 rounded hover:bg-red-50 dark:hover:bg-red-900/30" title="حذف کارت">
              <i class="fas fa-trash"></i>
            </button>
          </div>
        </div>

        <div class="space-y-2">
          <h4 class="font-medium text-gray-900 dark:text-white">آموزش تحلیل تکنیکال</h4>
          <p class="text-sm text-gray-600 dark:text-gray-400">یادگیری اصول و مبانی تحلیل تکنیکال برای معاملات موفق در بازارهای مالی</p>
        </div>

        <div class="mt-4 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
          <span><i class="fas fa-eye ml-1"></i> ۱,۲۴۷ مشاهده</span>
          <span><i class="fas fa-clock ml-1"></i> ۲ ساعت پیش</span>
        </div>
      </div>

      <!-- Card 2 - News -->
      <div class="border border-green-200 dark:border-green-700 rounded-lg p-4 bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20">
        <div class="flex items-center justify-between mb-3">
          <div class="flex items-center">
            <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/50 text-green-800 dark:text-green-200">
              <i class="fas fa-newspaper ml-1"></i>
              اخبار
            </span>
          </div>
          <div class="flex space-x-2 space-x-reverse">
            <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 p-2 rounded hover:bg-blue-50 dark:hover:bg-blue-900/30" title="ویرایش کارت">
              <i class="fas fa-edit"></i>
            </button>
            <button class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 p-2 rounded hover:bg-red-50 dark:hover:bg-red-900/30" title="حذف کارت">
              <i class="fas fa-trash"></i>
            </button>
          </div>
        </div>

        <div class="space-y-2">
          <h4 class="font-medium text-gray-900 dark:text-white">تحلیل بازار هفتگی</h4>
          <p class="text-sm text-gray-600 dark:text-gray-400">بررسی روند کلی بازارهای مالی و پیش‌بینی حرکت قیمت‌ها در هفته آینده</p>
        </div>

        <div class="mt-4 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
          <span><i class="fas fa-eye ml-1"></i> ۸۹۲ مشاهده</span>
          <span><i class="fas fa-clock ml-1"></i> ۱ ساعت پیش</span>
        </div>
      </div>

      <!-- Card 3 - Announcement -->
      <div class="border border-purple-200 dark:border-purple-700 rounded-lg p-4 bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20">
        <div class="flex items-center justify-between mb-3">
          <div class="flex items-center">
            <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/50 text-purple-800 dark:text-purple-200">
              <i class="fas fa-bullhorn ml-1"></i>
              اطلاعیه
            </span>
          </div>
          <div class="flex space-x-2 space-x-reverse">
            <button class="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 p-2 rounded hover:bg-blue-50 dark:hover:bg-blue-900/30" title="ویرایش کارت">
              <i class="fas fa-edit"></i>
            </button>
            <button class="text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 p-2 rounded hover:bg-red-50 dark:hover:bg-red-900/30" title="حذف کارت">
              <i class="fas fa-trash"></i>
            </button>
          </div>
        </div>

        <div class="space-y-2">
          <h4 class="font-medium text-gray-900 dark:text-white">تخفیف ویژه اشتراک</h4>
          <p class="text-sm text-gray-600 dark:text-gray-400">فرصت محدود! ۲۰٪ تخفیف برای اشتراک سالانه تا پایان ماه جاری</p>
        </div>

        <div class="mt-4 flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
          <span><i class="fas fa-eye ml-1"></i> ۲,۱۵۳ مشاهده</span>
          <span><i class="fas fa-clock ml-1"></i> ۳ ساعت پیش</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Add Card Form (Hidden by default) -->
  <div id="add-card-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-card-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>
          <select class="input-field">
            <option value="educational">آموزشی</option>
            <option value="news">اخبار</option>
            <option value="announcement">اطلاعیه</option>
            <option value="analysis">تحلیل</option>
            <option value="promotion">تبلیغات</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 value="active">فعال</option>
            <option value="inactive">غیرفعال</option>
            <option value="scheduled">زمان‌بندی شده</option>
          </select>
        </div>
      </div>

      <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>
        <textarea rows="4" placeholder="توضیحات کارت را وارد کنید..." class="input-field"></textarea>
      </div>

      <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">لینک کانال تلگرام <span class="text-red-500">*</span></label>
          <input type="url" placeholder="https://t.me/..." required class="input-field" value="https://t.me/mayaeslami_signals">
        </div>
        <div>
          <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">تاریخ انتشار</label>
          <input type="datetime-local" class="input-field">
        </div>
      </div>

      <div class="flex justify-end space-x-3 space-x-reverse">
        <button type="button" class="btn-secondary">لغو</button>
        <button type="submit" class="btn-primary">ایجاد کارت</button>
      </div>
    </form>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const addCardBtn = document.getElementById('add-card-btn');
  const addCardForm = document.getElementById('add-card-form');
  const closeCardForm = document.getElementById('close-card-form');

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

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

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