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

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

{% block page_title %}
<i class="fas fa-cogs text-blue-600 mr-2"></i>
Stream Configurations
{% endblock %}

{% block extra_css %}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-6">
    <!-- Enhanced Header -->
    <div class="mb-8">
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-4">
                    <div class="p-3 bg-purple-100 rounded-lg">
                        <i class="fas fa-cogs text-purple-600 text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl font-bold text-gray-900">Stream Configurations</h1>
                        <p class="mt-2 text-gray-600">Manage audio and video streaming configurations with advanced settings</p>
                    </div>
                </div>
                <div class="flex space-x-3">
                    <a href="{% url 'streams:video_config_create' %}" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 shadow-sm">
                        <i class="fas fa-video mr-2"></i>
                        New Video Config
                    </a>
                    <a href="{% url 'streams:audio_config_create' %}" class="inline-flex items-center px-6 py-3 border border-gray-300 rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-all duration-200 shadow-sm">
                        <i class="fas fa-microphone mr-2"></i>
                        New Audio Config
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Enhanced Info Panel -->
    <div class="bg-gradient-to-r from-purple-50 to-indigo-50 border border-purple-200 rounded-xl p-6 mb-8 shadow-sm">
        <div class="flex items-start">
            <div class="flex-shrink-0">
                <div class="p-2 bg-purple-100 rounded-lg">
                    <i class="fas fa-info-circle text-purple-600 text-lg"></i>
                </div>
            </div>
            <div class="ml-4">
                <h3 class="text-lg font-semibold text-purple-900 mb-2">Configuration Management</h3>
                <div class="text-purple-800 space-y-2">
                    <p class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i>Create and manage video and audio encoding configurations</p>
                    <p class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i>Set bitrates, resolutions, and quality parameters</p>
                    <p class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i>Apply configurations to streaming channels for optimal performance</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Video Configurations -->
    <div class="bg-white shadow rounded-lg mb-8">
        <div class="px-6 py-4 border-b border-gray-200">
            <div class="flex items-center justify-between">
                <h3 class="text-lg font-medium text-gray-900 flex items-center">
                    <i class="fas fa-video mr-2 text-blue-600"></i>
                    Video Configurations
                </h3>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                    {{ video_configs.count }} config{{ video_configs.count|pluralize }}
                </span>
            </div>
        </div>
        <div class="p-6">
            
            {% if video_configs %}
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {% for config in video_configs %}
                    <div class="bg-white border border-gray-200 rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow duration-200">
                        <div class="flex items-center justify-between mb-3">
                            <h4 class="text-sm font-medium">{{ config.name }}</h4>
                            <div class="flex space-x-1">
                                <button class="text-gray-400 hover:text-gray-600">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button class="text-gray-400 hover:text-red-600">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="space-y-2 text-sm text-gray-600">
                            <div class="flex justify-between">
                                <span>Resolution:</span>
                                <span class="font-medium">{{ config.resolution }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span>Bitrate:</span>
                                <span class="font-medium">{{ config.bitrate }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span>FPS:</span>
                                <span class="font-medium">{{ config.fps }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span>Codec:</span>
                                <span class="font-medium">{{ config.codec|default:"H.264" }}</span>
                            </div>
                        </div>
                        
                        {% if config.description %}
                        <div class="mt-3 pt-3 border-t">
                            <p class="text-xs text-gray-500">{{ config.description|truncatechars:60 }}</p>
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center py-6">
                    <div class="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-blue-100">
                        <i class="fas fa-video text-blue-600"></i>
                    </div>
                    <h3 class="text-sm font-medium mt-2">No video configurations</h3>
                    <p class="text-sm text-gray-500 mt-1">Create your first video configuration</p>
                    <div class="mt-4">
                        <a href="{% url 'streams:video_config_create' %}" 
                           class="px-4 py-2 text-sm font-medium rounded text-white bg-blue-600 hover:bg-blue-700">
                            <i class="fas fa-plus mr-2"></i>
                            Create Video Config
                        </a>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Audio Configurations -->
    <div class="bg-white border rounded">
        <div class="p-4">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium flex items-center">
                    <i class="fas fa-volume-up mr-2 text-green-600"></i>
                    Audio Configurations
                </h3>
                <span class="px-2 py-1 rounded text-xs bg-green-100 text-green-800">
                    {{ audio_configs.count }} config{{ audio_configs.count|pluralize }}
                </span>
            </div>
            
            {% if audio_configs %}
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {% for config in audio_configs %}
                    <div class="border rounded p-4">
                        <div class="flex items-center justify-between mb-3">
                            <h4 class="text-sm font-medium">{{ config.name }}</h4>
                            <div class="flex space-x-1">
                                <button class="text-gray-400 hover:text-gray-600">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button class="text-gray-400 hover:text-red-600">
                                    <i class="fas fa-trash text-sm"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="space-y-2 text-sm text-gray-600">
                            <div class="flex justify-between">
                                <span>Bitrate:</span>
                                <span class="font-medium">{{ config.bitrate }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span>Sample Rate:</span>
                                <span class="font-medium">{{ config.sample_rate }} Hz</span>
                            </div>
                            <div class="flex justify-between">
                                <span>Channels:</span>
                                <span class="font-medium">{{ config.channels }}</span>
                            </div>
                            <div class="flex justify-between">
                                <span>Codec:</span>
                                <span class="font-medium">{{ config.codec|default:"AAC" }}</span>
                            </div>
                        </div>
                        
                        {% if config.description %}
                        <div class="mt-3 pt-3 border-t">
                            <p class="text-xs text-gray-500">{{ config.description|truncatechars:60 }}</p>
                        </div>
                        {% endif %}
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <div class="text-center py-6">
                    <div class="mx-auto h-12 w-12 flex items-center justify-center rounded-full bg-green-100">
                        <i class="fas fa-volume-up text-green-600"></i>
                    </div>
                    <h3 class="text-sm font-medium mt-2">No audio configurations</h3>
                    <p class="text-sm text-gray-500 mt-1">Create your first audio configuration</p>
                    <div class="mt-4">
                        <a href="{% url 'streams:audio_config_create' %}" 
                           class="px-4 py-2 text-sm font-medium rounded text-white bg-blue-600 hover:bg-blue-700">
                            <i class="fas fa-plus mr-2"></i>
                            Create Audio Config
                        </a>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

    <!-- Usage Information -->
    <div class="bg-blue-50 border border-blue-200 rounded p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-blue-400"></i>
            </div>
            <div class="ml-3">
                <h3 class="text-sm font-medium text-blue-800">About Stream Configurations</h3>
                <div class="mt-2 text-sm text-blue-700">
                    <p>Stream configurations define encoding parameters for video and audio streams.</p>
                    <ul class="list-disc list-inside mt-2 space-y-1">
                        <li><strong>Video:</strong> Resolution, bitrate, frame rate, codec</li>
                        <li><strong>Audio:</strong> Bitrate, sample rate, channels, codec</li>
                        <li><strong>Reusable:</strong> Share across multiple streams</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Add any configuration-specific JavaScript here
    document.addEventListener('DOMContentLoaded', function() {
        // Handle delete confirmations
        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 %}