{% extends "base.html" %}

{% load static %}

{% block content %}
<title>{{ topic.title }} Blogs</title>

<div class="bg-[#f4f2ef] min-h-screen">
  
  <!-- Premium Breadcrumb Navigation -->
  <div class="bg-white shadow-md border-b border-gray-200">
    <div class="container mx-auto px-6">
      <nav class="py-4" aria-label="Breadcrumb">
        <ol class="flex items-center text-sm font-medium">
          <li class="flex items-center">
            <a href="/" class="group flex items-center text-gray-600 hover:text-[#8B1D1D] transition-all duration-200">
              <svg class="w-4 h-4 mr-2 text-gray-400 group-hover:text-[#8B1D1D]" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
              </svg>
              Home
            </a>
          </li>
          <li class="flex items-center">
            <svg class="w-5 h-5 mx-2 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
            <a href="/exploretopics" class="text-gray-600 hover:text-[#8B1D1D] transition-all duration-200">Topics</a>
          </li>
          <li class="flex items-center">
            <svg class="w-5 h-5 mx-2 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
            </svg>
            <span class="text-[#8B1D1D] font-semibold">{{ topic.title }}</span>
          </li>
        </ol>
      </nav>
    </div>
  </div>

  <!-- Premium Hero Header with Topic Title -->
  <div class="relative bg-zinc-600 text-white py-14">
    <div class="absolute inset-0 opacity-40 bg-cover bg-center" style="background-image: url('{% static 'images/category-bg.jpg' %}')"></div>
    <div class="container mx-auto px-6 relative z-10">
      <h1 class="text-4xl md:text-5xl font-serif font-bold tracking-wider uppercase leading-tight">{{ topic.title|upper }}</h1>
    </div>
  </div>

  <!-- Stats Banner -->
  <div class="bg-[#f4f2ef] border-b border-[#E5E0DB]">
    <div class="container mx-auto px-6 py-4">
      <div class="flex flex-wrap justify-between items-center text-sm">
        <div class="flex items-center space-x-2 text-gray-600">
          <svg class="w-5 h-5 text-[#8B1D1D]" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z" clip-rule="evenodd"></path>
            <path d="M15 7h1a2 2 0 012 2v5.5a1.5 1.5 0 01-3 0V7z"></path>
          </svg>
          <span>{{ blogs.count }} Article{{ blogs.count|pluralize }}</span>
        </div>
        <div class="flex items-center space-x-6">
       
          <a href="#" class="flex items-center space-x-1 text-gray-600 hover:text-[#8B1D1D] transition-all duration-200">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"></path>
            </svg>
            <span>Share</span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <div class="container mx-auto px-6 py-10">

    <!-- Blogs Listing -->
    {% if blogs.count > 0 %}
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        {% for blog in page_obj %}
    {% include "cards/blogcard_one.html" %}
       
        {% endfor %}
      </div>
      
      <!-- Enhanced Pagination -->
      {% if page_obj.has_other_pages %}
        <div class="mt-12 flex justify-center">
          <nav class="inline-flex shadow-sm rounded-md" aria-label="Pagination">
            {% if page_obj.has_previous %}
              <a href="?page={{ page_obj.previous_page_number }}" class="px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-[#f4f2ef] rounded-l-md">
                Previous
              </a>
            {% else %}
              <span class="px-4 py-2 border border-gray-300 bg-[#f4f2ef] text-sm font-medium text-gray-400 cursor-not-allowed rounded-l-md">
                Previous
              </span>
            {% endif %}
            
            {% for num in page_obj.paginator.page_range %}
              {% if page_obj.number == num %}
                <span class="px-4 py-2 border border-gray-300 bg-[#8B1D1D] text-sm font-medium text-white">
                  {{ num }}
                </span>
              {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                <a href="?page={{ num }}" class="px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-[#f4f2ef]">
                  {{ num }}
                </a>
              {% endif %}
            {% endfor %}
            
            {% if page_obj.has_next %}
              <a href="?page={{ page_obj.next_page_number }}" class="px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-[#f4f2ef] rounded-r-md">
                Next
              </a>
            {% else %}
              <span class="px-4 py-2 border border-gray-300 bg-[#f4f2ef] text-sm font-medium text-gray-400 cursor-not-allowed rounded-r-md">
                Next
              </span>
            {% endif %}
          </nav>
        </div>
      {% endif %}
    {% 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 articles found</h3>
        <p class="mt-2 text-gray-600">There are currently no blogs published in the {{ topic.title }} topic.</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 %}
  </div>
</div>
{% endblock %}