{% extends "dashboard/base.html" %}

{% block title %}My Subscriptions - PassMCQ{% endblock title %}

{% block content %}
<div class="min-h-screen pb-20 md:pb-5">
  <div class="max-w-6xl mx-auto p-4 md:p-6">
    <!-- Header -->
    <h2 class="text-2xl md:text-3xl xl:text-4xl font-bold text-center mt-5 mb-8 text-gray-800 dark:text-white">
      My Subscriptions
    </h2>

    {% if empty_subscription %}
      <!-- Empty State -->
      <div class="flex flex-col gap-6 w-full justify-center items-center py-16 bg-white dark:bg-slate-800 rounded-2xl shadow-lg">
        <div class="text-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20 mx-auto mb-4 text-gray-300 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" />
          </svg>
          <h1 class="text-xl sm:text-2xl md:text-3xl font-bold text-gray-400 dark:text-gray-500 mb-4">
            No Active Subscriptions
          </h1>
          <p class="text-gray-500 dark:text-gray-400 mb-6">
            Subscribe to unlock unlimited access to practice questions
          </p>
          <a href="{% url 'subscription' %}" 
             data-turbo='false' 
             class="inline-flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-8 py-4 rounded-xl font-semibold text-lg transition-colors shadow-lg hover:shadow-xl">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Browse Plans
          </a>
        </div>
      </div>
    {% else %}
      {% include 'dashboard/subscription/annual_subscription.html' %}
      {% include 'dashboard/subscription/subject_subscription.html' %}
      {% include 'dashboard/subscription/bundle_subsctiption.html' %}
    {% endif %}
  </div>
</div>
{% endblock content %}