{% extends 'base.html' %}
{% load custom_filters %}


{% block content %}
<div class="container mx-auto px-4 py-8 max-w-6xl">
    <!-- Back Button -->
    <a href="{% url 'mimansha_main:explore_by_issue' %}" class="inline-flex items-center text-red-900 hover:text-red-700 mb-6 transition-colors duration-200 font-medium">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
        </svg>
        Back to All Issues
    </a>

    <!-- Issue Header -->
    <div class="bg-white rounded-xl shadow-md overflow-hidden mb-10 border-2 border-black">
        <div class="md:flex">
            <!-- Cover Image -->
            <div class="md:w-1/3 border-r-2 border-black">
                {% if issue.cover_image %}
                <img class="h-full w-full object-cover" src="{{ issue.cover_image.url }}" alt="{{ issue.name }} cover">
                {% else %}
                <div class="h-full w-full bg-gray-100 flex items-center justify-center">
                    <span class="text-gray-500 font-serif italic">No Cover Image</span>
                </div>
                {% endif %}
            </div>
            
            <!-- Issue Details -->
            <div class="p-8 md:w-2/3">
                <div class="uppercase tracking-wide text-3xl text-red-900 font-bold mb-2">
                   # {{ issue.issue_number }}
                </div>
                <h1 class="block mt-1 text-3xl leading-tight font-serif font-bold text-gray-900">{{ issue.name }}</h1>
                {% if issue.publication_date %}
                <div class="mt-3 flex items-center text-gray-600">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" 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>
                    Published {{ issue.publication_date|date:"F Y" }}
                </div>
                {% endif %}
                {% if issue.description %}
                <div class="mt-4 text-justify text-gray-700 prose max-w-none font-serif">
                    {{ issue.description|safe }}
                </div>
                {% endif %}
                
                <div class="mt-6 flex items-center">
                    <span class="bg-red-50 text-red-900 text-sm font-medium px-4 py-1.5 rounded-full border border-red-200">
                        {{ issue.issue_items.count }} Article{{ issue.issue_items.count|pluralize }}
                    </span>
                    {% if featured_blogs %}
                    <span class="ml-3 bg-amber-50 text-amber-900 text-sm font-medium px-4 py-1.5 rounded-full border border-amber-200">
                        {{ featured_blogs|length }} Featured
                    </span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Featured Articles Section -->
    {% if featured_blogs %}
    <div class="mb-12">
        <h2 class="text-2xl font-serif font-bold text-gray-900 mb-6 pb-2 border-b-2 border-red-900">Featured Articles</h2>
        
        <div class="bg-[#fff7ee] border-2 border-black p-6 shadow-lg">
            <div class="card-content flex flex-col space-y-4">
                {% for blog in featured_blogs %}
                <div class="article bg-[#fff7ee] p-4">
                    <div class="article-header pb-3 pt-2">
                        <div class="article-meta text-sm sm:text-base flex items-center space-x-3 text-gray-600 flex-wrap">
                            {% if blog.category %}
                            <a href="{% url 'mimansha_main:category_blogs' category_slug=blog.category.title|slugify %}" class="article-category text-red-900 font-bold uppercase hover:underline decoration-2 underline-offset-4">
                                {{ blog.category.title }}
                            </a>
                            {% endif %}
                            {% if blog.topic %}
                            <span class="text-gray-300">|</span>
                            <a href="{% url 'mimansha_main:topic_detail' slug=blog.topic.title|slugify %}" class="article-type text-gray-700 font-medium uppercase hover:underline decoration-1 underline-offset-4">
                                {{ blog.topic.title }}
                            </a>
                            {% endif %}
                            {% if blog.published_time %}
                            <span class="text-gray-300">|</span>
                            <span class="text-gray-500">{{ blog.published_time|date:"l, M d, Y" }}</span>
                            {% endif %}
                        </div>
                    </div>
                    
                    <a href="{% url 'mimansha_main:blog_detail' blog_id=blog.id slug=blog.slug %}" class="block">
                        <h2 class="article-title text-xl sm:text-2xl font-serif font-bold text-gray-900 leading-tight mb-3 hover:underline decoration-red-900 decoration-2 underline-offset-4">
                            {{ blog.title }}
                        </h2>
                        {% if blog.content %}
                        <p class="article-summary text-gray-700 font-serif text-base leading-relaxed mb-4">
                            {{ blog.content|striptags|truncatechars:110|safe }}
                        </p>
                        {% endif %}
                    </a>
                    
                    <div class="article-author">
                        <span class="text-sm text-gray-500">
                            By 
                            {% if blog.author %}
                            <a href="#" class="text-red-900 font-medium hover:underline underline-offset-2">
                                {{ blog.author.name }}
                            </a>
                            {% elif blog.authors.all %}
                            {% for author in blog.authors.all %}
                            <a href="#" class="text-red-900 font-medium hover:underline underline-offset-2">
                                {{ author.name }}{% if not forloop.last %}, {% endif %}
                            </a>
                            {% endfor %}
                            {% endif %}
                        </span>
                    </div>
                </div>
                
                {% if not forloop.last %}
                <hr class="divider border-gray-300 my-1">
                {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Regular Articles Section -->
    {% if regular_blogs %}
    <div class="mb-12">
        <!-- Articles -->
        {% with articles=regular_blogs|filter_by_category:"Articles" %}
        {% if articles %}
        <h2 class="text-2xl font-serif font-bold text-gray-900 mb-6 pb-2 border-b-2 border-red-900">Articles</h2>
        <div class="bg-[#fff7ee] border-2 border-black p-6 shadow-lg">
            <div class="card-content flex flex-col space-y-4">
                {% for blog in articles %}
                    {% include "cards/issue_blog_card.html" %}
                {% if not forloop.last %}
                <hr class="divider border-gray-300 my-1">
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}
        {% endwith %}
    
        <!-- Opinions -->
        {% with opinions=regular_blogs|filter_by_category:"Opinions" %}
        {% if opinions %}
        <h2 class="text-2xl font-serif font-bold text-gray-900 mt-12 mb-6 pb-2 border-b-2 border-red-900">Opinions</h2>
        <div class="bg-[#fff7ee] border-2 border-black p-6 shadow-lg">
            <div class="card-content flex flex-col space-y-4">
                {% for blog in opinions %}
                    {% include "cards/issue_blog_card.html" %}
                {% if not forloop.last %}
                <hr class="divider border-gray-300 my-1">
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}
        {% endwith %}
    
        <!-- Case Briefs -->
        {% with case_briefs=regular_blogs|filter_by_category:"Case Briefs" %}
        {% if case_briefs %}
        <h2 class="text-2xl font-serif font-bold text-gray-900 mt-12 mb-6 pb-2 border-b-2 border-red-900">Case Briefs</h2>
        <div class="bg-[#fff7ee] border-2 border-black p-6 shadow-lg">
            <div class="card-content flex flex-col space-y-4">
                {% for blog in case_briefs %}
                    {% include "cards/issue_blog_card.html" %}
                {% if not forloop.last %}
                <hr class="divider border-gray-300 my-1">
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}
        {% endwith %}
    
        <!-- Know The Law -->
        {% with know_the_law=regular_blogs|filter_by_category:"Know The Law" %}
        {% if know_the_law %}
        <h2 class="text-2xl font-serif font-bold text-gray-900 mt-12 mb-6 pb-2 border-b-2 border-red-900">Know The Law</h2>
        <div class="bg-[#fff7ee] border-2 border-black p-6 shadow-lg">
            <div class="card-content flex flex-col space-y-4">
                {% for blog in know_the_law %}
                    {% include "cards/issue_blog_card.html" %}
                {% if not forloop.last %}
                <hr class="divider border-gray-300 my-1">
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}
        {% endwith %}
    
        <!-- Book Reviews -->
        {% with book_reviews=regular_blogs|filter_by_category:"Book Reviews" %}
        {% if book_reviews %}
        <h2 class="text-2xl font-serif font-bold text-gray-900 mt-12 mb-6 pb-2 border-b-2 border-red-900">Book Reviews</h2>
        <div class="bg-[#fff7ee] border-2 border-black p-6 shadow-lg">
            <div class="card-content flex flex-col space-y-4">
                {% for blog in book_reviews %}
                    {% include "cards/issue_blog_card.html" %}
                {% if not forloop.last %}
                <hr class="divider border-gray-300 my-1">
                {% endif %}
                {% endfor %}
            </div>
        </div>
        {% endif %}
        {% endwith %}
    </div>
    {% endif %}
    

    {% if not featured_blogs and not regular_blogs %}
    <div class="bg-white rounded-lg border-2 border-black p-8 text-center shadow-md">
        <p class="text-gray-500 font-serif text-lg">No articles found in this issue.</p>
    </div>
    {% endif %}

    <!-- Related Issues Section -->
    {% if related_issues %}
    <div>
        <h2 class="text-2xl font-serif font-bold text-gray-900 mb-6 pb-2 border-b-2 border-red-900">Other Issues</h2>
        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            {% for related_issue in related_issues %}
            <a href="{% url 'mimansha_main:explore_issue_detail' issue_id=related_issue.id slug=related_issue.slug %}" class="group">
                <div class="bg-white rounded-lg border-2 border-black overflow-hidden hover:shadow-lg transition-shadow duration-300">
                    {% if related_issue.cover_image %}
                    <img class="w-full h-40 object-cover" src="{{ related_issue.cover_image.url }}" alt="{{ related_issue.name }}">
                    {% else %}
                    <div class="w-full h-40 bg-gray-100 flex items-center justify-center">
                        <span class="text-gray-500 font-serif italic">No Cover</span>
                    </div>
                    {% endif %}
                    <div class="p-4">
                        <h3 class="font-serif font-medium text-gray-800 group-hover:text-red-900 transition-colors duration-200">{{ related_issue.name }}</h3>
                        <p class="text-xs text-gray-500 mt-1">{{ related_issue.issue_number }}</p>
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}