{% extends "layouts/base.html" %}
{% load static %}

{% block title %}
  Send Notification - Stream Processor
{% endblock %}

{% block content %}
<div class="container-fluid" style="max-width: 900px;">
  <!-- Header -->
  <div class="d-flex align-items-start justify-content-between my-4">
    <div>
      <h1 class="h3 fw-bold mb-1">
        <i class="fas fa-paper-plane me-2 text-success"></i>Send Notification
      </h1>
      <p class="text-muted mb-0">
        Send a notification through one of your configured channels.
      </p>
    </div>
    <div>
      <a href="{% url 'notifications:notification_list' %}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-2"></i>Back to Notifications
      </a>
    </div>
  </div>

  <form id="notificationForm" method="post">
    {% csrf_token %}

    <!-- Notification Details -->
    <div class="card shadow-sm mb-4">
      <div class="card-header bg-white">
        <h6 class="mb-0">
          <i class="fas fa-envelope me-2 text-primary"></i>Notification Details
        </h6>
      </div>
      <div class="card-body">
        <!-- Channel -->
        <div class="mb-3">
          <label for="{{ form.channel.id_for_label }}" class="form-label">
            Channel <span class="text-danger">*</span>
          </label>
          {{ form.channel }}
          {% if form.channel.errors %}
            <div class="text-danger small mt-1">
              {{ form.channel.errors.0 }}
            </div>
          {% endif %}
          <div class="form-text">
            Select the notification channel to send through.
          </div>
        </div>

        <!-- Message -->
        <div class="mb-3">
          <label for="{{ form.message.id_for_label }}" class="form-label">
            Message <span class="text-danger">*</span>
          </label>
          {{ form.message }}
          {% if form.message.errors %}
            <div class="text-danger small mt-1">
              {{ form.message.errors.0 }}
            </div>
          {% endif %}
          <div class="form-text">
            Enter the notification message content.
          </div>
        </div>

        <!-- Priority -->
        <div class="mb-3">
          <label for="{{ form.priority.id_for_label }}" class="form-label">
            Priority <span class="text-danger">*</span>
          </label>
          {{ form.priority }}
          {% if form.priority.errors %}
            <div class="text-danger small mt-1">
              {{ form.priority.errors.0 }}
            </div>
          {% endif %}
          <div class="form-text">
            Set the notification priority level.
          </div>
        </div>
      </div>
    </div>

    <!-- Form Actions -->
    <div class="d-flex justify-content-end gap-2 mb-4">
      <a href="{% url 'notifications:notification_list' %}" class="btn btn-outline-secondary">
        <i class="fas fa-times me-2"></i>Cancel
      </a>
      <button type="submit" class="btn btn-success">
        <i class="fas fa-paper-plane me-2"></i>Send Notification
      </button>
    </div>
  </form>
</div>

<script>
// Form validation and enhancement
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('notificationForm');
    
    form.addEventListener('submit', function(e) {
        const channel = document.getElementById('{{ form.channel.id_for_label }}');
        const message = document.getElementById('{{ form.message.id_for_label }}');
        const priority = document.getElementById('{{ form.priority.id_for_label }}');
        
        let isValid = true;
        
        // Basic validation
        if (!channel.value) {
            isValid = false;
            channel.classList.add('is-invalid');
        } else {
            channel.classList.remove('is-invalid');
        }
        
        if (!message.value.trim()) {
            isValid = false;
            message.classList.add('is-invalid');
        } else {
            message.classList.remove('is-invalid');
        }
        
        if (!priority.value) {
            isValid = false;
            priority.classList.add('is-invalid');
        } else {
            priority.classList.remove('is-invalid');
        }
        
        if (!isValid) {
            e.preventDefault();
        }
    });
});
</script>
{% endblock %}