{% extends "blog_base.html" %}

{% load static %}

{% block content %}
<title>{{ author.name }}'s 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="{% url 'mimansha_main:authors' %}" class="text-gray-600 hover:text-[#8B1D1D] transition-all duration-200">Authors</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">{{ author.name }}</span>
          </li>
        </ol>
      </nav>
    </div>
  </div>
  
  {% include "cards/authorcard.html" %}


  <div class="container mx-auto px-6 py-10">
    <!-- Content Filter Options -->
    <div class="flex flex-wrap justify-between items-center mb-8 pb-4 border-b border-[#E5E0DB]">
      <h2 class="text-2xl font-serif font-bold text-gray-800"> Articles from {{ author.name }}</h2>
     
    </div>

    <!-- Blogs Listing -->
    {% if latest_blogs %}
      <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
        {% for blog in latest_blogs %}
    {% include "cards/blogcard_two.html" %}
        
        {% endfor %}
      </div>
      
      <!-- Pagination (updated to match requested style) -->
    {% if latest_blogs.has_other_pages %}
    <div class="mt-12 flex justify-center">
      <nav class="inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
        {% if latest_blogs.has_previous %}
          <a href="?page={{ latest_blogs.previous_page_number }}" class="inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
            <span class="sr-only">Previous</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
        {% endif %}
        
        {% for num in latest_blogs.paginator.page_range %}
          {% if latest_blogs.number == num %}
            <a href="?page={{ num }}" class="z-10 bg-[#8B1D1D] border-[#8B1D1D] text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              {{ num }}
            </a>
          {% elif num > latest_blogs.number|add:'-3' and num < latest_blogs.number|add:'3' %}
            <a href="?page={{ num }}" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
              {{ num }}
            </a>
          {% endif %}
        {% endfor %}
        
        {% if latest_blogs.has_next %}
          <a href="?page={{ latest_blogs.next_page_number }}" class="inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
            <span class="sr-only">Next</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
        {% 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 by {{ author.name }}.</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 %}