{% extends "base.html" %}

{% block title %}Configuration - Encoder{% endblock %}

{% block content %}
<div class="px-4 sm:px-0">
    <div class="mb-8">
        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-white mb-2">Configuration</h1>
                <p class="text-gray-300">Manage watch folders for video and audio encoding</p>
            </div>
            <a href="{{ url_for('index') }}" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm">
                ← Back to Dashboard
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
        <!-- Video Encoder Configuration -->
        <div class="bg-gray-800 rounded-lg shadow-lg p-6">
            <h2 class="text-xl font-semibold text-white mb-4 flex items-center">
                <svg class="w-6 h-6 mr-2 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
                </svg>
                Video Encoder Folders
            </h2>

            <!-- Add new folder form -->
            <form method="POST" action="{{ url_for('add_config') }}" class="mb-6">
                <input type="hidden" name="encoder_type" value="video">
                <div class="flex space-x-2">
                    <input type="text" name="watch_folder" placeholder="/path/to/video/folder" 
                           class="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
                        Add Folder
                    </button>
                </div>
            </form>

            <!-- Current folders -->
            <div class="space-y-2">
                {% if video_configs %}
                    {% for config in video_configs %}
                        <div class="bg-gray-700 rounded-lg p-3 flex items-center justify-between">
                            <div>
                                <div class="text-white text-sm">{{ config.watch_folder }}</div>
                                <div class="text-gray-400 text-xs">Added: {{ config.created_at.strftime('%Y-%m-%d %H:%M') }}</div>
                            </div>
                            <div class="flex items-center space-x-2">
                                {% if config.watch_folder | path_exists %}
                                    <span class="w-2 h-2 bg-green-500 rounded-full"></span>
                                    <span class="text-green-400 text-xs">Active</span>
                                {% else %}
                                    <span class="w-2 h-2 bg-red-500 rounded-full"></span>
                                    <span class="text-red-400 text-xs">Not Found</span>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="bg-gray-700 rounded-lg p-6 text-center">
                        <svg class="mx-auto h-8 w-8 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
                        </svg>
                        <p class="text-gray-400 text-sm">No video folders configured</p>
                    </div>
                {% endif %}
            </div>

            <!-- Configuration info -->
            <div class="mt-6 bg-blue-900 bg-opacity-20 border border-blue-600 rounded-lg p-4">
                <h3 class="text-blue-300 font-medium mb-2">Video Encoder Settings</h3>
                <ul class="text-sm text-blue-200 space-y-1">
                    <li>• Converts H.264 videos to H.265 (HEVC)</li>
                    <li>• Output format: MKV container</li>
                    <li>• Supported formats: MP4, AVI, MKV, MOV, WMV, FLV, WebM</li>
                    <li>• Preset: Medium, CRF: 28</li>
                </ul>
            </div>
        </div>

        <!-- Audio Encoder Configuration -->
        <div class="bg-gray-800 rounded-lg shadow-lg p-6">
            <h2 class="text-xl font-semibold text-white mb-4 flex items-center">
                <svg class="w-6 h-6 mr-2 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
                </svg>
                Audio Encoder Folders
            </h2>

            <!-- Add new folder form -->
            <form method="POST" action="{{ url_for('add_config') }}" class="mb-6">
                <input type="hidden" name="encoder_type" value="audio">
                <div class="flex space-x-2">
                    <input type="text" name="watch_folder" placeholder="/path/to/audio/folder" 
                           class="flex-1 bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent">
                    <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
                        Add Folder
                    </button>
                </div>
            </form>

            <!-- Current folders -->
            <div class="space-y-2">
                {% if audio_configs %}
                    {% for config in audio_configs %}
                        <div class="bg-gray-700 rounded-lg p-3 flex items-center justify-between">
                            <div>
                                <div class="text-white text-sm">{{ config.watch_folder }}</div>
                                <div class="text-gray-400 text-xs">Added: {{ config.created_at.strftime('%Y-%m-%d %H:%M') }}</div>
                            </div>
                            <div class="flex items-center space-x-2">
                                {% if config.watch_folder | path_exists %}
                                    <span class="w-2 h-2 bg-green-500 rounded-full"></span>
                                    <span class="text-green-400 text-xs">Active</span>
                                {% else %}
                                    <span class="w-2 h-2 bg-red-500 rounded-full"></span>
                                    <span class="text-red-400 text-xs">Not Found</span>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="bg-gray-700 rounded-lg p-6 text-center">
                        <svg class="mx-auto h-8 w-8 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"/>
                        </svg>
                        <p class="text-gray-400 text-sm">No audio folders configured</p>
                    </div>
                {% endif %}
            </div>

            <!-- Configuration info -->
            <div class="mt-6 bg-purple-900 bg-opacity-20 border border-purple-600 rounded-lg p-4">
                <h3 class="text-purple-300 font-medium mb-2">Audio Encoder Settings</h3>
                <ul class="text-sm text-purple-200 space-y-1">
                    <li>• Converts FLAC files to MP3</li>
                    <li>• Output quality: 320 kbps</li>
                    <li>• Supported formats: FLAC, WAV, M4A, OGG</li>
                    <li>• Codec: libmp3lame</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}