{% extends "_base.html" %} {% block title %}Create Newsletter{% endblock %} {%
block heading %}Create Newsletter{% endblock %} {% block extra_styles %}
<link rel="stylesheet" href="/static/css/admin.css" /> {% endblock %} {% block
content %}
<div id="message"></div>

<div class="newsletter-stats">
  <div class="stat-card">
    <h4>Total Subscribers</h4>
    <div class="number" id="totalSubscribers">--</div>
  </div>
  <div class="stat-card">
    <h4>Active Subscribers</h4>
    <div class="number" id="activeSubscribers">--</div>
  </div>
  <div class="stat-card">
    <h4>Last Sent</h4>
    <div class="number" id="lastSent">--</div>
  </div>
</div>

<form id="newsletterForm">
  <div class="form-section">
    <h2>Newsletter Details</h2>
    <div class="form-row">
      <div class="form-group">
        <label for="subject">Subject Line *</label>
        <input
          type="text"
          id="subject"
          name="subject"
          required
          placeholder="Enter newsletter subject"
        />
      </div>
      <div class="form-group">
        <label for="senderName">Sender Name</label>
        <input
          type="text"
          id="senderName"
          name="sender_name"
          placeholder="Your Name"
        />
      </div>
    </div>
    <div class="form-group">
      <label for="content">Content *</label>
      <textarea
        id="content"
        name="content"
        required
        placeholder="Write your newsletter content here..."
      ></textarea>
    </div>
    <div class="form-row">
      <div class="form-group">
        <label for="sendDate">Send Date (optional)</label>
        <input type="datetime-local" id="sendDate" name="send_date" />
      </div>
      <div class="form-group">
        <label for="status">Status</label>
        <select id="status" name="status">
          <option value="draft">Draft</option>
          <option value="scheduled">Scheduled</option>
          <option value="sent">Sent</option>
        </select>
      </div>
    </div>
  </div>

  <div class="form-section">
    <h2>Actions</h2>
    <button
      type="button"
      class="btn btn-secondary"
      onclick="previewNewsletter()"
    >
      Preview
    </button>
    <button type="button" class="btn btn-primary" onclick="saveDraft()">
      Save Draft
    </button>
    <button type="button" class="btn btn-success" onclick="sendNewsletter()">
      Send Newsletter
    </button>
    <button type="button" class="btn btn-danger" onclick="clearForm()">
      Clear
    </button>
  </div>
</form>

<div id="previewSection" class="newsletter-preview hidden">
  <h3>Newsletter Preview</h3>
  <div id="previewContent"></div>
</div>
{% endblock %}{% block extra_scripts %}
<script src="/static/js/admin.js"></script>
{% endblock %}