{% extends "baseTemplate/index.html" %}
{% load static %}

{% block title %}Email templates{% endblock %}

{% block content %}
<div ng-controller="emkTemplatesController">

  <ul class="cp-breadcrumb">
    <li>Email Marketing</li>
    <li>Templates</li>
  </ul>

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-file-lines"></i> Email templates</h1>
      <p class="cp-page-head__sub">
        Use <code>{$ '{{email}}' $}</code>, <code>{$ '{{name}}' $}</code> and
        <code>{$ '{{unsubscribe_url}}' $}</code> anywhere in the subject or body &mdash;
        they are the only placeholders that get substituted; everything else in the
        body is sent exactly as written.
      </p>
    </div>
  </div>

  <div class="cp-alert cp-alert--danger" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fa-solid fa-triangle-exclamation"></i>
    <p ng-bind="errorMessage"></p>
  </div>

  <div class="cp-card">
    <div class="cp-card__head"><h2 class="cp-card__title"><i class="fa-solid fa-list"></i> Templates</h2></div>
    <div class="cp-card__body cp-card__body--flush">
      <div class="cp-table-wrap" ng-if="rows.length">
        <table class="cp-table">
          <thead><tr><th scope="col">Name</th><th scope="col">Subject</th><th scope="col" class="cp-nowrap">Actions</th></tr></thead>
          <tbody>
            <tr ng-repeat="row in rows">
              <td ng-bind="row.name"></td>
              <td ng-bind="row.subject"></td>
              <td class="cp-nowrap">
                <div class="cp-btn-group">
                  <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="edit(row)"><i class="fa-solid fa-pen"></i></button>
                  <button type="button" class="cp-btn cp-btn--danger cp-btn--sm" ng-click="remove(row)"><i class="fa-solid fa-trash"></i></button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="cp-empty" ng-if="!rows.length && !busy">
        <i class="fa-solid fa-file-lines"></i>
        <h4>No templates yet</h4>
      </div>
    </div>
  </div>

  <div class="cp-card">
    <div class="cp-card__head">
      <h2 class="cp-card__title">{$ form.id ? 'Edit template' : 'New template' $}</h2>
    </div>
    <div class="cp-card__body">
      <form novalidate ng-submit="save()">
        <div class="cp-form-grid">
          <div class="cp-field">
            <label class="cp-label" for="emkTplName">Name <span class="cp-req">*</span></label>
            <input id="emkTplName" type="text" class="cp-input" ng-model="form.name" maxlength="150" required>
          </div>
          <div class="cp-field" style="grid-column: span 2;">
            <label class="cp-label" for="emkTplSubject">Subject <span class="cp-req">*</span></label>
            <input id="emkTplSubject" type="text" class="cp-input" ng-model="form.subject" maxlength="255" required>
          </div>
        </div>
        <div class="cp-field">
          <label class="cp-label" for="emkTplHtml">HTML body</label>
          <textarea id="emkTplHtml" class="cp-textarea cp-mono" rows="8" ng-model="form.htmlBody"></textarea>
        </div>
        <div class="cp-field">
          <label class="cp-label" for="emkTplText">Plain-text body</label>
          <textarea id="emkTplText" class="cp-textarea cp-mono" rows="6" ng-model="form.textBody"></textarea>
        </div>
        <div class="cp-btn-group">
          <button type="submit" class="cp-btn cp-btn--primary" ng-disabled="busy">
            <span class="cp-spinner" ng-if="busy"></span> {$ form.id ? 'Save changes' : 'Create template' $}
          </button>
          <button type="button" class="cp-btn cp-btn--ghost" ng-click="preview()" ng-disabled="busy">
            <i class="fa-solid fa-eye"></i> Preview
          </button>
          <button type="button" class="cp-btn cp-btn--ghost" ng-click="resetForm()" ng-if="form.id" ng-disabled="busy">
            Cancel
          </button>
        </div>
      </form>

      <div class="cp-card" ng-if="previewResult" ng-cloak style="margin-top:16px;">
        <div class="cp-card__head"><h3 class="cp-card__title">Preview (sample subscriber)</h3></div>
        <div class="cp-card__body">
          <p><strong>Subject:</strong> <span ng-bind="previewResult.subject"></span></p>
          <div ng-if="previewResult.htmlBody">
            <p class="cp-label">HTML</p>
            <iframe cp-html-preview="previewResult.htmlBody" sandbox=""
                    style="width:100%;min-height:220px;border:1px solid var(--cp-border);border-radius:6px;background:#fff;"
                    title="HTML preview"></iframe>
          </div>
          <div ng-if="previewResult.textBody">
            <p class="cp-label">Plain text</p>
            <pre class="cp-mono">{$ previewResult.textBody $}</pre>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script src="{% static 'emailMarketing/emailMarketing.js' %}"></script>
{% endblock %}