{% extends "base.html" %}

{% block title %}Artists — ArtNode{% endblock %}

{% block content %}
<div class="page-header">
  <div>
    <div class="page-title">Artists</div>
    <div class="page-subtitle">{{ artists|length }} artists in roster</div>
  </div>
  <div class="page-actions">
    <a href="{{ url_for('artists.create') }}" class="btn btn-primary">+ Add Artist</a>
  </div>
</div>

<div class="page-body">
  <div class="toolbar">
    <input type="text" class="search-input" placeholder="Search by name..." id="searchInput">
    <span class="toolbar-count" id="countLabel">{{ artists|length }} artists</span>
  </div>

  <table style="width:100%;border-collapse:collapse;">
    <thead>
      <tr style="border-bottom:2px solid var(--border);">
        <th style="text-align:left;padding:8px 12px;font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);font-weight:400;">Artist</th>
        <th style="text-align:left;padding:8px 12px;font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);font-weight:400;">Nationality</th>
        <th style="text-align:left;padding:8px 12px;font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);font-weight:400;">Born</th>
        <th style="text-align:right;padding:8px 12px;font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);font-weight:400;">Works</th>
      </tr>
    </thead>
    <tbody id="artistTable">
      {% for artist, count in artists %}
      <tr class="artist-row" data-name="{{ artist.last_name|lower }} {{ artist.first_name|lower }}"
          style="border-bottom:1px solid var(--border-light);cursor:pointer;transition:background 0.15s;"
          onmouseover="this.style.background='var(--border-light)'"
          onmouseout="this.style.background=''">
        <td style="padding:14px 12px;">
          <span style="font-size:0.95rem;font-weight:400;">{{ artist.last_name }}</span>
          <span style="font-size:0.95rem;color:var(--text-secondary);"> {{ artist.first_name }}</span>
        </td>
        <td style="padding:14px 12px;font-size:0.85rem;color:var(--text-secondary);">{{ artist.nationality or "—" }}</td>
        <td style="padding:14px 12px;font-size:0.85rem;color:var(--text-secondary);">
          {{ artist.birth_year or "—" }}{% if artist.death_year %} – {{ artist.death_year }}{% endif %}
        </td>
        <td style="padding:14px 12px;font-size:0.85rem;color:var(--text-secondary);text-align:right;">
          <span style="background:var(--border-light);padding:2px 10px;font-size:0.75rem;">{{ count }}</span>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<script>
const input = document.getElementById("searchInput");
const rows = document.querySelectorAll(".artist-row");
const label = document.getElementById("countLabel");
input.addEventListener("input", () => {
  const q = input.value.toLowerCase().trim();
  let visible = 0;
  rows.forEach(row => {
    const match = !q || row.dataset.name.includes(q);
    row.style.display = match ? "" : "none";
    if (match) visible++;
  });
  label.textContent = visible + " artist" + (visible !== 1 ? "s" : "");
});
</script>
{% endblock %}