{% extends 'base.html' %}

{% block content %}
<div class="container mx-auto px-4 py-12">
    <div class="max-w-5xl mx-auto">
        <h1 class="text-4xl md:text-5xl font-bold text-center mb-12 text-red-900 relative">
            <span class="relative inline-block after:content-[''] after:absolute after:w-32 after:h-1 after:bg-red-900 after:bottom-0 after:left-1/2 after:transform after:-translate-x-1/2 after:rounded-full pb-4">Explore Our Issues</span>
        </h1>
        
        {% if issues %}
        <!-- Issue List -->
        <div class="space-y-10">
            {% for issue in issues %}
            <a href="{% url 'mimansha_main:explore_issue_detail' issue.id issue.slug %}" class="group block">
                <div class="bg-white rounded-2xl shadow-lg overflow-hidden transition-all duration-300 group-hover:shadow-2xl transform group-hover:-translate-y-1 group-hover:ring-2 group-hover:ring-red-900/30">
                    <div class="md:flex items-stretch">
                        <!-- Cover Image - Maintaining landscape orientation -->
                        <div class="md:w-2/5 h-56 md:h-auto relative overflow-hidden">
                            {% if issue.cover_image %}
                            <div class="absolute inset-0 bg-gradient-to-tr from-red-900/20 to-transparent z-10"></div>
                            <img src="{{ issue.cover_image.url }}" alt="{{ issue.issue_name }} Cover" 
                                 class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
                            {% else %}
                            <div class="w-full h-full bg-gradient-to-br from-red-50 to-purple-100 flex items-center justify-center">
                                <span class="text-red-900/50 text-xl font-light italic">Coming Soon</span>
                            </div>
                            {% endif %}
                            <!-- Issue number badge positioned on the image -->
                            <div class="absolute top-4 left-4 bg-white/90 backdrop-blur-sm text-red-900 text-2xl font-bold px-4 py-1 rounded-full shadow-md z-20 transform group-hover:scale-110 transition-transform duration-300">
                                #{{ issue.issue_number }}
                            </div>
                        </div>
                        
                        <!-- Issue Details -->
                        <div class="p-6 md:p-8 md:w-3/5 flex flex-col justify-between">
                            <div>
                                <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-3 group-hover:text-red-900 transition-colors duration-300">
                                    {{ issue.name }}
                                </h2>
                                
                                <div class="flex items-center text-gray-700 mb-4">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-red-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                    <span class="font-medium">{{ issue.publication_date|date:"l, F j, Y" }}</span>
                                </div>
                                
                                <p class="text-gray-600 mb-6 text-justify text-lg leading-relaxed">
                                    {{ issue.description }}
                                </p>
                            </div>
                            
                            <div class="flex items-center justify-between pt-4 border-t border-gray-100">
                                <span class="inline-flex items-center px-4 py-2 rounded-full text-sm font-medium bg-red-50 text-red-900 shadow-sm">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
                                    </svg>
                                    {{ issue.blogs.count }} Articles
                                </span>
                                <span class="text-red-900 font-semibold flex items-center group-hover:font-bold transition-all duration-300 group-hover:translate-x-1">
                                    Explore Issue
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1 transform transition-transform duration-300 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <div class="mt-10 text-center p-12 bg-white border border-gray-200 rounded-lg shadow">
            <h3 class="text-xl font-medium text-gray-700">No blogs available</h3>
            <p class="mt-2 text-gray-600">There are currently issues published. Please visit Later.</p>
            <a href="/" class="mt-4 inline-block px-4 py-2 bg-[#8B1D1D] text-white font-medium rounded hover:bg-[#6B1515] transition-colors">
              Return to Home
            </a>
          </div>
        {% endif %}
        
        <!-- Enhanced Pagination Controls -->
        <div class="mt-16 flex flex-col sm:flex-row items-center justify-between gap-4">
            <div class="text-sm text-gray-500 font-medium">
                Showing page {{ issues.number }} of {{ issues.paginator.num_pages }}
            </div>
            
            <nav class="inline-flex rounded-lg shadow-md overflow-hidden" aria-label="Pagination">
                {% if issues.has_previous %}
                    <a href="?page=1" class="px-3 py-2 border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-red-50 hover:text-red-900 transition-colors flex items-center">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
                        </svg>
                        First
                    </a>
                    <a href="?page={{ issues.previous_page_number }}" class="px-3 py-2 border-t border-b border-r border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-red-50 hover:text-red-900 transition-colors">
                        Previous
                    </a>
                {% endif %}
                
                {% for num in issues.paginator.page_range %}
                    {% if issues.number == num %}
                        <span class="px-4 py-2 border-t border-b border-r border-red-200 bg-red-50 text-sm font-medium text-red-900">
                            {{ num }}
                        </span>
                    {% elif num > issues.number|add:'-3' and num < issues.number|add:'3' %}
                        <a href="?page={{ num }}" class="px-4 py-2 border-t border-b border-r border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-red-50 hover:text-red-900 transition-colors">
                            {{ num }}
                        </a>
                    {% endif %}
                {% endfor %}
                
                {% if issues.has_next %}
                    <a href="?page={{ issues.next_page_number }}" class="px-3 py-2 border-t border-b border-r border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-red-50 hover:text-red-900 transition-colors">
                        Next
                    </a>
                    <a href="?page={{ issues.paginator.num_pages }}" class="px-3 py-2 border border-gray-200 bg-white text-sm font-medium text-gray-500 hover:bg-red-50 hover:text-red-900 transition-colors flex items-center">
                        Last
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7" />
                        </svg>
                    </a>
                {% endif %}
            </nav>
        </div>
    </div>
</div>

<script>
// Enhanced smooth scroll to top when paginating
document.addEventListener('DOMContentLoaded', function() {
    const paginationLinks = document.querySelectorAll('nav a[href*="page"]');
    
    paginationLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const url = this.getAttribute('href');
            
            // Smooth scroll to top with easing
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
            
            // Small delay to allow scroll to complete before page change
            setTimeout(() => {
                window.location.href = url;
            }, 600);
        });
    });
});
</script>
{% endblock %}