{% extends "settings/_layout.html" %}
{% block settings_title %}Artist Casing{% endblock %}
{% block settings_content %}
<h2 style="margin-top:0;">Artist casing</h2>
<p class="muted" style="margin-top:-0.75rem; max-width:60ch;">
  Canonical spelling/casing for artist names, exactly as they're stylized on Spotify.
  The <span class="mono">Normalize artist casing</span> job (Settings &rarr; <a href="/settings/jobs">Jobs</a>)
  rewrites any album artist tag that matches a name here case-insensitively but differs
  in casing &mdash; e.g. <span class="mono">MALL GRAB</span> &rarr; <span class="mono">Mall Grab</span>.
  This prevents Linux and Windows from disagreeing about whether two folder names are
  the same, which breaks Syncthing.
</p>

<div class="panel" style="max-width:560px;">
  <form method="post" action="/settings/artist-casing/add" style="display:flex; gap:0.6rem; align-items:flex-end;">
    <div class="field wide" style="margin-bottom:0; flex:1;">
      <label for="name">Artist name</label>
      <input type="text" id="name" name="name" placeholder="exactly as Spotify displays it" required>
    </div>
    <button type="submit" class="btn btn-primary">Add</button>
  </form>
</div>

<h2>Canonical list <span class="muted" style="font-weight:400;">({{ entries | length }})</span></h2>
<div class="table-wrap scroll">
  <table>
    <thead><tr><th>Artist</th><th></th></tr></thead>
    <tbody>
      {% for name in entries | sort(case_sensitive=False) %}
      <tr>
        <td>{{ name }}</td>
        <td class="actions-cell">
          <form method="post" action="/settings/artist-casing/remove" class="inline"
                onsubmit="return confirm('Remove {{ name }} from the canonical list?')">
            <input type="hidden" name="name" value="{{ name }}">
            <button type="submit" class="btn btn-sm btn-ghost">Remove</button>
          </form>
        </td>
      </tr>
      {% else %}
      <tr class="empty-row"><td colspan="2">
        <div class="empty-state">
          <span class="sparkle" style="position:relative; display:inline-block; margin-bottom:0.5rem;"></span>
          <p class="muted" style="margin:0;">No canonical names yet. Add one above.</p>
        </div>
      </td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}