{% extends "artifacts/settings_base.html" %}

{% block settings_content %}
  <h2>Labels</h2>
  <p>
    Build a palette of labels you can apply to any message from its &#8943; menu
    in the feed. A label is just a coloured tag — applying one adds it to the
    message and it shows as a chip next to the title. Deleting a label here only
    removes it from this palette; messages that already carry it keep the chip.
  </p>

  <h3>Add a label</h3>
  <form method="post" class="label-create">
    {% csrf_token %}
    <input type="hidden" name="action" value="create">
    <label>Name <input type="text" name="name" placeholder="e.g. follow-up" required autocomplete="off" maxlength="40"></label>
    <label>Colour <input type="color" name="color" value="#4a6ea8"></label>
    <button type="submit">Add label</button>
  </form>

  <h3>Your labels</h3>
  {% if labels %}
    <table class="label-table">
      <thead>
        <tr><th>Label</th><th>Colour</th><th></th></tr>
      </thead>
      <tbody>
        {% for label in labels %}
          <tr>
            <td><span class="tag-chip" style="background:{{ label.color }}">{{ label.name }}</span></td>
            <td>
              <form method="post" class="label-recolor">
                {% csrf_token %}
                <input type="hidden" name="action" value="update">
                <input type="hidden" name="label_id" value="{{ label.pk }}">
                <input type="color" name="color" value="{{ label.color }}" onchange="this.form.submit()" title="Change colour">
              </form>
            </td>
            <td>
              <form method="post" onsubmit="return confirm('Remove &quot;{{ label.name|escapejs }}&quot; from your palette? Messages already labelled keep the chip.');">
                {% csrf_token %}
                <input type="hidden" name="action" value="delete">
                <input type="hidden" name="label_id" value="{{ label.pk }}">
                <button type="submit" class="label-delete">Delete</button>
              </form>
            </td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <p class="muted">No labels yet. Add one above, then pick it from a message's &#8943; menu.</p>
  {% endif %}
{% endblock %}