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

{% block content %}
<div class="bg-[#f4f2ef]">
  <div class="container mx-auto px-4 py-12 max-w-7xl">
    <header class="text-center mb-12">
      <h1 class="text-4xl md:text-5xl font-serif font-bold text-gray-900 mb-3">Explore By Topic</h1>
      <p class="text-gray-600 max-w-2xl mx-auto">Browse our collection of articles organized by subject.</p>
    </header>
    
    <!-- A-Z Navigation -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-12 py-4 sticky top-0 z-10">
      <div class="flex flex-wrap justify-center gap-1 md:gap-2">
        {% for letter in alphabet %}
          <a 
            href="#letter-{{ letter }}" 
            class="w-10 h-10 md:w-12 md:h-12 flex items-center justify-center rounded-md font-medium transition-all duration-200 text-xl
                   {% if topics_with_letters|get_item:letter %}text-red-900{% else %}text-gray-400{% endif %}"
            aria-label="Jump to {{ letter }}"
          >
            {{ letter }}
          </a>
        {% endfor %}
      </div>
    </div>

    <!-- Topics by Letter -->
    <div class="space-y-16">
      {% for letter, topics in topics_with_letters.items %}
        <section id="letter-{{ letter }}" class="scroll-mt-24">
          <div class="relative">
            <h2 class="text-6xl font-serif font-bold text-gray-300 absolute -top-10 left-0 opacity-60">{{ letter }}</h2>
            <div class="border-b border-gray-200 pb-3 mb-6">
              <h3 class="text-2xl font-serif font-bold text-gray-800 relative z-10">{{ letter }}</h3>
            </div>
          </div>
          
          {% if topics %}
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
              {% for topic in topics %}
                <a 
                  href="{% url 'mimansha_main:topic_detail' slug=topic.slug %}"
                  class="group bg-white border border-gray-200 p-5 rounded-lg"
                >
                  <h4 class="font-medium text-gray-800 transition-colors mb-1">{{ topic.title }}</h4>
                  {% if topic.blog_count > 0 %}
                    <div class="flex items-center mt-2">
                      <span class="inline-block w-2 h-2 rounded-full bg-red-900 mr-2"></span>
                      <p class="text-sm text-gray-500">
                        {{ topic.blog_count }} article{{ topic.blog_count|pluralize }}
                      </p>
                    </div>
                  {% else %}
                    <div class="flex items-center mt-2">
                      <span class="inline-block w-2 h-2 rounded-full bg-gray-300 mr-2"></span>
                      <p class="text-sm text-gray-400">No articles yet</p>
                    </div>
                  {% endif %}
                </a>
              {% endfor %}
            </div>
          {% else %}
            <div class="bg-gray-50 bg-opacity-50 rounded-lg border border-gray-100 p-6 text-center">
              <p class="text-gray-400">No topics starting with {{ letter }}</p>
            </div>
          {% endif %}
        </section>
      {% empty %}
        <div class="bg-gray-50 rounded-lg border border-gray-200 p-12 text-center">
          <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
          </svg>
          <h3 class="text-xl font-medium text-gray-600 mb-2">No Topics Available</h3>
          <p class="text-gray-500">We'll be adding topics soon.</p>
        </div>
      {% endfor %}
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Smooth scrolling for letter navigation
  document.querySelectorAll('[href^="#letter-"]').forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute('href'));
      if (target) {
        const navbar = document.querySelector('.sticky');
        const offset = navbar ? navbar.offsetHeight + 20 : 20;
        window.scrollTo({
          top: target.offsetTop - offset,
          behavior: 'smooth'
        });
      }
    });
  });

  // Highlight active letter on scroll
  const sections = document.querySelectorAll('[id^="letter-"]');
  const links = document.querySelectorAll('[href^="#letter-"]');
  
  function highlightActive() {
    let current = '';
    const scrollPos = window.scrollY + 100;
    
    sections.forEach(section => {
      const sectionTop = section.offsetTop;
      const sectionHeight = section.offsetHeight;
      
      if (scrollPos >= sectionTop && scrollPos < sectionTop + sectionHeight) {
        current = section.getAttribute('id');
      }
    });
    
    links.forEach(link => {
      link.classList.remove('bg-gray-100', 'text-red-900', 'font-bold');
      if (link.getAttribute('href') === `#${current}`) {
        link.classList.add('bg-gray-100', 'text-red-900', 'font-bold');
      }
    });
  }
  
  window.addEventListener('scroll', highlightActive);
  highlightActive(); // Initial call
});
</script>
{% endblock %}