{% extends "base.html" %}

{% load static %}

{% block content %}
<title>{{ category.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="#" class="text-gray-600 hover:text-[#8B1D1D] transition-all duration-200">Categories</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">{{ category.title }}</span>
          </li>
        </ol>
      </nav>
    </div>
  </div>

  <!-- Premium Hero Header with Category 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">{{ category.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 }} Articles</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="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z"></path>
            </svg>
            <span>Save Category</span>
          </a>
          <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 %}
  <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
    {% 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 blogs available</h3>
    <p class="mt-2 text-gray-600">There are currently no blogs published in the {{ category.title }} category.</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 %}