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

{% block title %}Campaigns{% endblock %}

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

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-paper-plane"></i> Campaigns</h1>
      <p class="cp-page-head__sub">
        Your current send rate cap is <strong>{{ hourlyCap }}</strong>/hour and
        <strong>{{ dailyCap }}</strong>/day. A background task sends queued campaigns in
        batches within that cap.
      </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>

  <!-- ------------------------------------------------------------ new -->
  <div class="cp-card">
    <div class="cp-card__head"><h2 class="cp-card__title"><i class="fa-solid fa-plus"></i> New campaign</h2></div>
    <div class="cp-card__body">
      <form novalidate ng-submit="createCampaign()">
        <div class="cp-form-grid">
          <div class="cp-field">
            <label class="cp-label" for="emkCName">Name <span class="cp-req">*</span></label>
            <input id="emkCName" type="text" class="cp-input" ng-model="form.name" maxlength="150" required>
          </div>
          <div class="cp-field">
            <label class="cp-label" for="emkCList">List <span class="cp-req">*</span></label>
            <select id="emkCList" class="cp-select" ng-model="form.listId" required>
              <option value="">Select a list…</option>
              <option ng-repeat="l in lists" value="{$ l.id $}">{$ l.name $} ({$ l.subscriberCount $})</option>
            </select>
          </div>
          <div class="cp-field">
            <label class="cp-label" for="emkCTpl">Template <span class="cp-req">*</span></label>
            <select id="emkCTpl" class="cp-select" ng-model="form.templateId" required>
              <option value="">Select a template…</option>
              <option ng-repeat="t in templates" value="{$ t.id $}">{$ t.name $}</option>
            </select>
          </div>
          <div class="cp-field">
            <label class="cp-label" for="emkCHost">Sending host</label>
            <select id="emkCHost" class="cp-select" ng-model="form.sendingHostId">
              <option value="">Local Postfix (default)</option>
              <option ng-repeat="h in hosts" value="{$ h.id $}">{$ h.name $}</option>
            </select>
          </div>
          <div class="cp-field">
            <label class="cp-label" for="emkCFromName">From name</label>
            <input id="emkCFromName" type="text" class="cp-input" ng-model="form.fromName" maxlength="150">
          </div>
          <div class="cp-field">
            <label class="cp-label" for="emkCFromEmail">From address <span class="cp-req">*</span></label>
            <input id="emkCFromEmail" type="email" class="cp-input" ng-model="form.fromEmail" required
                   placeholder="news@yourdomain.com">
            <p class="cp-help">Must be on a domain you own here, with a mail domain configured.</p>
          </div>
        </div>
        <button type="submit" class="cp-btn cp-btn--primary" ng-disabled="busy">
          <span class="cp-spinner" ng-if="busy"></span> Create draft
        </button>
      </form>
    </div>
  </div>

  <!-- --------------------------------------------------------- listing -->
  <div class="cp-card">
    <div class="cp-card__head"><h2 class="cp-card__title"><i class="fa-solid fa-list"></i> Your campaigns</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">List</th><th scope="col">Status</th>
              <th scope="col">Progress</th><th scope="col" class="cp-nowrap">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in rows">
              <td><a href="" ng-click="select(row)" ng-bind="row.name"></a></td>
              <td ng-bind="row.listName"></td>
              <td><span cp-status-pill="row.status"></span></td>
              <td>
                {$ row.sent $}/{$ row.totalRecipients $} sent
                <span ng-if="row.failed"> · {$ row.failed $} failed</span>
                <p class="cp-muted" ng-if="row.lastError" ng-bind="row.lastError"></p>
              </td>
              <td class="cp-nowrap">
                <div class="cp-btn-group">
                  <button type="button" class="cp-btn cp-btn--accent cp-btn--sm" ng-if="row.status === 'draft'"
                          ng-click="openQueue(row)"><i class="fa-solid fa-paper-plane"></i> Queue</button>
                  <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-if="row.status === 'queued' || row.status === 'sending'"
                          ng-click="pause(row)"><i class="fa-solid fa-pause"></i></button>
                  <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-if="row.status === 'paused'"
                          ng-click="resume(row)"><i class="fa-solid fa-play"></i></button>
                  <button type="button" class="cp-btn cp-btn--danger cp-btn--sm"
                          ng-if="row.status === 'draft' || row.status === 'queued' || row.status === 'sending' || row.status === 'paused'"
                          ng-click="cancel(row)"><i class="fa-solid fa-ban"></i></button>
                  <button type="button" class="cp-btn cp-btn--danger cp-btn--sm" ng-if="row.status !== 'sending'"
                          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-paper-plane"></i>
        <h4>No campaigns yet</h4>
      </div>
    </div>
  </div>

  <!-- --------------------------------------------------------- queue modal -->
  <div class="cp-card" ng-if="queuing" ng-cloak>
    <div class="cp-card__head"><h2 class="cp-card__title">Queue "{$ queuing.name $}"</h2></div>
    <div class="cp-card__body">
      <div class="cp-field">
        <label class="cp-label">
          <input type="radio" ng-model="queueForm.mode" value="now"> Send as soon as possible
        </label>
      </div>
      <div class="cp-field">
        <label class="cp-label">
          <input type="radio" ng-model="queueForm.mode" value="later"> Schedule for later
        </label>
        <input type="datetime-local" class="cp-input" ng-model="queueForm.scheduledAt" ng-if="queueForm.mode === 'later'">
      </div>
      <div class="cp-btn-group">
        <button type="button" class="cp-btn cp-btn--primary" ng-click="submitQueue()" ng-disabled="busy">Queue campaign</button>
        <button type="button" class="cp-btn cp-btn--ghost" ng-click="closeQueue()">Cancel</button>
      </div>
    </div>
  </div>

  <!-- --------------------------------------------------------- detail -->
  <div class="cp-card" ng-if="selected" ng-cloak>
    <div class="cp-card__head"><h2 class="cp-card__title">{$ selected.name $}</h2></div>
    <div class="cp-card__body">
      <div cp-progress="progress.progress"></div>
      <p ng-bind="progress.currentStatus"></p>
      <div class="cp-table-wrap" ng-if="recipientRows.length">
        <table class="cp-table">
          <thead><tr><th scope="col">Email</th><th scope="col">Status</th><th scope="col">Error</th></tr></thead>
          <tbody>
            <tr ng-repeat="r in recipientRows">
              <td class="cp-mono" ng-bind="r.email"></td>
              <td ng-bind="r.status"></td>
              <td class="cp-muted" ng-bind="r.lastError"></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

</div>
{% endblock %}

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