{% extends "layout.html" %}
{% block title %}{{ 'Artists' if active_kind == 'artist' else 'Tags' }}{% endblock %}

{% block content %}
<h1>{{ 'Artists' if active_kind == 'artist' else 'Tags' }}</h1>

<!-- Small kind filter nav (optional) -->
<!-- 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=='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=='user' }}"
     href="{{ url_for('main.tag_list', kind='user') }}"
     aria-current="{{ 'page' if active_kind=='user' else 'false' }}"># User</a>
</div>

<div class="artist-grid">
  {% for tag in tag_data %}
    <a href="{{ url_for('main.gallery', tag=tag.tag) }}" class="artist-card-link">
      <div class="artist-card">
        <div class="card-title" title="{{ tag.name }}">
          <h3 class="card-title-text">
            {% if tag.kind == 'artist' %}🎨{% elif tag.kind == 'archive' %}🗜️{% else %}# {% endif %}
            {{ tag.name }}
          </h3>
        </div>
        <div class="artist-preview">
          {% for image in tag.images %}
            <div class="artist-thumb"
                 style="background-image: url('{{ url_for('main.serve_image', filename=(image.thumb_path or image.filepath) | replace('/images/', '') ) }}');">
            </div>
          {% endfor %}
        </div>
      </div>
    </a>
  {% endfor %}
</div>
{% endblock %}