{% extends "ui/templates/base/layout.html" %}
{% block content %}
<div class="space-y-6">
  <div class="rounded-2xl bg-white p-6 shadow-card ring-1 ring-slate-200">
    <div class="flex items-center justify-between gap-3"><div><h2 class="text-xl font-semibold text-slate-900">Email Templates</h2><p class="mt-1 text-sm text-slate-500">Use tokens like {{ '{{ firm_name }}' }}, {{ '{{ user_name }}' }}, {{ '{{ otp_code }}' }}, {{ '{{ reset_link }}' }}, {{ '{{ invite_link }}' }}, {{ '{{ expiry_minutes }}' }}, {{ '{{ expiry_hours }}' }} and {{ '{{ client_name }}' }}.</p></div><a href="/email/settings" class="rounded-xl border border-slate-300 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Settings</a></div>
  </div>
  {% for tpl in templates_rows %}
  <form method="post" action="/email/templates/{{ tpl.id }}" class="rounded-2xl bg-white p-6 shadow-card ring-1 ring-slate-200">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
    <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between"><div><h3 class="font-semibold text-slate-900">{{ tpl.template_name }}</h3><div class="text-xs text-slate-500">{{ tpl.template_code }}</div></div><label class="flex items-center gap-2 text-sm"><input type="checkbox" name="is_active" value="1" {% if tpl.is_active %}checked{% endif %}> Active</label></div>
    <label class="mt-4 block"><span class="text-sm font-medium text-slate-700">Subject</span><input name="subject_template" value="{{ tpl.subject_template }}" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2"></label>
    <label class="mt-4 block"><span class="text-sm font-medium text-slate-700">Body</span><textarea name="body_template" rows="8" class="mt-1 w-full rounded-xl border border-slate-300 px-3 py-2 font-mono text-sm">{{ tpl.body_template }}</textarea></label>
    <div class="mt-4 flex justify-end"><button class="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Save Template</button></div>
  </form>
  {% else %}
  <div class="rounded-2xl bg-white p-8 text-center text-slate-500 shadow-card ring-1 ring-slate-200">No templates found. Open Email Settings once to seed defaults.</div>
  {% endfor %}
</div>
{% endblock %}