{% extends "cms/base.html" %}
{% block title %}{{ label }} — Email Template{% endblock title %}

{% block extra_head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/theme/dracula.min.css">
<style>
  .section-head {
    padding:.75rem 1rem;border-bottom:1px solid var(--cms-border);
    font-size:.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:var(--cms-muted);
  }
  .CodeMirror { height:calc(100vh - 280px);min-height:420px;font-size:13px;font-family:'JetBrains Mono','Fira Code',monospace; }
  .CodeMirror-scroll { padding-bottom:1rem; }
</style>
{% endblock extra_head %}

{% block cms_content %}

<div class="cms-section-header">
  <h2>
    <a href="{% url 'cms_homepage' %}" style="color:var(--cms-muted);font-weight:400;text-decoration:none">Homepage</a>
    <span style="color:var(--cms-muted);font-weight:400"> / </span>
    {{ label }}
  </h2>
  <a href="{% url 'cms_homepage' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
</div>

{% if messages %}
{% for msg in messages %}
<div style="background:{% if msg.tags == 'success' %}#d1fae5{% else %}#fee2e2{% endif %};border:1px solid {% if msg.tags == 'success' %}#6ee7b7{% else %}#fca5a5{% endif %};border-radius:8px;padding:.65rem 1rem;margin-bottom:1rem;font-size:.82rem;color:{% if msg.tags == 'success' %}#065f46{% else %}#b91c1c{% endif %}">
  {{ msg }}
</div>
{% endfor %}
{% endif %}

{% if error %}
<div style="background:#fee2e2;border:1px solid #fca5a5;border-radius:8px;padding:.65rem 1rem;margin-bottom:1rem;font-size:.82rem;color:#b91c1c">
  <i class="fa-solid fa-circle-xmark me-1"></i>{{ error }}
</div>
{% endif %}

<form id="tpl-form" method="post">
{% csrf_token %}
<input type="hidden" name="content" id="content-input">

<div class="row g-3">

  <div class="col-lg-8">
    <div class="cms-card" style="padding:0;overflow:hidden">
      <div class="section-head" style="display:flex;align-items:center;justify-content:space-between">
        <span><i class="fa-solid fa-code me-2"></i>HTML / Django Template</span>
        <span style="font-size:.7rem;color:var(--cms-muted);font-family:monospace;letter-spacing:0;text-transform:none;font-weight:400">{{ filename }}&nbsp;&nbsp;&middot;&nbsp;&nbsp;Ctrl+S / Cmd+S to save</span>
      </div>
      <div style="border-radius:0 0 8px 8px;overflow:hidden">
        <textarea id="code-editor" name="content_raw">{{ content }}</textarea>
      </div>
    </div>
  </div>

  <div class="col-lg-4">

    <div class="cms-card" style="margin-bottom:1rem">
      <button type="button" onclick="submitForm()" class="btn-cms w-100" style="text-align:center">
        <i class="fa-solid fa-floppy-disk me-1"></i>Save Template
      </button>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Preview</div>
      <div style="padding:.75rem 1rem">
        <a href="{% if tenant.primary_domain %}https://{{ tenant.primary_domain }}{% endif %}/products/email-preview/{{ preview_slug }}/" target="_blank"
           class="btn-cms-ghost w-100" style="display:block;text-align:center">
          <i class="fa-solid fa-eye me-1"></i>Open Preview
        </a>
      </div>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Details</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td style="width:90px;color:var(--cms-muted);font-size:.8rem;font-weight:600;padding:.6rem 1rem;vertical-align:top">Trigger</td>
            <td style="padding:.6rem 1rem .6rem 0;font-size:.82rem;color:var(--cms-text)">{{ trigger_desc }}</td>
          </tr>
          <tr>
            <td style="color:var(--cms-muted);font-size:.8rem;font-weight:600;padding:.6rem 1rem;vertical-align:middle">File</td>
            <td style="padding:.6rem 1rem .6rem 0;font-size:.78rem;color:var(--cms-muted);font-family:monospace">{{ filename }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div style="background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:.65rem 1rem;font-size:.78rem;color:#78350f;line-height:1.5">
      <i class="fa-solid fa-triangle-exclamation me-1"></i>
      These are Django HTML templates. They support <code>&#123;&#123; variable &#125;&#125;</code> and <code>&#123;% tag %&#125;</code> syntax.
    </div>

  </div>
</div>
</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/xml/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/css/css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/edit/matchbrackets.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.16/addon/edit/closetag.min.js"></script>
<script>
  const editor = CodeMirror.fromTextArea(document.getElementById('code-editor'), {
    mode: 'htmlmixed',
    theme: 'dracula',
    lineNumbers: true,
    matchBrackets: true,
    autoCloseTags: true,
    lineWrapping: false,
    tabSize: 2,
    indentWithTabs: false,
    extraKeys: {
      'Ctrl-S': function() { submitForm(); },
      'Cmd-S':  function() { submitForm(); },
    },
  });

  function submitForm() {
    document.getElementById('content-input').value = editor.getValue();
    document.getElementById('tpl-form').submit();
  }
</script>
{% endblock cms_content %}