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

{% if annual_subscription %}
<div class="mt-6">
  <h1 class="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
    Annual <span class="text-amber-600 dark:text-amber-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 annual_subscription %}
      <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-amber-600 dark:text-amber-400 mb-3">
          {{ a.annual_subscription_details.title }}
        </h2>
        
        <!-- Description -->
        <p class="text-sm text-gray-600 dark:text-gray-400 flex-grow">
          {{ a.annual_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.annual_subscription_details.subject.id %}"
             data-turbo-frame='main' 
             target="_top"
             class="inline-flex items-center gap-2 bg-amber-600 hover:bg-amber-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>
    {% endfor %}
  </div>
</div>
{% endif %}