{% extends "components/base.html" %}

{% block main_area %}
  <section class="pt-3">
    <h1>Message Scheduler</h1>

    <!-- Add Message Button -->
    <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal" data-bs-target="#messageModal">
      Add Message
    </button>

    <!-- Add Message Modal -->
    <div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="messageModalLabel">Add New Message</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form method="post" action="{% url 'mm_msg:message_create' %}">
              {% csrf_token %}
              <div class="mb-3">
                <label for="sendTime" class="form-label">Send Time</label>
                <input type="datetime-local" id="sendTime" name="send_time" class="form-control" required="required">
              </div>
              <div class="mb-3">
                <label for="title" class="form-label">Title</label>
                <input type="text" id="title" name="title" class="form-control" placeholder="Enter the message title" required="required">
              </div>
              <div class="mb-3">
                <label for="text" class="form-label">Message Text</label>
                <textarea id="text" name="text" class="form-control" rows="4" placeholder="Enter the message text" required="required"></textarea>
              </div>

              <button type="submit" class="btn btn-primary w-100">Save Message</button>
            </form>
          </div>
        </div>
      </div>
    </div>

    <hr>

    <!-- Scheduled Messages -->
    <h2>Scheduled Messages</h2>
    <table class="table">
      <thead>
        <tr>
          <th>Title</th>
          <th>Message</th>
          <th>Send Time</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        {% for message in messages %}
          <tr>
            <td>{{ message.title }}</td>
            <td>{{ message.text }}</td>
            <td>{{ message.send_time }}</td>
            <td>{{ message.is_sent }}</td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="4">No messages scheduled.</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </section>
{% endblock %}