<!DOCTYPE html>
<html lang="<%= config.language || 'en' %>">
<%- partial('_partial/head') %>
<body class="bg-[var(--background-color)] text-[var(--text-primary-color)]">
  <div class="min-h-screen flex flex-col">
    <%- partial('_partial/header') %>
    
    <main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-16">
      <div class="max-w-6xl mx-auto">
        <header class="mb-12">
          <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
            All Tags
          </h1>
          <p class="text-[var(--text-secondary-color)] text-lg">
            Explore posts by tags
          </p>
        </header>
        
        <!-- Tag Cloud -->
        <% if ((page.tags || site.tags).length > 0) { %>
        <div class="mb-12">
          <h2 class="text-2xl font-bold mb-6">Tag Cloud</h2>
          <div class="flex flex-wrap gap-3">
            <% 
            const tags = page.tags || site.tags;
            const maxCount = Math.max(...tags.map(tag => tag.posts.length));
            tags.sort('posts.length', -1).each(function(tag) {
              const size = Math.max(0.8, (tag.posts.length / maxCount) * 1.5);
              const opacity = Math.max(0.6, tag.posts.length / maxCount);
            %>
              <a href="<%= url_for(tag.path) %>" 
                 class="inline-block px-4 py-2 bg-[var(--secondary-color)] text-[var(--text-primary-color)] rounded-full hover:bg-[var(--primary-color)] hover:text-white transition-colors duration-300"
                 style="font-size: <%= size %>rem; opacity: <%= opacity %>">
                <%= tag.name %>
                <span class="text-xs opacity-70">(<%= tag.posts.length %>)</span>
              </a>
            <% }); %>
          </div>
        </div>
        <% } %>
        
        <!-- Tags List -->
        <div>
          <h2 class="text-2xl font-bold mb-6">All Tags</h2>
          <% if ((page.tags || site.tags).length > 0) { %>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
              <% (page.tags || site.tags).sort('name').each(function(tag) { %>
                <div class="group">
                  <a href="<%= url_for(tag.path) %>" 
                     class="flex items-center justify-between p-4 bg-[var(--secondary-color)] rounded-lg hover:bg-[var(--primary-color)] transition-colors duration-300">
                    <div>
                      <h3 class="font-semibold group-hover:text-white">
                        #<%= tag.name %>
                      </h3>
                      <p class="text-sm text-[var(--text-secondary-color)] group-hover:text-white/80">
                        <%= tag.posts.length %> <%= tag.posts.length === 1 ? 'post' : 'posts' %>
                      </p>
                    </div>
                    <svg class="w-5 h-5 text-[var(--text-secondary-color)] group-hover:text-white/80" 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>
                </div>
              <% }); %>
            </div>
          <% } else { %>
            <div class="text-center py-12">
              <p class="text-[var(--text-secondary-color)] text-lg">
                No tags found. Start writing posts with tags!
              </p>
            </div>
          <% } %>
        </div>
      </div>
    </main>
    
    <%- partial('_partial/footer') %>
  </div>
</body>
</html>