{% extends "layout.html" %}
{% block title %}
  {%- if active_kind == 'artist' -%}Artists
  {%- elif active_kind == 'character' -%}Characters
  {%- elif active_kind == 'series' -%}Series
  {%- elif active_kind == 'rating' -%}Ratings
  {%- elif active_kind == 'archive' -%}Archives
  {%- elif active_kind == 'source' -%}Sources
  {%- elif active_kind == 'post' -%}Posts
  {%- elif active_kind == 'user' -%}User Tags
  {%- else -%}Tags{%- endif -%}
{% endblock %}

{% block content %}
<h1>
  {%- if active_kind == 'artist' -%}Artists
  {%- elif active_kind == 'character' -%}Characters
  {%- elif active_kind == 'series' -%}Series
  {%- elif active_kind == 'rating' -%}Ratings
  {%- elif active_kind == 'archive' -%}Archives
  {%- elif active_kind == 'source' -%}Sources
  {%- elif active_kind == 'post' -%}Posts
  {%- elif active_kind == 'user' -%}User Tags
  {%- else -%}All Tags{%- endif -%}
</h1>

<!-- Tag kind filter -->
<div class="filter-bar" role="tablist" aria-label="Filter tags by kind">
  <a class="filter-btn {{ 'is-active' if not active_kind }}"
     href="{{ url_for('main.tag_list') }}"
     aria-current="{{ 'page' if not active_kind else 'false' }}">🏷️ All</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='artist' }}"
     href="{{ url_for('main.tag_list', kind='artist') }}"
     aria-current="{{ 'page' if active_kind=='artist' else 'false' }}">🎨 Artists</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='character' }}"
     href="{{ url_for('main.tag_list', kind='character') }}"
     aria-current="{{ 'page' if active_kind=='character' else 'false' }}">👤 Characters</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='series' }}"
     href="{{ url_for('main.tag_list', kind='series') }}"
     aria-current="{{ 'page' if active_kind=='series' else 'false' }}">📺 Series</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='rating' }}"
     href="{{ url_for('main.tag_list', kind='rating') }}"
     aria-current="{{ 'page' if active_kind=='rating' else 'false' }}">⚠️ Ratings</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='archive' }}"
     href="{{ url_for('main.tag_list', kind='archive') }}"
     aria-current="{{ 'page' if active_kind=='archive' else 'false' }}">🗜️ Archives</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='source' }}"
     href="{{ url_for('main.tag_list', kind='source') }}"
     aria-current="{{ 'page' if active_kind=='source' else 'false' }}">🌐 Sources</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='post' }}"
     href="{{ url_for('main.tag_list', kind='post') }}"
     aria-current="{{ 'page' if active_kind=='post' else 'false' }}">📌 Posts</a>

  <a class="filter-btn {{ 'is-active' if active_kind=='user' }}"
     href="{{ url_for('main.tag_list', kind='user') }}"
     aria-current="{{ 'page' if active_kind=='user' else 'false' }}"># User</a>
</div>

{% if tag_data %}
<div class="tag-grid">
  {% for tag in tag_data %}
    <div class="tag-card" data-tag-id="{{ tag.id }}" data-tag-name="{{ tag.tag }}" data-tag-kind="{{ tag.kind }}">
      <a href="{{ url_for('main.gallery', tag=tag.tag) }}" class="tag-card-link">
        <div class="tag-preview">
          {% for image in tag.images %}
            <img class="tag-thumb"
                 src="{{ url_for('main.serve_image', filename=(image.thumb_path or image.filepath) | replace('/images/', '') ) }}"
                 loading="lazy"
                 alt="">
          {% endfor %}
          {% if tag.images|length == 0 %}
            <div class="tag-thumb tag-thumb-empty"></div>
          {% endif %}
        </div>
        <div class="tag-card-info">
          <span class="tag-icon">
            {%- if tag.kind == 'artist' -%}🎨
            {%- elif tag.kind == 'character' -%}👤
            {%- elif tag.kind == 'series' -%}📺
            {%- elif tag.kind == 'rating' -%}⚠️
            {%- elif tag.kind == 'archive' -%}🗜️
            {%- elif tag.kind == 'source' -%}🌐
            {%- elif tag.kind == 'post' -%}📌
            {%- else -%}#{%- endif -%}
          </span>
          <span class="tag-name" title="{{ tag.name }}">{{ tag.name }}</span>
          <span class="tag-count">{{ tag.count }}</span>
        </div>
      </a>
      <button class="tag-edit-btn" title="Edit tag" data-tag-id="{{ tag.id }}">✏️</button>
    </div>
  {% endfor %}
</div>
{% else %}
<p class="empty-state">No tags found in this category.</p>
{% endif %}

<!-- Tag Edit Modal -->
<div id="tagEditModal" class="modal">
  <div class="modal-content tag-edit-modal-content">
    <button id="tagEditClose" class="modal-close-btn" title="Close">×</button>
    <h2>Edit Tag</h2>
    <form id="tagEditForm" class="tag-edit-form">
      <input type="hidden" id="editTagId" name="tag_id">

      <div class="form-group">
        <label class="form-label" for="editTagName">Tag Name</label>
        <input type="text" id="editTagName" name="name" class="form-input" required>
      </div>

      <div class="form-group">
        <label class="form-label" for="editTagKind">Category</label>
        <select id="editTagKind" name="kind" class="form-input">
          <option value="user"># User Tag</option>
          <option value="artist">🎨 Artist</option>
          <option value="character">👤 Character</option>
          <option value="series">📺 Series</option>
          <option value="rating">⚠️ Rating</option>
          <option value="archive">🗜️ Archive</option>
          <option value="source">🌐 Source</option>
          <option value="post">📌 Post</option>
        </select>
      </div>

      <div class="form-actions">
        <button type="submit" class="btn primary-btn">Save Changes</button>
        <button type="button" id="tagDeleteBtn" class="btn danger-btn">Delete Tag</button>
      </div>
    </form>
  </div>
</div>

<script src="{{ url_for('static', filename='js/tag-editor.js') }}"></script>
{% endblock %}