{% extends "base.html" %}
{% load static %}

{% block content %}
<div class="container mx-auto">
  <!-- Page Heading -->
  <div class="text-center mb-10 pt-6">
    <h1 class="text-3xl font-bold text-black">Our Featured Authors</h1>
    <div class="w-24 h-1 bg-[#fff7ee] mx-auto mt-2 rounded-full opacity-70"></div>
  </div>
  
  <!-- Search Bar -->
  <div class="flex justify-center mt-8 mb-12">
    <form id="searchForm" method="get" action="{% url 'mimansha_main:authors' %}" class="w-full md:w-2/3 lg:w-1/2 relative">
      <input 
        type="text" 
        id="searchInput" 
        name="search"
        placeholder="Search authors by name or affiliation..." 
        class="w-full p-4 pl-12 border border-gray-200 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-[#fff7ee] text-gray-700 bg-white transition-all duration-300"
        value="{{ search_query }}"
      >
      <svg class="w-6 h-6 text-black absolute left-4 top-4 opacity-70" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
      </svg>
      <button type="submit" class="absolute right-4 top-3 bg-[#fff7ee] text-black px-4 py-2 rounded-lg hover:bg-[#f0e8df] transition-colors duration-300">
        Search
      </button>
    </form>
  </div>

  <!-- Cards Container - 2 columns -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
    {% if authors_json %}
      {% for profile in page_obj %}
        <a href="/authors/author-{{ profile.id }}/blogs/" class="block h-full author-card opacity-0" style="--animation-order: {{ forloop.counter0 }}">
          <div class="bg-white h-full rounded-lg shadow-md hover:shadow-lg transition-all duration-300 flex flex-col overflow-hidden">
            <div class="bg-[#fff7ee] p-6 text-black bg-opacity-90">
              <div class="flex items-center space-x-4">
                <img src="{{ profile.image.url }}" alt="{{ profile.name }}" class="w-16 h-16 rounded-full object-cover border-2 border-white shadow-sm">
                <div class="text-left">
                  <h3 class="text-xl font-bold">{{ profile.name }}</h3>
                  <p class="text-sm text-black opacity-90">{{ profile.affilation|default:"Not specified" }}</p>
                </div>
              </div>
            </div>
            
            <div class="flex-grow p-6">
              <div class="description-container">
                <p class="text-black mb-2">{{ profile.description }}</p>
              </div>
            </div>
            
            <div class="mt-auto p-4 border-t border-gray-100 bg-gray-50">
              <div class="flex justify-between items-center">
                <span class="text-red-950 font-medium hover:text-red-900 transition-colors flex items-center">
                  View blogs
                  <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                  </svg>
                </span>
              </div>
            </div>
          </div>
        </a>
      {% endfor %}
    {% else %}
      <div class="col-span-full text-center py-12">
        <svg class="w-16 h-16 mx-auto text-black mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <h3 class="text-xl font-bold text-black mb-2">No authors found</h3>
        <p class="text-gray-500">Try adjusting your search criteria</p>
      </div>
    {% endif %}
  </div>

  <!-- Pagination -->
  {% if page_obj.paginator.num_pages >= 1 %}
  <div class="flex justify-center items-center mt-12 mb-8 space-x-2">
    {% if page_obj.has_previous %}
      <a href="?page=1{% if search_query %}&search={{ search_query }}{% endif %}" class="px-4 py-2 rounded-lg bg-gray-200 text-black hover:bg-[#fff7ee]">&laquo; First</a>
      <a href="?page={{ page_obj.previous_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}" class="px-4 py-2 rounded-lg bg-gray-200 text-black hover:bg-[#fff7ee]">&laquo;</a>
    {% else %}
      <span class="px-4 py-2 rounded-lg bg-gray-200 text-gray-400 cursor-not-allowed">&laquo; First</span>
      <span class="px-4 py-2 rounded-lg bg-gray-200 text-gray-400 cursor-not-allowed">&laquo;</span>
    {% endif %}
    
    {% for i in page_obj.paginator.page_range %}
      {% if page_obj.number == i %}
        <span class="px-4 py-2 rounded-lg bg-[#fff7ee] text-black">{{ i }}</span>
      {% elif i > page_obj.number|add:'-3' and i < page_obj.number|add:'3' %}
        <a href="?page={{ i }}{% if search_query %}&search={{ search_query }}{% endif %}" class="px-4 py-2 rounded-lg bg-gray-200 text-black hover:bg-[#fff7ee]">{{ i }}</a>
      {% elif i == page_obj.number|add:'-3' or i == page_obj.number|add:'3' %}
        <span class="px-2 text-gray-500">...</span>
      {% endif %}
    {% endfor %}
    
    {% if page_obj.has_next %}
      <a href="?page={{ page_obj.next_page_number }}{% if search_query %}&search={{ search_query }}{% endif %}" class="px-4 py-2 rounded-lg bg-gray-200 text-black hover:bg-[#fff7ee]">&raquo;</a>
      <a href="?page={{ page_obj.paginator.num_pages }}{% if search_query %}&search={{ search_query }}{% endif %}" class="px-4 py-2 rounded-lg bg-gray-200 text-black hover:bg-[#fff7ee]">Last &raquo;</a>
    {% else %}
      <span class="px-4 py-2 rounded-lg bg-gray-200 text-gray-400 cursor-not-allowed">&raquo;</span>
      <span class="px-4 py-2 rounded-lg bg-gray-200 text-gray-400 cursor-not-allowed">Last &raquo;</span>
    {% endif %}
  </div>
  {% endif %}
