{% extends "cms/base.html" %}
{% block title %}Email Templates{% endblock %}
{% block content %}

<div class="cms-section-header">
  <div>
    <h2 style="font-size:1.25rem;font-weight:700;color:var(--cms-text);margin:0">Email Templates</h2>
    <p style="color:var(--cms-muted);font-size:.82rem;margin:.2rem 0 0">Edit the HTML sent to customers and admins</p>
  </div>
</div>

<div style="display:flex;gap:0;border-bottom:2px solid var(--cms-border);margin-bottom:1.25rem">
  <a href="{% url 'cms_email_log' %}" style="padding:.5rem 1.1rem;font-size:.85rem;color:var(--cms-muted);text-decoration:none">Send Log</a>
  <span style="padding:.5rem 1.1rem;font-size:.85rem;font-weight:600;color:var(--cms-accent);border-bottom:2px solid var(--cms-accent);margin-bottom:-2px">Templates</span>
  <a href="{% if tenant.primary_domain %}https://{{ tenant.primary_domain }}{% endif %}/products/email-preview/anything/" target="_blank" style="padding:.5rem 1.1rem;font-size:.85rem;color:var(--cms-muted);text-decoration:none">Previews <i class="fa-solid fa-arrow-up-right-from-square" style="font-size:.65rem"></i></a>
</div>

<div style="background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:.75rem 1rem;margin-bottom:1.25rem;font-size:.82rem;color:#78350f">
  <i class="fa-solid fa-triangle-exclamation me-1"></i>
  These are Django HTML templates. They support <code>{% templatetag openvariable %} variable {% templatetag closevariable %}</code> and <code>{% templatetag openblock %} tag {% templatetag closeblock %}</code> syntax.
  To add a new email type, tell the developer what trigger it needs and what data it should show.
</div>

<div class="cms-card" style="padding:0;overflow:hidden">
  <table class="cms-table">
    <thead>
      <tr>
        <th>Email</th>
        <th>File</th>
        <th>Trigger</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for item in items %}
      <tr>
        <td style="font-weight:600">{{ item.label }}</td>
        <td style="font-size:.78rem;color:var(--cms-muted);font-family:monospace">{{ item.filename }}</td>
        <td style="font-size:.78rem;color:var(--cms-muted)">
          {% if item.key == 'order-confirmation' %}Customer pays an order
          {% elif item.key == 'order-admin' %}New order received (goes to admin)
          {% elif item.key == 'quote' %}You send a quote from Assessments
          {% elif item.key == 'deal' %}You send a Deal Agreement link
          {% endif %}
        </td>
        <td style="text-align:right;white-space:nowrap">
          <a href="{% if tenant.primary_domain %}https://{{ tenant.primary_domain }}{% endif %}/products/email-preview/{{ item.preview_slug }}/" target="_blank"
             style="font-size:.78rem;color:var(--cms-muted);text-decoration:none;margin-right:.75rem">
            <i class="fa-solid fa-eye me-1"></i>Preview
          </a>
          <a href="{% url 'cms_email_template_edit' item.key %}"
             style="font-size:.78rem;color:var(--cms-accent);text-decoration:none">
            <i class="fa-solid fa-pen me-1"></i>Edit
          </a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% endblock %}