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

{% block title %}Create Audio Configuration - Stream Processor{% endblock %}

{% block extra_css %}
<style>
  /* Optional: align colors with your primary tone (Tailwind-ish blue) */
  :root { --bs-primary: #3b82f6; --bs-primary-rgb: 59,130,246; }
  .bg-primary-subtle { background-color: #eff6ff !important; }
</style>
{% endblock %}

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

    <!-- Header -->
    <div class="d-flex align-items-start justify-content-between mb-4">
      <div>
        <h1 class="h3 fw-bold mb-1 text-dark">Create Audio Configuration</h1>
        <p class="text-muted mb-0">Configure audio encoding parameters for stream processing</p>
      </div>
      <div class="d-flex gap-2">
        <a href="{% url 'streams:config_list' %}" class="btn btn-outline-secondary">
          <i class="fas fa-arrow-left me-2"></i>
          Back to Configurations
        </a>
      </div>
    </div>

    <!-- Info Panel -->
    <div class="alert alert-primary d-flex align-items-start gap-3 mb-4">
      <i class="fas fa-info-circle text-primary mt-1"></i>
      <div>
        <h6 class="mb-1">Audio Configuration Guidelines</h6>
        <div class="small">
          Configure audio encoding parameters for optimal stream processing. Higher bitrates provide better quality but require more bandwidth.
        </div>
      </div>
    </div>

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

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

        <!-- Basic Information -->
        <div class="row g-4">
          <div class="col-12 col-md-6">
            <label for="{{ form.name.id_for_label }}" class="form-label">
              Configuration Name <span class="text-danger">*</span>
            </label>
            {{ form.name|add_class:"form-control" }}
            {% if form.name.errors %}
              <div class="form-text text-danger">{{ form.name.errors.0 }}</div>
            {% endif %}
            <div class="form-text">Unique name for this audio configuration</div>
          </div>

          <div class="col-12 col-md-6">
            <label for="{{ form.codec.id_for_label }}" class="form-label">
              Audio Codec <span class="text-danger">*</span>
            </label>
            {{ form.codec|add_class:"form-select" }}
            {% if form.codec.errors %}
              <div class="form-text text-danger">{{ form.codec.errors.0 }}</div>
            {% endif %}
            <div class="form-text">Audio codec for encoding</div>
          </div>
        </div>

        <!-- Quality Settings -->
        <div class="row g-4 mt-1">
          <div class="col-12 col-md-6">
            <label for="{{ form.bitrate.id_for_label }}" class="form-label">
              Bitrate <span class="text-danger">*</span>
            </label>
            {{ form.bitrate|add_class:"form-control" }}
            {% if form.bitrate.errors %}
              <div class="form-text text-danger">{{ form.bitrate.errors.0 }}</div>
            {% endif %}
            <div class="form-text">Audio bitrate (e.g., “128k”, “256k”)</div>
          </div>

          <div class="col-12 col-md-6">
            <label for="{{ form.sample_rate.id_for_label }}" class="form-label">
              Sample Rate <span class="text-danger">*</span>
            </label>
            {{ form.sample_rate|add_class:"form-control" }}
            {% if form.sample_rate.errors %}
              <div class="form-text text-danger">{{ form.sample_rate.errors.0 }}</div>
            {% endif %}
            <div class="form-text">Audio sample rate in Hz</div>
          </div>
        </div>

        <!-- Channel & Normalization -->
        <div class="row g-4 mt-1">
          <div class="col-12 col-md-6">
            <label for="{{ form.channels.id_for_label }}" class="form-label">
              Audio Channels <span class="text-danger">*</span>
            </label>
            {{ form.channels|add_class:"form-select" }}
            {% if form.channels.errors %}
              <div class="form-text text-danger">{{ form.channels.errors.0 }}</div>
            {% endif %}
            <div class="form-text">Number of audio channels</div>
          </div>

          <div class="col-12 col-md-6 d-flex align-items-center">
            <div class="form-check">
              {{ form.normalize|add_class:"form-check-input" }}
              <label for="{{ form.normalize.id_for_label }}" class="form-check-label fw-medium">
                Audio Normalization
              </label>
            </div>
            <div class="ms-3 small text-muted">
              Apply loudnorm filter for consistent audio levels
              {% if form.normalize.errors %}
                <div class="text-danger">{{ form.normalize.errors.0 }}</div>
              {% endif %}
            </div>
          </div>
        </div>

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

    <!-- Configuration Presets -->
    <div class="card shadow-sm mb-4">
      <div class="card-header bg-white">
        <h5 class="card-title mb-0">Common Audio Presets</h5>
      </div>
      <div class="card-body">
        <div class="row g-3">
          <div class="col-12 col-md-4">
            <div class="border rounded-3 p-3 h-100">
              <h6 class="mb-1">High Quality</h6>
              <div class="small text-muted">AAC, 48 kHz, Stereo</div>
              <ul class="small mt-2 mb-0 ps-3">
                <li>Bitrate: 256k</li>
                <li>Sample Rate: 48 kHz</li>
                <li>Channels: Stereo</li>
                <li>Normalization: On</li>
              </ul>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="border rounded-3 p-3 h-100">
              <h6 class="mb-1">Standard Quality</h6>
              <div class="small text-muted">AAC, 44.1 kHz, Stereo</div>
              <ul class="small mt-2 mb-0 ps-3">
                <li>Bitrate: 128k</li>
                <li>Sample Rate: 44.1 kHz</li>
                <li>Channels: Stereo</li>
                <li>Normalization: On</li>
              </ul>
            </div>
          </div>
          <div class="col-12 col-md-4">
            <div class="border rounded-3 p-3 h-100">
              <h6 class="mb-1">Low Bandwidth</h6>
              <div class="small text-muted">AAC, 22 kHz, Mono</div>
              <ul class="small mt-2 mb-0 ps-3">
                <li>Bitrate: 64k</li>
                <li>Sample Rate: 22.05 kHz</li>
                <li>Channels: Mono</li>
                <li>Normalization: On</li>
              </ul>
            </div>
          </div>
        </div>

        <div class="row g-3 mt-1">
          <div class="col-12 col-md-6">
            <div class="p-3 rounded-3 border border-success-subtle bg-success-subtle">
              <div class="d-flex gap-2">
                <i class="fas fa-check-circle text-success mt-1"></i>
                <div>
                  <h6 class="mb-1">Recommended Settings</h6>
                  <ul class="small mb-0 ps-3">
                    <li>AAC codec for best compatibility</li>
                    <li>48 kHz sample rate for professional quality</li>
                    <li>Stereo channels for most content</li>
                    <li>Enable normalization for consistent levels</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <div class="col-12 col-md-6">
            <div class="p-3 rounded-3 border border-warning-subtle bg-warning-subtle">
              <div class="d-flex gap-2">
                <i class="fas fa-exclamation-triangle text-warning mt-1"></i>
                <div>
                  <h6 class="mb-1">Performance Notes</h6>
                  <ul class="small mb-0 ps-3">
                    <li>Higher bitrates require more bandwidth</li>
                    <li>Higher sample rates increase processing load</li>
                    <li>Normalization adds processing overhead</li>
                    <li>Consider your target audience and bandwidth</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- Codec Information -->
    <div class="card shadow-sm">
      <div class="card-header bg-white">
        <h5 class="card-title mb-0">Audio Codec Information</h5>
      </div>
      <div class="card-body">
        <div class="row g-4">
          <div class="col-12 col-md-4">
            <h6 class="mb-2">AAC (Advanced Audio Coding)</h6>
            <ul class="small mb-0 ps-3 text-muted">
              <li>Best overall quality and compatibility</li>
              <li>Widely supported across devices</li>
              <li>Efficient compression</li>
              <li>Recommended for most use cases</li>
            </ul>
          </div>
          <div class="col-12 col-md-4">
            <h6 class="mb-2">MP3 (MPEG Audio Layer III)</h6>
            <ul class="small mb-0 ps-3 text-muted">
              <li>Universal compatibility</li>
              <li>Larger file sizes than AAC</li>
              <li>Good for legacy systems</li>
              <li>Mature and stable format</li>
            </ul>
          </div>
          <div class="col-12 col-md-4">
            <h6 class="mb-2">Opus</h6>
            <ul class="small mb-0 ps-3 text-muted">
              <li>Excellent quality at low bitrates</li>
              <li>Open source and royalty-free</li>
              <li>Great for real-time applications</li>
              <li>Limited device support</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
{% endblock %}