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

{% block title %}
{% if form.instance.pk %}Edit Channel{% else %}Create Channel{% endif %} - Stream Processor
{% endblock %}

{% block extra_css %}{% endblock %}

{% block content %}
<div class="py-4 bg-light min-vh-100">
  <div class="container-lg">

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-start mb-4">
      <div>
        <h1 class="h3 fw-bold text-dark mb-1">
          {% if form.instance.pk %}Edit Channel{% else %}Create Channel{% endif %}
        </h1>
        <p class="text-muted mb-0">
          {% if form.instance.pk %}
            Update channel configuration and streaming parameters
          {% else %}
            Configure a new streaming channel for HLS capture
          {% endif %}
        </p>
      </div>
      <div class="d-flex gap-2">
        <a href="{% url 'streams:channel_list' %}" class="btn btn-outline-secondary">
          <i class="fas fa-arrow-left me-2"></i> Back to Channels
        </a>
      </div>
    </div>

    <!-- Info Panel -->
    <div class="alert alert-info d-flex align-items-start mb-4">
      <i class="fas fa-info-circle me-2 mt-1"></i>
      <div>
        <h6 class="mb-1">Channel Configuration Guidelines</h6>
        <div class="small">
          Configure your streaming channel with HLS source URL and capture parameters. Ensure the HLS URL is accessible and ends with <code>.m3u8</code>.
        </div>
      </div>
    </div>

    <!-- Form Card -->
    <div class="card shadow-sm">
      <div class="card-header bg-white">
        <h5 class="card-title mb-0">Channel Settings</h5>
      </div>

      <form method="post" class="card-body">
        {% csrf_token %}

        <!-- Basic Information -->
        <div class="mb-4">
          <label for="{{ form.name.id_for_label }}" class="form-label">
            Channel Name <span class="text-danger">*</span>
          </label>
          {{ form.name }}
          {% if form.name.errors %}
            <div class="form-text text-danger">{{ form.name.errors.0 }}</div>
          {% endif %}
          <div class="form-text">{{ form.name.help_text }}</div>
          <div class="small text-primary mt-1">
            <i class="fas fa-magic me-1"></i> URL slug will be automatically generated from the channel name
          </div>
        </div>

        <!-- Stream Configuration -->
        <div class="mb-4">
          <label for="{{ form.hls_url.id_for_label }}" class="form-label">
            HLS Stream URL <span class="text-danger">*</span>
          </label>
          {{ form.hls_url }}
          {% if form.hls_url.errors %}
            <div class="form-text text-danger">{{ form.hls_url.errors.0 }}</div>
          {% endif %}
          <div class="form-text">{{ form.hls_url.help_text }}</div>
        </div>

        <!-- Description -->
        <div class="mb-4">
          <label for="{{ form.description.id_for_label }}" class="form-label">Description</label>
          {{ form.description }}
          {% if form.description.errors %}
            <div class="form-text text-danger">{{ form.description.errors.0 }}</div>
          {% endif %}
          <div class="form-text">Optional description of the channel content</div>
        </div>

        <!-- Channel Status -->
        <div class="border-top pt-4 mt-4">
          <h6 class="mb-3">Channel Status</h6>
          <div class="form-check form-switch">
            {{ form.is_active }}
            <label class="form-check-label" for="{{ form.is_active.id_for_label }}">Active Channel</label>
          </div>
          <div class="form-text">Enable this channel for streaming</div>
          {% if form.is_active.errors %}
            <div class="form-text text-danger">{{ form.is_active.errors.0 }}</div>
          {% endif %}

          <!-- Hidden output directory field -->
          {{ form.output_directory }}
        </div>

        <!-- HLS Configuration -->
        <div class="border-top pt-4 mt-4">
          <h6 class="mb-3">HLS Configuration</h6>
          <div class="row g-3">
            <div class="col-md-6">
              <label for="{{ form.segment_duration.id_for_label }}" class="form-label">Segment Duration (seconds)</label>
              {{ form.segment_duration }}
              {% if form.segment_duration.errors %}
                <div class="form-text text-danger">{{ form.segment_duration.errors.0 }}</div>
              {% endif %}
              <div class="form-text">{{ form.segment_duration.help_text }}</div>
            </div>

            <div class="col-md-6">
              <label for="{{ form.max_segments.id_for_label }}" class="form-label">Maximum Segments</label>
              {{ form.max_segments }}
              {% if form.max_segments.errors %}
                <div class="form-text text-danger">{{ form.max_segments.errors.0 }}</div>
              {% endif %}
              <div class="form-text">{{ form.max_segments.help_text }}</div>
            </div>
          </div>
        </div>

        <!-- Retry Configuration -->
        <div class="border-top pt-4 mt-4">
          <h6 class="mb-3">Retry Configuration</h6>
          <div class="row g-3">
            <div class="col-md-6">
              <label for="{{ form.retry_attempts.id_for_label }}" class="form-label">Retry Attempts</label>
              {{ form.retry_attempts }}
              {% if form.retry_attempts.errors %}
                <div class="form-text text-danger">{{ form.retry_attempts.errors.0 }}</div>
              {% endif %}
              <div class="form-text">{{ form.retry_attempts.help_text }}</div>
            </div>

            <div class="col-md-6">
              <label for="{{ form.retry_interval.id_for_label }}" class="form-label">Retry Interval (seconds)</label>
              {{ form.retry_interval }}
              {% if form.retry_interval.errors %}
                <div class="form-text text-danger">{{ form.retry_interval.errors.0 }}</div>
              {% endif %}
              <div class="form-text">{{ form.retry_interval.help_text }}</div>
            </div>
          </div>
        </div>

        <!-- Actions -->
        <div class="d-flex justify-content-end gap-2 border-top pt-4 mt-4">
          <a href="{% url 'streams:channel_list' %}" class="btn btn-outline-secondary">Cancel</a>
          <button type="submit" class="btn btn-primary">
            <i class="fas fa-save me-2"></i>
            {% if form.instance.pk %}Update Channel{% else %}Create Channel{% endif %}
          </button>
        </div>
      </form>
    </div>

    <!-- Configuration Examples -->
    <div class="card shadow-sm mt-4">
      <div class="card-header bg-white">
        <h5 class="card-title mb-0">Configuration Examples</h5>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-md-6">
            <div class="border rounded p-3 h-100">
              <h6 class="mb-1">Standard Configuration</h6>
              <ul class="small text-muted mb-2">
                <li>Segment Duration: 6 seconds</li>
                <li>Max Segments: 10</li>
                <li>Retry Attempts: 5</li>
                <li>Retry Interval: 10 seconds</li>
              </ul>
              <div class="text-muted small">Balanced configuration for most streams</div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="border rounded p-3 h-100">
              <h6 class="mb-1">Low Latency Configuration</h6>
              <ul class="small text-muted mb-2">
                <li>Segment Duration: 2 seconds</li>
                <li>Max Segments: 5</li>
                <li>Retry Attempts: 3</li>
                <li>Retry Interval: 5 seconds</li>
              </ul>
              <div class="text-muted small">Optimized for minimal delay</div>
            </div>
          </div>
        </div>

        <div class="alert alert-warning d-flex align-items-start mt-3">
          <i class="fas fa-exclamation-triangle me-2 mt-1"></i>
          <div>
            <h6 class="mb-1">Important Notes</h6>
            <ul class="small mb-0">
              <li>HLS URL must be accessible and return a valid <code>.m3u8</code> playlist</li>
              <li>Lower segment duration reduces latency but increases processing overhead</li>
              <li>Higher retry attempts improve reliability but may delay error detection</li>
              <li>Output directory must be writable by the application</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
/* Make default Django widgets look Bootstrap-y if your form widgets lack classes */
input[type="text"],
input[type="url"],
input[type="number"],
select,
textarea {
  display:block; width:100%;
  border:1px solid #ced4da; border-radius:.375rem;
  padding:.375rem .75rem; font-size:.875rem;
}
input[type="checkbox"] {
  width:1.1rem; height:1.1rem;
}
.errorlist { list-style:none; padding:0; margin:0; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Ensure output directory field has a value on form load
  const outputDirField = document.querySelector('input[name="output_directory"]');
  if (outputDirField && !outputDirField.value) {
    outputDirField.value = '/app/media/streams/temp';
  }
});
</script>
{% endblock %}