{% 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">Popular</a>
          </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-widest uppercase leading-tight">Popular Blogs</h1>
    </div>
  </div>



  <div class="container mx-auto px-6 py-10">
<!-- Blogs Listing -->
{% if page_obj|length > 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 %}