{% load static %}
{% load bangla_numbers %} 

{% if subject_subscription %}
<div class="mt-10 md:mt-16">
  <h1 class="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
    Subject <span class="text-emerald-600 dark:text-emerald-400">Subscriptions</span>
  </h1>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 mt-6">
    {% for a in subject_subscription %}
      {% if a.subject_based_subscription_details.subject %}
        <div class="flex flex-col h-full bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-600 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-shadow">
          <!-- Title -->
          <h2 class="text-xl font-bold text-emerald-600 dark:text-emerald-400 mb-3">
            {{ a.subject_based_subscription_details.title }}
          </h2>
          
          <!-- Description -->
          <p class="text-sm text-gray-600 dark:text-gray-400 flex-grow">
            {{ a.subject_based_subscription_details.description }}
          </p>

          <!-- Action -->
          <div class="flex flex-row justify-between items-center mt-6 pt-4 border-t border-gray-100 dark:border-slate-700">
            <span class="text-gray-700 dark:text-gray-300 text-sm font-medium">Ready to practice?</span>
            <a href="{% url 'app:mcq_chapter_page' a.subject_based_subscription_details.subject.id %}"
               data-turbo-frame='main' 
               data-turbo-action="advance"
               class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg font-medium transition-colors">
              Start Test
              <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
              </svg>
            </a>
          </div>
        </div>
      {% endif %}
    {% endfor %}
  </div>
</div>
{% endif %}