{% extends "base.html" %}
{% load i18n %}
{% block content %}
<style>
  /* ── Apple design tokens (same system as Files / Collections / Tags list) ── */
  :root {
    --apple-blue: #0071e3; --apple-red: #ff3b30; --apple-text: #1d1d1f;
    --apple-gray: #86868b; --apple-separator: rgba(0, 0, 0, 0.06);
    --apple-bg: #f5f5f7; --apple-radius-lg: 22px;
    --apple-ease: cubic-bezier(.25, .1, .25, 1);
    --apple-shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.12);
  }
  .tags-page {
    max-width: 1080px; margin: 0 auto; padding: 2rem 1.25rem 3rem;
    color: var(--apple-text);
    width: 100%; box-sizing: border-box;
  }
  .apple-card {
    background: #fff; border-radius: var(--apple-radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    padding: 1.5rem; margin-bottom: 1.25rem;
    width: 100%; box-sizing: border-box;
  }

  /* ── Tag header ── */
  .tag-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .tag-header h1 {
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.5rem;
  }
  .tag-hash { color: var(--apple-blue); }
  .tag-desc { color: var(--apple-gray); font-size: 0.95rem; margin: 0 0 0.9rem; }
  .tag-usage {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.32rem 0.85rem; border-radius: 980px;
    background: rgba(0, 113, 227, 0.1); color: var(--apple-blue);
    font-size: 0.78rem; font-weight: 700;
  }
  .tag-actions { display: flex; gap: 0.55rem; flex: none; }
  .apple-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 38px; padding: 0.45rem 1.05rem; border-radius: 980px;
    font-size: 0.85rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer;
    transition: background 0.25s ease, transform 0.2s var(--apple-ease), box-shadow 0.25s ease;
  }
  .apple-btn-secondary { background: #fff; color: var(--apple-text); border: 1px solid rgba(0, 0, 0, 0.12); }
  .apple-btn-secondary:hover { background: #f0f0f3; }
  .apple-btn-danger { background: var(--apple-red); color: #fff; box-shadow: 0 4px 14px rgba(255, 59, 48, 0.18); }
  .apple-btn-danger:hover { background: #ff5147; }
  .apple-btn:active { transform: scale(0.96); }

  /* ── Segmented tabs ── */
  .seg-tabs {
    display: flex; align-items: center; gap: 2px;
    padding: 3px; background: rgba(0, 0, 0, 0.055); border-radius: 12px;
    margin-bottom: 1.4rem;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
  }
  .seg-tabs::-webkit-scrollbar { display: none; }
  .seg-tab {
    display: inline-flex; align-items: center; gap: 0.4rem; flex: none; white-space: nowrap;
    padding: 0.45rem 0.95rem; border-radius: 9px; border: none; cursor: pointer;
    background: transparent; font-size: 0.82rem; font-weight: 600; color: var(--apple-text);
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }
  .seg-tab:hover { background: rgba(0, 0, 0, 0.05); }
  .seg-tab.active { background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12); }
  .seg-tab .tab-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.35rem; height: 1.15rem; padding: 0 0.35rem;
    border-radius: 980px; font-size: 0.68rem; font-weight: 700;
    background: rgba(0, 0, 0, 0.07); color: var(--apple-gray);
  }
  .seg-tab.active .tab-count { background: rgba(0, 113, 227, 0.14); color: var(--apple-blue); }

  /* ── Resource cards ── */
  .res-grid { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .res-card {
    display: block; background: #fff; border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px; padding: 1rem 1.1rem; text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--apple-ease);
  }
  .res-card:hover {
    border-color: rgba(0, 113, 227, 0.35);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
  }
  .res-card h3 { font-size: 0.95rem; font-weight: 700; margin: 0 0 0.3rem; color: var(--apple-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .res-card h3 a { color: var(--apple-blue); text-decoration: none; }
  .res-card h3 a:hover { text-decoration: underline; }
  .res-card .res-desc { font-size: 0.8rem; color: var(--apple-gray); margin: 0 0 0.55rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .res-card .res-meta { font-size: 0.72rem; color: var(--apple-gray); display: flex; align-items: center; gap: 0.3rem; }
  .res-card .res-meta svg { width: 0.85rem; height: 0.85rem; flex: none; }
  .res-empty {
    display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
    padding: 2.2rem 1rem; text-align: center; color: var(--apple-gray); font-size: 0.88rem;
    background: rgba(0, 0, 0, 0.022); border-radius: 14px;
  }
  .res-empty svg { width: 1.9rem; height: 1.9rem; color: rgba(0, 0, 0, 0.18); }

  @media (max-width: 640px) {
    .tags-page { padding: 1.35rem 1rem 2.5rem; }
    .tag-header h1 { font-size: 1.6rem; }
    .res-grid { grid-template-columns: 1fr; }
    .seg-tab { padding: 0.38rem 0.45rem; font-size: 0.76rem; gap: 0.3rem; }
    .seg-tab .tab-count { min-width: 1.1rem; height: 1rem; padding: 0 0.28rem; font-size: 0.62rem; }
  }
</style>

<div class="tags-page">
    <div class="apple-card">
        <!-- Header -->
        <div class="tag-header">
            <div style="min-width:0">
                <h1><span class="tag-hash" aria-hidden="true">#</span><span style="overflow-wrap:anywhere">{{ tag.name }}</span></h1>
                {% if tag.description %}<p class="tag-desc">{{ tag.description }}</p>{% endif %}
                <span class="tag-usage">
                    <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                    </svg>
                    {% trans "Used" %} {{ total_usage_count }} {% trans "times" %}
                </span>
            </div>
            <div class="tag-actions">
                <a href="{% url 'tag-update' tag.slug %}" class="apple-btn apple-btn-secondary">
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125"/>
                    </svg>
                    {% trans "Edit" %}
                </a>
                <a href="{% url 'tag-delete' tag.slug %}" class="apple-btn apple-btn-danger">
                    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                    </svg>
                    {% trans "Delete" %}
                </a>
            </div>
        </div>
    </div>

    <!-- Segmented tabs -->
    <div class="seg-tabs" role="tablist" aria-label="{% trans 'Tagged resources' %}">
        <button type="button" class="seg-tab active" data-target="links-section" role="tab" aria-selected="true">
            {% trans "Links" %}<span class="tab-count">{{ links|length }}</span>
        </button>
        <button type="button" class="seg-tab" data-target="posts-section" role="tab" aria-selected="false">
            {% trans "Posts" %}<span class="tab-count">{{ posts|length }}</span>
        </button>
        <button type="button" class="seg-tab" data-target="pages-section" role="tab" aria-selected="false">
            {% trans "Pages" %}<span class="tab-count">{{ pages|length }}</span>
        </button>
        <button type="button" class="seg-tab" data-target="collections-section" role="tab" aria-selected="false">
            {% trans "Collections" %}<span class="tab-count">{{ image_collections|length }}</span>
        </button>
    </div>

    <!-- Links -->
    <div id="links-section" class="resource-section apple-card">
        <h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">
            {% trans "Links with this tag" %}
            <span class="tab-count" style="display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.15rem;padding:0 0.35rem;border-radius:980px;font-size:0.68rem;font-weight:700;background:rgba(0,113,227,0.14);color:var(--apple-blue);margin-left:0.4rem;vertical-align:middle">{{ links|length }}</span>
        </h2>
        {% if links %}
        <div class="res-grid">
            {% for link in links|slice:":20" %}
            <a href="{% url 'link_detail' pk=link.pk %}" class="res-card">
                <h3>{{ link.alias }}</h3>
                {% if link.description %}<p class="res-desc">{{ link.description }}</p>{% endif %}
                <p class="res-meta">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                    {{ link.created_at|date:"Y-m-d" }}
                </p>
            </a>
            {% endfor %}
        </div>
        {% if links|length > 20 %}
        <a href="{% url 'link_list' %}" class="view-all" style="display:inline-flex;align-items:center;gap:0.3rem;margin-top:1rem;font-size:0.82rem;font-weight:600;color:var(--apple-blue);text-decoration:none">
            {% blocktrans with n=links|length %}View all {{ n }} links{% endblocktrans %}
            <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12l-7.5 7.5M21 12H3"/></svg>
        </a>
        {% endif %}
        {% else %}
        <div class="res-empty">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244"/>
            </svg>
            {% trans "No links found with this tag." %}
        </div>
        {% endif %}
    </div>

    <!-- Posts -->
    <div id="posts-section" class="resource-section apple-card" hidden>
        <h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">
            {% trans "Posts with this tag" %}
            <span class="tab-count" style="display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.15rem;padding:0 0.35rem;border-radius:980px;font-size:0.68rem;font-weight:700;background:rgba(0,113,227,0.14);color:var(--apple-blue);margin-left:0.4rem;vertical-align:middle">{{ posts|length }}</span>
        </h2>
        {% if posts %}
        <div class="res-grid">
            {% for post in posts|slice:":20" %}
            <a href="{% url 'post-detail' pk=post.pk %}" class="res-card">
                <h3>{{ post.title }}</h3>
                {% if post.summary %}<p class="res-desc">{{ post.summary }}</p>{% endif %}
                <p class="res-meta">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                    {{ post.created_at|date:"Y-m-d" }}
                </p>
            </a>
            {% endfor %}
        </div>
        {% if posts|length > 20 %}
        <a href="{% url 'post-list' %}" class="view-all" style="display:inline-flex;align-items:center;gap:0.3rem;margin-top:1rem;font-size:0.82rem;font-weight:600;color:var(--apple-blue);text-decoration:none">
            {% blocktrans with n=posts|length %}View all {{ n }} posts{% endblocktrans %}
            <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12l-7.5 7.5M21 12H3"/></svg>
        </a>
        {% endif %}
        {% else %}
        <div class="res-empty">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/>
            </svg>
            {% trans "No posts found with this tag." %}
        </div>
        {% endif %}
    </div>

    <!-- Pages -->
    <div id="pages-section" class="resource-section apple-card" hidden>
        <h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">
            {% trans "Pages with this tag" %}
            <span class="tab-count" style="display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.15rem;padding:0 0.35rem;border-radius:980px;font-size:0.68rem;font-weight:700;background:rgba(0,113,227,0.14);color:var(--apple-blue);margin-left:0.4rem;vertical-align:middle">{{ pages|length }}</span>
        </h2>
        {% if pages %}
        <div class="res-grid">
            {% for page in pages|slice:":20" %}
            <a href="{% url 'page-detail' pk=page.pk %}" class="res-card">
                <h3>{{ page.title|default:page.url }}</h3>
                {% if page.summary %}<p class="res-desc">{{ page.summary }}</p>{% endif %}
                <p class="res-meta">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                    {{ page.created_at|date:"Y-m-d" }}
                </p>
            </a>
            {% endfor %}
        </div>
        {% if pages|length > 20 %}
        <a href="{% url 'page-list' %}" class="view-all" style="display:inline-flex;align-items:center;gap:0.3rem;margin-top:1rem;font-size:0.82rem;font-weight:600;color:var(--apple-blue);text-decoration:none">
            {% blocktrans with n=pages|length %}View all {{ n }} pages{% endblocktrans %}
            <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12l-7.5 7.5M21 12H3"/></svg>
        </a>
        {% endif %}
        {% else %}
        <div class="res-empty">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 010 3.75H5.625a1.875 1.875 0 010-3.75z"/>
            </svg>
            {% trans "No pages found with this tag." %}
        </div>
        {% endif %}
    </div>

    <!-- Image Collections -->
    <div id="collections-section" class="resource-section apple-card" hidden>
        <h2 style="font-size:1rem;font-weight:700;margin:0 0 1rem">
            {% trans "Image Collections with this tag" %}
            <span class="tab-count" style="display:inline-flex;align-items:center;justify-content:center;min-width:1.35rem;height:1.15rem;padding:0 0.35rem;border-radius:980px;font-size:0.68rem;font-weight:700;background:rgba(0,113,227,0.14);color:var(--apple-blue);margin-left:0.4rem;vertical-align:middle">{{ image_collections|length }}</span>
        </h2>
        {% if image_collections %}
        <div class="res-grid">
            {% for collection in image_collections|slice:":20" %}
            <a href="{% url 'collection-detail' pk=collection.pk %}" class="res-card">
                <h3>{{ collection.name }}</h3>
                {% if collection.description %}<p class="res-desc">{{ collection.description }}</p>{% endif %}
                <p class="res-meta">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                    </svg>
                    {{ collection.created_at|date:"Y-m-d" }}
                </p>
            </a>
            {% endfor %}
        </div>
        {% if image_collections|length > 20 %}
        <a href="{% url 'collection-list' %}" class="view-all" style="display:inline-flex;align-items:center;gap:0.3rem;margin-top:1rem;font-size:0.82rem;font-weight:600;color:var(--apple-blue);text-decoration:none">
            {% blocktrans with n=image_collections|length %}View all {{ n }} collections{% endblocktrans %}
            <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12l-7.5 7.5M21 12H3"/></svg>
        </a>
        {% endif %}
        {% else %}
        <div class="res-empty">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A1.5 1.5 0 0021.75 19.5V4.5A1.5 1.5 0 0020.25 3H3.75A1.5 1.5 0 002.25 4.5v15A1.5 1.5 0 003.75 21z"/>
            </svg>
            {% trans "No image collections found with this tag." %}
        </div>
        {% endif %}
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const tabs = document.querySelectorAll('.seg-tab');
    const sections = document.querySelectorAll('.resource-section');
    tabs.forEach(tab => {
        tab.addEventListener('click', function () {
            sections.forEach(s => { s.hidden = true; });
            const target = document.getElementById(this.getAttribute('data-target'));
            if (target) target.hidden = false;
            tabs.forEach(t => { t.classList.remove('active'); t.setAttribute('aria-selected', 'false'); });
            this.classList.add('active');
            this.setAttribute('aria-selected', 'true');
        });
    });
});
</script>
{% endblock %}