</div>

<!-- Output all authors data as JSON for client-side filtering -->
<script id="all-authors-data" type="application/json">
  {{ all_authors_json|safe }}
</script>

<script>
  // Parse the JSON data from the backend that contains ALL authors for client-side filtering
  const allAuthors = JSON.parse(document.getElementById('all-authors-data').textContent);
  const searchInput = document.getElementById('searchInput');
  const searchForm = document.getElementById('searchForm');
  let typingTimer;
  const doneTypingInterval = 300; // ms
  
  // Add a subtle entrance animation to cards
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('fade-in');
        observer.unobserve(entry.target);
      }
    });
  }, {
    threshold: 0.1
  });

  // Observe all author cards for animation
  document.addEventListener('DOMContentLoaded', () => {
    const cards = document.querySelectorAll('.author-card');
    cards.forEach(card => {
      observer.observe(card);
    });
  });
  
  // Function to create author card element
  function createAuthorCard(profile, index) {
    const link = document.createElement("a");
    link.href = `/authors/author-${profile.id}/blogs/`;
    link.className = "block h-full author-card opacity-0";
    link.style.setProperty('--animation-order', index);
    
    link.innerHTML = `
      <div class="bg-white h-full rounded-lg shadow-md hover:shadow-lg transition-all duration-300 flex flex-col overflow-hidden">
        <div class="bg-[#fff7ee] p-6 text-black bg-opacity-90">
          <div class="flex items-center space-x-4">
            <img src="${profile.image}" alt="${profile.name}" class="w-16 h-16 rounded-full object-cover border-2 border-white shadow-sm">
            <div class="text-left">
              <h3 class="text-xl font-bold">${profile.name}</h3>
              <p class="text-sm text-black opacity-90">${profile.affilation || 'Not specified'}</p>
            </div>
          </div>
        </div>
        
        <div class="flex-grow p-6">
          <div class="description-container">
            <p class="text-black mb-2">${profile.description}</p>
          </div>
        </div>
        
        <div class="mt-auto p-4 border-t border-gray-100 bg-gray-50">
          <div class="flex justify-between items-center">
            <span class="text-red-950 font-medium hover:text-red-900 transition-colors flex items-center">
              View blogs
              <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            </span>
          </div>
        </div>
      </div>
    `;
    
    return link;
  }
  
  // Function to filter authors as user types
  function filterAuthors() {
    const searchText = searchInput.value.toLowerCase().trim();
    const cardsContainer = document.querySelector('.grid');
    const paginationElement = document.querySelector('.flex.justify-center.items-center.mt-12');
    
    // If empty search, submit form to get back to paginated view
    if (searchText === '') {
      return;
    }
    
    // Hide pagination during real-time search
    if (paginationElement) {
      paginationElement.style.display = 'none';
    }
    
    // Filter the authors based on search text
    const filteredAuthors = allAuthors.filter(author => {
      return author.name.toLowerCase().includes(searchText) || 
             (author.affilation && author.affilation.toLowerCase().includes(searchText)) || 
             author.description.toLowerCase().includes(searchText);
    });
    
    // Clear existing authors
    cardsContainer.innerHTML = '';
    
    // Display filtered authors or show no results message
    if (filteredAuthors.length === 0) {
      cardsContainer.innerHTML = `
        <div class="col-span-full text-center py-12">
          <svg class="w-16 h-16 mx-auto text-black mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
          <h3 class="text-xl font-bold text-black mb-2">No authors found</h3>
          <p class="text-gray-500">Try adjusting your search criteria</p>
        </div>
      `;
    } else {
      filteredAuthors.forEach((author, index) => {
        const card = createAuthorCard(author, index);
        cardsContainer.appendChild(card);
      });
      
      // Re-apply animations
      setTimeout(() => {
        const cards = document.querySelectorAll('.author-card');
        cards.forEach(card => {
          observer.observe(card);
        });
      }, 100);
    }
  }
  
  // Add event listeners for real-time search
  searchInput.addEventListener('keyup', function() {
    clearTimeout(typingTimer);
    typingTimer = setTimeout(filterAuthors, doneTypingInterval);
  });
  
  searchInput.addEventListener('keydown', function() {
    clearTimeout(typingTimer);
  });
  
  // Submit form when Enter is pressed for full backend search
  searchForm.addEventListener('submit', function(e) {
    const searchText = searchInput.value.trim();
    if (searchText === '') {
      e.preventDefault();
      window.location.href = window.location.pathname;
    }
  });
</script>
</script>

<style>
  /* Animation for cards */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .fade-in {
    animation: fadeIn 0.5s forwards;
    animation-delay: calc(var(--animation-order, 0) * 0.1s);
  }
</style>
{% endblock %}