{% extends "layouts/dashboard.html" %}
{% load i18n %}

{% block breadcrumbs %}
<nav class="flex items-center gap-1.5 font-meta text-xs text-ruforum-text-muted" aria-label="Breadcrumb">
  <a href="{% url 'core:dashboard' %}" class="hover:text-ruforum-primary transition-colors">{% translate "Dashboard" %}</a>
  <svg class="crumb-sep" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="opacity-60">{% translate "Administration" %}</span>
  <svg class="crumb-sep" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="text-ruforum-text">{% translate "Notification templates" %}</span>
</nav>
{% endblock %}

{% block content %}
<header class="mb-6">
  <p class="font-meta text-[11px] font-semibold uppercase tracking-[0.14em] text-ruforum-primary">{% translate "Configuration" %}</p>
  <h1 class="mt-1 font-display text-3xl font-semibold leading-tight text-ruforum-text">{% translate "Notification templates" %}</h1>
  <p class="mt-1 max-w-[65ch] text-sm text-ruforum-text-muted">
    {% blocktranslate %}Edit subject lines, body copy, and call-to-action labels for every notification verb without a deployment. Custom rows take precedence over the seeded defaults; deactivating a row drops back to the defaults at runtime.{% endblocktranslate %}
  </p>
  <p class="mt-2 font-meta text-[11px] uppercase tracking-[0.10em] text-ruforum-text-muted">
    {{ seeded_count }} {% translate "active custom templates" %}
  </p>
</header>

<form method="get" class="mb-5 flex flex-wrap items-end gap-3 rounded-xl border border-ruforum-border bg-white p-4">
  <div class="grow min-w-[12rem]">
    <label for="tpl-search" class="field-label">{% translate "Search" %}</label>
    <input id="tpl-search" type="search" name="q" value="{{ filter_q }}" placeholder="{% translate 'Verb name or label…' %}">
  </div>
  <div class="flex flex-wrap items-end gap-1.5">
    <span class="field-label mb-1 mr-1">{% translate "Module" %}</span>
    <a href="?{% if filter_q %}q={{ filter_q }}{% endif %}" class="font-meta text-[11px] uppercase tracking-[0.10em] px-2.5 py-1.5 rounded {% if not filter_prefix %}bg-ruforum-primary text-white{% else %}border border-ruforum-border text-ruforum-text-muted hover:bg-ruforum-warm-hover{% endif %}">{% translate "All" %}</a>
    {% for value, label in prefixes %}
    <a href="?prefix={{ value }}{% if filter_q %}&q={{ filter_q }}{% endif %}"
       class="font-meta text-[11px] uppercase tracking-[0.10em] px-2.5 py-1.5 rounded {% if filter_prefix == value %}bg-ruforum-primary text-white{% else %}border border-ruforum-border text-ruforum-text hover:bg-ruforum-warm-hover{% endif %}">{{ label }}</a>
    {% endfor %}
  </div>
  <button type="submit" class="btn-primary btn-sm">{% translate "Filter" %}</button>
</form>

<section>
  <div class="editorial-head">
    <h2 class="editorial-head__title">{{ paginator.count|default:rows|length }} {% translate "verb(s)" %}</h2>
    <span class="editorial-head__aside font-meta text-[10px] uppercase tracking-[0.12em] text-ruforum-text-muted">{% translate "Click any row to edit" %}</span>
  </div>
  {% if rows %}
  <div class="table-frame">
    <table class="data-table">
      <thead>
        <tr>
          <th>{% translate "Verb" %}</th>
          <th>{% translate "Label" %}</th>
          <th>{% translate "Subject preview" %}</th>
          <th>{% translate "Status" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for r in rows %}
        <tr>
          <td>
            <a href="{% url 'core:notification_template_edit' r.verb %}" class="font-mono text-[11px] text-ruforum-primary hover:text-ruforum-primary-hover hover:underline">
              {{ r.verb }}
            </a>
          </td>
          <td class="text-ruforum-text">{{ r.label }}</td>
          <td class="text-sm text-ruforum-text-muted">
            {% if r.template %}{{ r.template.subject|truncatechars:60 }}{% else %}<span class="text-ruforum-text-muted/60">{% translate "(seed default)" %}</span>{% endif %}
          </td>
          <td>
            {% if r.template and r.template.is_active %}<span class="score-pass">{% translate "Custom" %}</span>
            {% elif r.template %}<span class="score-muted">{% translate "Inactive" %}</span>
            {% else %}<span class="score-warn">{% translate "Default" %}</span>{% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="plan-card">
    <div class="px-6 py-12 text-center">
      <p class="font-display text-xl font-semibold text-ruforum-text">{% translate "No matches" %}</p>
      <p class="mx-auto mt-2 max-w-[60ch] text-sm leading-relaxed text-ruforum-text-muted">{% translate "Try a different search or pick another module." %}</p>
    </div>
  </div>
  {% endif %}
</section>
{% endblock %}