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

{% block title %}Email lists{% endblock %}

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

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

  <div class="cp-page-head">
    <div>
      <h1 class="cp-page-head__title"><i class="fa-solid fa-address-book"></i> Email lists</h1>
      <p class="cp-page-head__sub">Create a list, then import or add subscribers to it.</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>

  <!-- --------------------------------------------------------------- lists -->
  <div class="cp-card">
    <div class="cp-card__head">
      <h2 class="cp-card__title"><i class="fa-solid fa-list"></i> Lists</h2>
    </div>
    <div class="cp-card__body">
      <form novalidate ng-submit="createList()" class="cp-form-grid" style="margin-bottom:14px;">
        <div class="cp-field">
          <label class="cp-label" for="emkNewList">New list name</label>
          <input id="emkNewList" type="text" class="cp-input" ng-model="newListName" maxlength="150">
        </div>
        <div class="cp-field" style="align-self:end;">
          <button type="submit" class="cp-btn cp-btn--primary" ng-disabled="busy || !newListName">
            <i class="fa-solid fa-plus"></i> Create list
          </button>
        </div>
      </form>

      <div class="cp-table-wrap" ng-if="listRows.length">
        <table class="cp-table">
          <thead>
            <tr><th scope="col">Name</th><th scope="col" class="cp-num">Subscribers</th><th scope="col" class="cp-nowrap">Actions</th></tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in listRows" ng-class="{'is-active': selected && selected.id === row.id}">
              <td>
                <a href="" ng-click="select(row)" ng-bind="row.name"></a>
                <input ng-if="ui.renaming === row.id" type="text" class="cp-input" ng-model="ui.renameValue" style="margin-top:4px;">
              </td>
              <td class="cp-num" ng-bind="row.subscriberCount"></td>
              <td class="cp-nowrap">
                <div class="cp-btn-group" ng-if="ui.renaming !== row.id">
                  <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="beginRename(row)"><i class="fa-solid fa-pen"></i></button>
                  <a class="cp-btn cp-btn--ghost cp-btn--sm" ng-href="/emailmarketing/exportSubscribers?listId={$ row.id $}"><i class="fa-solid fa-file-export"></i></a>
                  <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>
                <div class="cp-btn-group" ng-if="ui.renaming === row.id">
                  <button type="button" class="cp-btn cp-btn--success cp-btn--sm" ng-click="saveRename(row)"><i class="fa-solid fa-check"></i></button>
                  <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="cancelRename()"><i class="fa-solid fa-xmark"></i></button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="cp-empty" ng-if="!listRows.length && !busy">
        <i class="fa-solid fa-address-book"></i>
        <h4>No lists yet</h4>
        <p>Create one above to start adding subscribers.</p>
      </div>
    </div>
  </div>

  <!-- ---------------------------------------------------------- subscribers -->
  <div class="cp-card" ng-if="selected">
    <div class="cp-card__head">
      <div>
        <h2 class="cp-card__title"><i class="fa-solid fa-users"></i> Subscribers of "{$ selected.name $}"</h2>
        <p class="cp-card__sub">{$ subscriberTotal $} total</p>
      </div>
    </div>
    <div class="cp-card__body">

      <div class="cp-form-grid" style="margin-bottom:14px;">
        <div class="cp-field">
          <label class="cp-label" for="emkSubEmail">Add one subscriber</label>
          <input id="emkSubEmail" type="email" class="cp-input" ng-model="newSubscriber.email" placeholder="name@example.com">
        </div>
        <div class="cp-field">
          <label class="cp-label" for="emkSubName">Name (optional)</label>
          <input id="emkSubName" type="text" class="cp-input" ng-model="newSubscriber.name">
        </div>
        <div class="cp-field" style="align-self:end;">
          <button type="button" class="cp-btn cp-btn--primary" ng-click="addSubscriber()" ng-disabled="busy || !newSubscriber.email">
            <i class="fa-solid fa-user-plus"></i> Add
          </button>
        </div>
      </div>

      <form novalidate ng-submit="importCsv()" class="cp-form-grid" style="margin-bottom:14px;">
        <div class="cp-field">
          <label class="cp-label" for="emkCsvFile">Import CSV (email[,name] per row, max 5&nbsp;MB)</label>
          <input id="emkCsvFile" type="file" accept=".csv,text/csv" cp-file-model="ui.csvFile">
        </div>
        <div class="cp-field">
          <label class="cp-label">
            <input type="checkbox" ng-model="ui.csvHasNameColumn"> File has a name column
          </label>
        </div>
        <div class="cp-field" style="align-self:end;">
          <button type="submit" class="cp-btn cp-btn--accent" ng-disabled="busy || !ui.csvFile">
            <i class="fa-solid fa-file-import"></i> Import
          </button>
        </div>
      </form>
      <div class="cp-alert" ng-if="importResult" ng-cloak
           ng-class="importResult.skipped ? 'cp-alert--warning' : 'cp-alert--success'">
        <p>
          Imported {$ importResult.imported $}, updated {$ importResult.updated $}, skipped {$ importResult.skipped $}.
        </p>
        <p ng-repeat="err in importResult.errors" class="cp-muted" ng-bind="err"></p>
      </div>

      <div class="cp-form-grid" style="margin-bottom:10px;">
        <div class="cp-field">
          <label class="cp-label" for="emkSubSearch">Search</label>
          <input id="emkSubSearch" type="text" class="cp-input" ng-model="query.q" ng-change="loadSubscribers()">
        </div>
        <div class="cp-field">
          <label class="cp-label" for="emkSubState">State</label>
          <select id="emkSubState" class="cp-select" ng-model="query.state" ng-change="loadSubscribers()">
            <option value="">All</option>
            <option value="active">Active</option>
            <option value="unsubscribed">Unsubscribed</option>
            <option value="bounced">Bounced</option>
            <option value="complained">Complained</option>
          </select>
        </div>
      </div>

      <div class="cp-table-wrap" ng-if="subscriberRows.length">
        <table class="cp-table">
          <thead>
            <tr><th scope="col">Email</th><th scope="col">Name</th><th scope="col">State</th><th scope="col" class="cp-nowrap">Actions</th></tr>
          </thead>
          <tbody>
            <tr ng-repeat="row in subscriberRows">
              <td class="cp-mono" ng-bind="row.email"></td>
              <td ng-bind="row.name"></td>
              <td>
                <select class="cp-select" ng-model="row.state" ng-change="changeState(row)">
                  <option value="active">Active</option>
                  <option value="unsubscribed">Unsubscribed</option>
                  <option value="bounced">Bounced</option>
                  <option value="complained">Complained</option>
                </select>
              </td>
              <td class="cp-nowrap">
                <button type="button" class="cp-btn cp-btn--danger cp-btn--sm" ng-click="removeSubscriber(row)">
                  <i class="fa-solid fa-trash"></i>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="cp-empty" ng-if="!subscriberRows.length && !busy">
        <i class="fa-solid fa-users"></i>
        <h4>No subscribers match</h4>
      </div>

      <div class="cp-btn-group" ng-if="subscriberTotal > subscriberRows.length" style="margin-top:10px;">
        <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="prevPage()" ng-disabled="query.page <= 1">Previous</button>
        <span class="cp-muted">Page {$ query.page $}</span>
        <button type="button" class="cp-btn cp-btn--ghost cp-btn--sm" ng-click="nextPage()" ng-disabled="query.page * query.pageSize >= subscriberTotal">Next</button>
      </div>

    </div>
  </div>

</div>
{% endblock %}

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