{% 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>
  <a href="{% url 'core:notification_template_list' %}" class="hover:text-ruforum-primary transition-colors">{% translate "Notification templates" %}</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="text-ruforum-text font-mono text-[11px]">{{ verb }}</span>
</nav>
{% endblock %}

{% block content %}
<div class="mx-auto max-w-3xl">

  <header class="mb-6">
    <p class="font-meta text-[11px] font-semibold uppercase tracking-[0.14em] text-ruforum-primary">{% translate "Edit template" %}</p>
    <h1 class="mt-1 font-display text-3xl font-semibold leading-tight text-ruforum-text">{{ instance.name|default:verb }}</h1>
    <p class="mt-1 font-mono text-xs text-ruforum-text-muted">{{ verb }}</p>
  </header>

  <div class="mb-5 flex items-start gap-3 rounded-lg bg-ruforum-warm-hover/60 px-4 py-3 text-sm text-ruforum-text-muted">
    <svg class="mt-0.5 h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.75" aria-hidden="true">
      <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z"/>
    </svg>
    <p>
      {% blocktranslate %}Subject and body fields use Django template syntax — wrap variables like <code>{{ recipient_name }}</code> or <code>{{ course_title }}</code>. The available variables depend on the verb; see the seeded defaults for examples.{% endblocktranslate %}
    </p>
  </div>

  <form method="post" class="card divide-y divide-ruforum-border">
    {% csrf_token %}
    {% if form.non_field_errors %}
    <div class="px-6 py-3 border-b border-red-200 bg-red-50 text-sm text-red-700">{{ form.non_field_errors }}</div>
    {% endif %}

    <div class="px-6 py-4">
      <p class="form-section-label">{% translate "Identity" %}</p>
    </div>
    <div class="px-6 py-5 space-y-5">
      <div>
        <label for="{{ form.name.id_for_label }}" class="field-label">{% translate "Name" %}</label>
        {{ form.name }}
        <p class="field-hint">{% translate "Human-readable label shown when listing templates." %}</p>
        {% if form.name.errors %}<p class="field-error">{{ form.name.errors.0 }}</p>{% endif %}
      </div>
    </div>

    <div class="px-6 py-4">
      <p class="form-section-label">{% translate "Subject &amp; preview" %}</p>
    </div>
    <div class="px-6 py-5 space-y-5">
      <div>
        <label for="{{ form.subject.id_for_label }}" class="field-label">{% translate "Email subject" %}</label>
        {{ form.subject }}
        {% if form.subject.errors %}<p class="field-error">{{ form.subject.errors.0 }}</p>{% endif %}
      </div>
      <div class="grid gap-5 sm:grid-cols-2">
        <div>
          <label for="{{ form.headline_default.id_for_label }}" class="field-label">{% translate "Headline (default)" %}</label>
          {{ form.headline_default }}
          <p class="field-hint">{% translate "Bold opener used in the in-app card." %}</p>
        </div>
        <div>
          <label for="{{ form.action_label_default.id_for_label }}" class="field-label">{% translate "Action label (default)" %}</label>
          {{ form.action_label_default }}
          <p class="field-hint">{% translate "Button text — e.g. \"Open course\", \"Review application\"." %}</p>
        </div>
      </div>
    </div>

    <div class="px-6 py-4">
      <p class="form-section-label">{% translate "Body" %}</p>
    </div>
    <div class="px-6 py-5 space-y-5">
      <div>
        <label for="{{ form.body_text.id_for_label }}" class="field-label">{% translate "Plain-text body" %}</label>
        {{ form.body_text }}
        <p class="field-hint">{% translate "Falls back to the message argument when blank. Used when an email client can't render HTML." %}</p>
        {% if form.body_text.errors %}<p class="field-error">{{ form.body_text.errors.0 }}</p>{% endif %}
      </div>
      <div>
        <label for="{{ form.body_html.id_for_label }}" class="field-label">{% translate "HTML body" %}</label>
        {{ form.body_html }}
        <p class="field-hint">{% translate "Optional. Wrapped in the generic email shell when set. Use the same template variables as the subject." %}</p>
        {% if form.body_html.errors %}<p class="field-error">{{ form.body_html.errors.0 }}</p>{% endif %}
      </div>
    </div>

    <div class="px-6 py-4">
      <p class="form-section-label">{% translate "Status" %}</p>
    </div>
    <div class="px-6 py-5">
      <label class="flex items-start gap-3 rounded-lg border border-ruforum-border bg-ruforum-warm-hover/40 px-4 py-3">
        {{ form.is_active }}
        <span>
          <span class="block font-medium text-ruforum-text">{% translate "Active" %}</span>
          <span class="mt-0.5 block text-xs text-ruforum-text-muted">
            {% blocktranslate %}When off, the platform falls back to the seeded default copy for this verb.{% endblocktranslate %}
          </span>
        </span>
      </label>
    </div>

    <div class="flex items-center justify-between gap-3 px-6 py-4">
      <a href="{% url 'core:notification_template_list' %}" class="btn-secondary">{% translate "Cancel" %}</a>
      <button type="submit" class="btn-primary">{% translate "Save template" %}</button>
    </div>
  </form>

</div>
{% endblock %}