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

{% if bundle_subscription %}
<div class="mt-10 md:mt-16">
  <h1 class="text-2xl md:text-3xl font-bold text-gray-800 dark:text-white">
    Bundle <span class="text-purple-600 dark:text-purple-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 bundle_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-purple-600 dark:text-purple-400 mb-3">
          {{ a.bundle_subscription_details.title }}
        </h2>
        
        <!-- Description -->
        <p class="text-sm text-gray-600 dark:text-gray-400">
          {{ a.bundle_subscription_details.description }}
        </p>
        
        <!-- Included Subjects -->
        <div class="mt-4 flex-grow">
          <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Included Subjects:</h3>
          <ul class="space-y-1">
            {% for subject in a.subjects.all %}
              <li class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-purple-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                </svg>
                {{ subject.name }}
              </li>
            {% endfor %}
          </ul>
        </div>

        <!-- 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_test' %}" 
             data-turbo-frame='main' 
             data-turbo-action="advance" 
             class="inline-flex items-center gap-2 bg-purple-600 hover:bg-purple-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 %}