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

{% block title %}Email Marketing settings{% endblock %}

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

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-gear"></i> Email Marketing settings</h1>
      <p class="cp-page-head__sub">Administrator only: the global switch, default rate caps, per-user overrides and a cross-account activity report.</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">Global switch &amp; default caps</h2></div>
    <div class="cp-card__body">
      <form novalidate ng-submit="saveGlobal()">
        <div class="cp-form-grid">
          <div class="cp-field">
            <label class="cp-label">
              <input type="checkbox" ng-model="global.enabled"> Email Marketing enabled for everyone
            </label>
          </div>
          <div class="cp-field">
            <label class="cp-label" for="emkHourly">Default hourly cap</label>
            <input id="emkHourly" type="number" class="cp-input" ng-model="global.defaultHourlyCap" min="1">
          </div>
          <div class="cp-field">
            <label class="cp-label" for="emkDaily">Default daily cap</label>
            <input id="emkDaily" type="number" class="cp-input" ng-model="global.defaultDailyCap" min="1">
          </div>
        </div>
        <button type="submit" class="cp-btn cp-btn--primary" ng-disabled="busy">Save</button>
      </form>
    </div>
  </div>

  <div class="cp-card">
    <div class="cp-card__head"><h2 class="cp-card__title">Per-user override</h2></div>
    <div class="cp-card__body">
      <div class="cp-form-grid">
        <div class="cp-field">
          <label class="cp-label" for="emkUserId">User ID</label>
          <input id="emkUserId" type="number" class="cp-input" ng-model="overrideUserId">
        </div>
        <div class="cp-field" style="align-self:end;">
          <button type="button" class="cp-btn cp-btn--ghost" ng-click="loadOverride()" ng-disabled="!overrideUserId">Load</button>
        </div>
      </div>
      <div ng-if="override" ng-cloak>
        <div class="cp-form-grid">
          <div class="cp-field">
            <label class="cp-label"><input type="checkbox" ng-model="override.enabled"> Enabled for this user</label>
          </div>
          <div class="cp-field">
            <label class="cp-label" for="emkUserHourly">Hourly cap override (blank = default)</label>
            <input id="emkUserHourly" type="number" class="cp-input" ng-model="override.hourlyCap" min="1">
          </div>
          <div class="cp-field">
            <label class="cp-label" for="emkUserDaily">Daily cap override (blank = default)</label>
            <input id="emkUserDaily" type="number" class="cp-input" ng-model="override.dailyCap" min="1">
          </div>
        </div>
        <button type="button" class="cp-btn cp-btn--primary" ng-click="saveOverride()" ng-disabled="busy">Save override</button>
      </div>
    </div>
  </div>

  <div class="cp-card">
    <div class="cp-card__head"><h2 class="cp-card__title">Recent campaigns (all users)</h2></div>
    <div class="cp-card__body cp-card__body--flush">
      <div class="cp-table-wrap" ng-if="report.length">
        <table class="cp-table">
          <thead>
            <tr>
              <th scope="col">Owner</th><th scope="col">Campaign</th><th scope="col">List</th>
              <th scope="col">From</th><th scope="col">Status</th>
              <th scope="col" class="cp-num">Sent</th><th scope="col" class="cp-num">Failed</th>
              <th scope="col" class="cp-num">Total</th><th scope="col">Created</th>
            </tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in report">
              <td ng-bind="row.owner"></td>
              <td ng-bind="row.name"></td>
              <td ng-bind="row.listName"></td>
              <td class="cp-mono" ng-bind="row.fromEmail"></td>
              <td><span cp-status-pill="row.status"></span></td>
              <td class="cp-num" ng-bind="row.sent"></td>
              <td class="cp-num" ng-bind="row.failed"></td>
              <td class="cp-num" ng-bind="row.totalRecipients"></td>
              <td ng-bind="row.dateCreated | date:'medium'"></td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="cp-empty" ng-if="!report.length && !busy">
        <i class="fa-solid fa-inbox"></i>
        <h4>No campaigns yet</h4>
      </div>
    </div>
  </div>

</div>
{% endblock %}

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