<% if(allTags && allTags.length){ %>
<div class="mb-14" id="tag-filter-root">
  <div class="mb-4 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
    <div class="flex items-center gap-3">
      <span class="text-sm font-semibold text-gray-700 flex items-center gap-1"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M7 7h.01M4 6a2 2 0 012-2h3.586a1 1 0 01.707.293l1.414 1.414A1 1 0 0012.414 6H18a2 2 0 012 2v2M4 8v8a2 2 0 002 2h2m12-8v4a2 2 0 01-2 2h-4m-6 0h6m-6 0a2 2 0 01-2-2v-2"/></svg> Tags</span>
      <span class="hidden md:inline text-xs rounded-full bg-gray-100 text-gray-700 px-2 py-0.5 font-medium"> <%- allTags.length %> </span>
    </div>
    <div class="relative w-full md:w-72">
      <input id="tag-filter-search" type="text" placeholder="Search tags..." class="w-full rounded-md border border-gray-200 bg-white py-2 pl-9 pr-3 text-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:border-gray-500" aria-label="Search tags" />
      <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-2 text-gray-400">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"/></svg>
      </div>
    </div>
  </div>

  <div class="relative group">
    <div id="tag-filter-container" class="flex gap-2 overflow-x-auto pb-2 scrollbar-thin snap-x snap-mandatory" style="scrollbar-width: none; -ms-overflow-style: none;">
      <style>
        #tag-filter-container::-webkit-scrollbar{display:none;}
      </style>
      <a href="/blog" data-tag="all" class="tag-chip <%= !tagName ? 'tag-chip-active' : '' %>" aria-label="Show all posts">All</a>
      <% for(var i=0;i<allTags.length;i++){ const t = allTags[i]; const slug = t.replaceAll(' ','-').toLowerCase(); const active = (tagName && tagName.toLowerCase()===t.toLowerCase()); %>
        <a href="/blog/tag/<%- slug -%>" data-tag="<%- slug %>" class="tag-chip <%= active ? 'tag-chip-active' : '' %>" aria-label="Filter by <%- t %>"><%- t %></a>
      <% } %>
      <div id="no-tag-results" class="hidden px-3 py-1.5 text-xs text-gray-500">No tags match.</div>
    </div>
    <div class="pointer-events-none absolute top-0 right-0 h-full w-10 bg-gradient-to-l from-white to-transparent hidden md:block"></div>
  </div>

  <div class="mt-3 flex items-center justify-between text-[11px] text-gray-500">
    <div id="tag-count-info">Showing <%- allTags.length %> tags</div>
    <button id="toggle-more-tags" type="button" class="hidden text-gray-600 hover:text-gray-500 font-medium">Show more</button>
  </div>
</div>

<script>
  (function(){
    if(window.__TAG_FILTER_INITIALIZED__) { return; }
    window.__TAG_FILTER_INITIALIZED__ = true;
    const searchInput = document.getElementById('tag-filter-search');
    const container = document.getElementById('tag-filter-container');
    const info = document.getElementById('tag-count-info');
    const noResults = document.getElementById('no-tag-results');
    if(!searchInput || !container) { return; }
    const chips = Array.from(container.querySelectorAll('.tag-chip'));
    function normalize(s){ return (s||'').toLowerCase(); }
    function filter(){
      const q = normalize(searchInput.value);
      let visible = 0;
      chips.forEach(chip => {
        if(chip.dataset.tag === 'all'){ // always show All
          chip.classList.remove('hidden');
          return; }
        const text = normalize(chip.textContent);
        if(!q || text.includes(q)) { chip.classList.remove('hidden'); visible++; }
        else { chip.classList.add('hidden'); }
      });
      if(visible === 0 && q){ noResults.classList.remove('hidden'); }
      else { noResults.classList.add('hidden'); }
      info && (info.textContent = q ? `Matched ${visible} tag${visible!==1?'s':''}` : `Showing ${chips.length-1} tags`);
    }
    searchInput.addEventListener('input', filter);
    // Keyboard horizontal scroll convenience
    searchInput.addEventListener('keydown', function(e){
      if(e.key === 'ArrowRight'){ container.scrollBy({left:120,behavior:'smooth'}); }
      if(e.key === 'ArrowLeft'){ container.scrollBy({left:-120,behavior:'smooth'}); }
    });
  })();
</script>

<style>
  /* Inline fallback styling since Tailwind @apply isn't processed in EJS runtime */
  .tag-chip { font-size: 0.75rem; font-weight:500; padding:0.375rem 0.75rem; border-radius:9999px; border:1px solid #e5e7eb; background:#ffffff; color:#4b5563; display:inline-flex; align-items:center; transition:all .15s; white-space:nowrap; text-decoration:none; }
  .tag-chip:hover { color:#2563eb; border-color:#93c5fd; background:#eff6ff; }
  .tag-chip-active { background:#2563eb; border-color:#2563eb; color:#ffffff; }
  .tag-chip-active:hover { background:#1d4ed8; border-color:#1d4ed8; color:#ffffff; }
</style>
<% } %>
