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

{% block title %}Stream Configurations - Stream Processor{% endblock %}
{% block page_title %}Stream Configurations{% endblock %}

{% block content %}
<div class="d-grid gap-4">
  <!-- Header -->
  <div class="d-flex justify-content-between align-items-center">
    <div>
      <h1 class="h3 fw-bold d-flex align-items-center mb-1">
        <i class="fas fa-cogs me-3 text-primary"></i>
        Stream Configurations
      </h1>
      <p class="text-muted small mb-0">
        Manage video and audio encoding configurations for streams
      </p>
    </div>
    <div class="d-flex gap-2">
      <a href="{% url 'streams:video_config_create' %}" class="btn btn-primary">
        <i class="fas fa-plus me-2"></i> New Video Config
      </a>
      <a href="{% url 'streams:audio_config_create' %}" class="btn btn-outline-primary">
        <i class="fas fa-plus me-2"></i> New Audio Config
      </a>
    </div>
  </div>

  <!-- Video Configurations -->
  <div class="card shadow-sm">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h3 class="h6 mb-0 d-flex align-items-center">
          <i class="fas fa-video me-2 text-primary"></i> Video Configurations
        </h3>
        <span class="badge bg-primary">
          {{ video_configs.count }} config{{ video_configs.count|pluralize }}
        </span>
      </div>

      {% if video_configs %}
        <div class="row g-3">
          {% for config in video_configs %}
          <div class="col-12 col-md-6 col-lg-4">
            <div class="card h-100">
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-2">
                  <h4 class="h6 mb-0">{{ config.name }}</h4>
                  <div class="d-flex gap-2">
                    <button class="btn btn-sm btn-outline-secondary" title="Edit">
                      <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger" title="Delete">
                      <i class="fas fa-trash"></i>
                    </button>
                  </div>
                </div>

                <div class="small text-muted">
                  <div class="d-flex justify-content-between">
                    <span>Resolution:</span>
                    <span class="fw-medium text-body">{{ config.resolution }}</span>
                  </div>
                  <div class="d-flex justify-content-between">
                    <span>Bitrate:</span>
                    <span class="fw-medium text-body">{{ config.bitrate }}</span>
                  </div>
                  <div class="d-flex justify-content-between">
                    <span>FPS:</span>
                    <span class="fw-medium text-body">{{ config.fps }}</span>
                  </div>
                  <div class="d-flex justify-content-between">
                    <span>Codec:</span>
                    <span class="fw-medium text-body">{{ config.codec|default:"H.264" }}</span>
                  </div>
                </div>

                {% if config.description %}
                <div class="border-top mt-3 pt-2 small text-muted">
                  {{ config.description|truncatechars:60 }}
                </div>
                {% endif %}
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      {% else %}
        <div class="text-center py-5">
          <div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center mb-3" style="width:48px;height:48px;">
            <i class="fas fa-video text-primary"></i>
          </div>
          <h3 class="h6">No video configurations</h3>
          <p class="text-muted small mb-3">Create your first video configuration to get started</p>
          <a href="{% url 'streams:video_config_create' %}" class="btn btn-primary">
            <i class="fas fa-plus me-2"></i> Create Video Config
          </a>
        </div>
      {% endif %}
    </div>
  </div>

  <!-- Audio Configurations -->
  <div class="card shadow-sm">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <h3 class="h6 mb-0 d-flex align-items-center">
          <i class="fas fa-volume-up me-2 text-success"></i> Audio Configurations
        </h3>
        <span class="badge bg-success">
          {{ audio_configs.count }} config{{ audio_configs.count|pluralize }}
        </span>
      </div>

      {% if audio_configs %}
        <div class="row g-3">
          {% for config in audio_configs %}
          <div class="col-12 col-md-6 col-lg-4">
            <div class="card h-100">
              <div class="card-body">
                <div class="d-flex justify-content-between align-items-start mb-2">
                  <h4 class="h6 mb-0">{{ config.name }}</h4>
                  <div class="d-flex gap-2">
                    <button class="btn btn-sm btn-outline-secondary" title="Edit">
                      <i class="fas fa-edit"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger" title="Delete">
                      <i class="fas fa-trash"></i>
                    </button>
                  </div>
                </div>

                <div class="small text-muted">
                  <div class="d-flex justify-content-between">
                    <span>Bitrate:</span>
                    <span class="fw-medium text-body">{{ config.bitrate }}</span>
                  </div>
                  <div class="d-flex justify-content-between">
                    <span>Sample Rate:</span>
                    <span class="fw-medium text-body">{{ config.sample_rate }} Hz</span>
                  </div>
                  <div class="d-flex justify-content-between">
                    <span>Channels:</span>
                    <span class="fw-medium text-body">{{ config.channels }}</span>
                  </div>
                  <div class="d-flex justify-content-between">
                    <span>Codec:</span>
                    <span class="fw-medium text-body">{{ config.codec|default:"AAC" }}</span>
                  </div>
                </div>

                {% if config.description %}
                <div class="border-top mt-3 pt-2 small text-muted">
                  {{ config.description|truncatechars:60 }}
                </div>
                {% endif %}
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      {% else %}
        <div class="text-center py-5">
          <div class="rounded-circle bg-light d-inline-flex align-items-center justify-content-center mb-3" style="width:48px;height:48px;">
            <i class="fas fa-volume-up text-success"></i>
          </div>
          <h3 class="h6">No audio configurations</h3>
          <p class="text-muted small mb-3">Create your first audio configuration to get started</p>
          <a href="{% url 'streams:audio_config_create' %}" class="btn btn-primary">
            <i class="fas fa-plus me-2"></i> Create Audio Config
          </a>
        </div>
      {% endif %}
    </div>
  </div>

  <!-- Usage Information -->
  <div class="alert alert-info mb-0" role="alert">
    <div class="d-flex">
      <div class="me-3">
        <i class="fas fa-info-circle"></i>
      </div>
      <div>
        <h3 class="h6 mb-2">About Stream Configurations</h3>
        <div class="small">
          <p class="mb-2">Stream configurations define the encoding parameters for video and audio streams. These settings control quality, file size, and compatibility with different devices and platforms.</p>
          <ul class="mb-0 ps-3">
            <li><strong>Video configs</strong> control resolution, bitrate, frame rate, and codec settings</li>
            <li><strong>Audio configs</strong> control bitrate, sample rate, channels, and codec settings</li>
            <li>Configurations can be reused across multiple streaming channels</li>
            <li>Higher bitrates provide better quality but require more bandwidth</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.fa-trash').forEach(function (button) {
      button.addEventListener('click', function (e) {
        e.preventDefault();
        if (confirm('Are you sure you want to delete this configuration?')) {
          // Handle deletion
          console.log('Delete configuration');
        }
      });
    });
  });
</script>
{% endblock %}