{% extends 'base.html' %}

{% block title %}Select Payment Plan{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto px-4 py-10">
  
  <!-- Heading -->
  <div class="text-center mb-10">
    <h2 class="text-3xl font-bold text-accent mb-2">Choose Your Subscription Plan</h2>
    <p class="text-gray-500">Flexible data bundles tailored to your needs</p>
  </div>

  <!-- Plans -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
    {% for package in packages %}
    <div class="bg-white rounded-2xl p-6 shadow hover:shadow-lg transition-all duration-300 border border-gray-100">
      <div class="flex items-center gap-2 mb-3">
        <i data-lucide="wifi" class="text-accent w-5 h-5"></i>
        <h3 class="text-lg font-semibold text-gray-800">{{ package.name }}</h3>
      </div>

      <p class="text-gray-500 text-sm mb-2 flex items-center gap-2">
        <i data-lucide="database" class="w-4 h-4 text-orange-400"></i>
        {{ package.data_amount }} for {{ package.duration_days }} days
      </p>

      <p class="text-green-600 font-bold text-xl mb-4 flex items-center gap-2">
        <i data-lucide="credit-card" class="w-5 h-5"></i>
        KSh {{ package.price }}
      </p>

      <a href="{% url 'checkout' package.id %}" class="block w-full text-center bg-accent text-white font-medium py-2 rounded-xl hover:bg-accent/90 transition">
        <i data-lucide="shopping-cart" class="inline w-4 h-4 mr-1"></i> Subscribe
      </a>
    </div>
    {% endfor %}
  </div>

</div>

<script>lucide.createIcons();</script>
{% endblock %}