{% extends "base.html" %}

{% block title %}{{ translations.track_management if translations else 'Track Management' }}{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-lg shadow-md p-6 mb-6 dark:bg-slate-800">
        <h1 class="text-2xl font-bold text-gray-900 mb-2 dark:text-white">{{ translations.track_management if translations else 'Track Management' }}</h1>
        <p class="text-gray-600 dark:text-gray-300">
            {{ translations.track_management_desc if translations else 'List, extract, and merge subtitle tracks from video files.' }}
        </p>
        <a href="/" class="inline-flex items-center text-blue-600 hover:text-blue-800 mt-2 dark:text-blue-400 dark:hover:text-blue-300">
            <i class="fas fa-arrow-left mr-1"></i> {{ translations.back_to_home if translations else 'Back to Home' }}
        </a>
    </div>

    {% if error %}
    <div class="bg-red-50 border-l-4 border-red-400 p-4 mb-6 dark:bg-red-900/20 dark:border-red-700">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-circle text-red-400 dark:text-red-500"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm text-red-700 dark:text-red-300">
                    {{ error }}
                </p>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Tab Navigation -->
    <div class="bg-white rounded-lg shadow-md dark:bg-slate-800">
        <div class="border-b border-gray-200 dark:border-slate-700">
            <nav class="flex -mb-px p-4 space-x-4">
                <button onclick="showTab('list')" id="tab-list" class="tab-button active px-4 py-2 text-blue-600 border-b-2 border-blue-600 font-medium dark:text-blue-400">
                    <i class="fas fa-list mr-2"></i>{{ translations.list_tracks if translations else 'List Tracks' }}
                </button>
                <button onclick="showTab('extract')" id="tab-extract" class="tab-button px-4 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
                    <i class="fas fa-download mr-2"></i>{{ translations.extract_tracks if translations else 'Extract Tracks' }}
                </button>
                <button onclick="showTab('merge')" id="tab-merge" class="tab-button px-4 py-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
                    <i class="fas fa-compress-arrows-alt mr-2"></i>{{ translations.merge_subtitles if translations else 'Merge Subtitles' }}
                </button>
            </nav>
        </div>

        <!-- List Tracks Tab -->
        <div id="tab-content-list" class="tab-content p-6">
            <h2 class="text-xl font-semibold mb-4 dark:text-white">{{ translations.list_tracks if translations else 'List Subtitle Tracks' }}</h2>
            <p class="text-gray-600 mb-4 dark:text-gray-300">
                {{ translations.list_tracks_desc if translations else 'Upload a video file to see all available subtitle tracks.' }}
            </p>
            <form method="post" action="/subtitle-tracks/list" enctype="multipart/form-data" class="space-y-4">
                <div>
                    <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="video_file_list">
                        {{ translations.video_file if translations else 'Video File' }}
                    </label>
                    <div class="flex items-center">
                        <label for="video_file_list_upload" class="file-upload-label">
                            <i class="fas fa-upload mr-2"></i> {{ translations.choose_file if translations else 'Choose File' }}
                        </label>
                        <input type="file" id="video_file_list_upload" name="video_file" class="file-upload-input" accept=".mkv,.mp4,.avi,.mov,.webm,.flv">
                        <span id="file-name-list" class="ml-4 text-gray-500 dark:text-gray-400">{{ translations.no_file_chosen if translations else 'No file chosen' }}</span>
                    </div>
                </div>
                <div class="flex justify-end">
                    <button type="submit" class="btn-primary text-white px-6 py-2 rounded-md font-medium hover:bg-blue-700 transition duration-200">
                        <i class="fas fa-search mr-2"></i>{{ translations.list_tracks if translations else 'List Tracks' }}
                    </button>
                </div>
            </form>
        </div>

        <!-- Extract Tracks Tab -->
        <div id="tab-content-extract" class="tab-content p-6 hidden">
            <h2 class="text-xl font-semibold mb-4 dark:text-white">{{ translations.extract_tracks if translations else 'Extract Subtitle Tracks' }}</h2>
            <p class="text-gray-600 mb-4 dark:text-gray-300">
                {{ translations.extract_tracks_desc if translations else 'Extract one or all subtitle tracks from a video file.' }}
            </p>
            <form method="post" action="/subtitle-tracks/extract" enctype="multipart/form-data" class="space-y-4">
                <div>
                    <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="video_file_extract">
                        {{ translations.video_file if translations else 'Video File' }}
                    </label>
                    <div class="flex items-center">
                        <label for="video_file_extract_upload" class="file-upload-label">
                            <i class="fas fa-upload mr-2"></i> {{ translations.choose_file if translations else 'Choose File' }}
                        </label>
                        <input type="file" id="video_file_extract_upload" name="video_file" class="file-upload-input" accept=".mkv,.mp4,.avi,.mov,.webm,.flv">
                        <span id="file-name-extract" class="ml-4 text-gray-500 dark:text-gray-400">{{ translations.no_file_chosen if translations else 'No file chosen' }}</span>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="track_index">
                            {{ translations.track_index if translations else 'Track Index' }}
                        </label>
                        <input type="number" id="track_index" name="track_index" min="0"
                            class="form-input w-full px-3 py-2 border rounded-md dark:bg-slate-700 dark:border-slate-600 dark:text-white"
                            placeholder="e.g., 0">
                        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                            {{ translations.track_index_desc if translations else 'Track number to extract (0-based)' }}
                        </p>
                    </div>

                    <div>
                        <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="language">
                            {{ translations.language_code if translations else 'Language Code' }}
                        </label>
                        <input type="text" id="language" name="language"
                            class="form-input w-full px-3 py-2 border rounded-md dark:bg-slate-700 dark:border-slate-600 dark:text-white"
                            placeholder="e.g., eng, spa">
                    </div>
                </div>

                <div class="space-y-2">
                    <label class="flex items-center">
                        <input type="checkbox" name="extract_all" value="true" class="mr-2 form-checkbox">
                        <span class="text-gray-700 dark:text-gray-300">{{ translations.extract_all_tracks if translations else 'Extract All Tracks' }}</span>
                    </label>

                    <label class="flex items-center">
                        <input type="checkbox" name="as_zip" value="true" class="mr-2 form-checkbox">
                        <span class="text-gray-700 dark:text-gray-300">{{ translations.download_as_zip if translations else 'Download as ZIP' }}</span>
                    </label>

                    <label class="flex items-center">
                        <input type="checkbox" name="forced_only" value="true" class="mr-2 form-checkbox">
                        <span class="text-gray-700 dark:text-gray-300">{{ translations.forced_only if translations else 'Forced Subtitles Only' }}</span>
                    </label>

                    <label class="flex items-center">
                        <input type="checkbox" name="no_forced" value="true" class="mr-2 form-checkbox">
                        <span class="text-gray-700 dark:text-gray-300">{{ translations.no_forced if translations else 'Exclude Forced Subtitles' }}</span>
                    </label>
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="btn-primary text-white px-6 py-2 rounded-md font-medium hover:bg-blue-700 transition duration-200">
                        <i class="fas fa-download mr-2"></i>{{ translations.extract_tracks if translations else 'Extract Tracks' }}
                    </button>
                </div>
            </form>
        </div>

        <!-- Merge Subtitles Tab -->
        <div id="tab-content-merge" class="tab-content p-6 hidden">
            <h2 class="text-xl font-semibold mb-4 dark:text-white">{{ translations.merge_subtitles if translations else 'Merge Subtitles' }}</h2>
            <p class="text-gray-600 mb-4 dark:text-gray-300">
                {{ translations.merge_subtitles_desc if translations else 'Combine multiple subtitle files into one.' }}
            </p>
            <form method="post" action="/subtitle-tracks/merge" enctype="multipart/form-data" class="space-y-4">
                <div>
                    <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300">
                        {{ translations.merge_files if translations else 'Subtitle Files' }}
                    </label>
                    <div id="file-uploads" class="space-y-2">
                        <div class="file-upload-row flex items-center space-x-2">
                            <label for="subtitle_file_0" class="file-upload-label">
                                <i class="fas fa-upload mr-2"></i>{{ translations.choose_file if translations else 'Choose File' }}
                            </label>
                            <input type="file" id="subtitle_file_0" name="subtitle_files" class="file-upload-input" accept=".srt,.vtt,.ass">
                            <span class="file-name text-gray-500 dark:text-gray-400">No file chosen</span>
                        </div>
                        <div class="file-upload-row flex items-center space-x-2">
                            <label for="subtitle_file_1" class="file-upload-label">
                                <i class="fas fa-upload mr-2"></i>{{ translations.choose_file if translations else 'Choose File' }}
                            </label>
                            <input type="file" id="subtitle_file_1" name="subtitle_files" class="file-upload-input" accept=".srt,.vtt,.ass">
                            <span class="file-name text-gray-500 dark:text-gray-400">No file chosen</span>
                        </div>
                    </div>
                    <button type="button" onclick="addFileUpload()" class="mt-2 text-blue-600 hover:text-blue-800 dark:text-blue-400">
                        <i class="fas fa-plus mr-1"></i>{{ translations.add_file if translations else 'Add File' }}
                    </button>
                </div>

                <div>
                    <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="priority">
                        {{ translations.priority_mode if translations else 'Priority Mode' }}
                    </label>
                    <select id="priority" name="priority" class="form-input w-full px-3 py-2 border rounded-md dark:bg-slate-700 dark:border-slate-600 dark:text-white">
                        <option value="first">{{ translations.priority_first if translations else 'First File' }}</option>
                        <option value="second">{{ translations.priority_second if translations else 'Second File' }}</option>
                        <option value="combine">{{ translations.priority_combine if translations else 'Combine Both' }}</option>
                    </select>
                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
                        {{ translations.priority_desc if translations else 'How to handle overlapping timestamps' }}
                    </p>
                </div>

                <div class="flex justify-end">
                    <button type="submit" class="btn-primary text-white px-6 py-2 rounded-md font-medium hover:bg-blue-700 transition duration-200">
                        <i class="fas fa-compress-arrows-alt mr-2"></i>{{ translations.merge_subtitles if translations else 'Merge Subtitles' }}
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Usage Examples -->
    <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-6 dark:bg-blue-900/20 dark:border-blue-700">
        <h3 class="text-lg font-medium text-blue-800 mb-2 dark:text-blue-300">{{ translations.usage_examples if translations else 'Usage Examples' }}</h3>
        <ul class="list-disc pl-5 text-blue-700 space-y-1 dark:text-blue-300">
            <li>{{ translations.cli_list if translations else 'List tracks' }}: <code class="bg-blue-100 px-1 rounded dark:bg-blue-800/30">subtitle-tk subtitle-tracks list video.mkv</code></li>
            <li>{{ translations.cli_extract_lang if translations else 'Extract English' }}: <code class="bg-blue-100 px-1 rounded dark:bg-blue-800/30">subtitle-tk subtitle-tracks extract video.mkv --language eng</code></li>
            <li>{{ translations.cli_extract_all if translations else 'Extract all as ZIP' }}: <code class="bg-blue-100 px-1 rounded dark:bg-blue-800/30">subtitle-tk subtitle-tracks extract video.mkv --all --as-zip</code></li>
            <li>{{ translations.cli_merge if translations else 'Merge files' }}: <code class="bg-blue-100 px-1 rounded dark:bg-blue-800/30">subtitle-tk subtitle-tracks merge subs1.srt subs2.srt -o merged.srt</code></li>
        </ul>
    </div>
</div>

<style>
.tab-button {
    transition: all 0.2s;
}
.tab-button.active {
    color: #3b82f6;
    border-bottom: 2px solid #3b82f6;
}
.dark .tab-button.active {
    color: #60a5fa;
    border-color: #60a5fa;
}
.tab-content {
    display: block;
}
.tab-content.hidden {
    display: none;
}
.file-upload-row {
    align-items: center;
}
</style>

<script>
// Tab switching
function showTab(tabName) {
    // Hide all tab contents
    document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
    // Remove active class from all buttons
    document.querySelectorAll('.tab-button').forEach(el => {
        el.classList.remove('active');
        el.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
        el.classList.add('text-gray-500', 'dark:text-gray-400');
    });

    // Show selected tab content
    document.getElementById('tab-content-' + tabName).classList.remove('hidden');
    // Add active class to selected button
    const activeBtn = document.getElementById('tab-' + tabName);
    activeBtn.classList.add('active');
    activeBtn.classList.remove('text-gray-500', 'dark:text-gray-400');
    activeBtn.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');
}

// File upload handling for list tab
const videoFileListUpload = document.getElementById('video_file_list_upload');
const fileNameList = document.getElementById('file-name-list');
if (videoFileListUpload && fileNameList) {
    videoFileListUpload.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            fileNameList.textContent = this.files[0].name;
        } else {
            fileNameList.textContent = 'No file chosen';
        }
    });
}

// File upload handling for extract tab
const videoFileExtractUpload = document.getElementById('video_file_extract_upload');
const fileNameExtract = document.getElementById('file-name-extract');
if (videoFileExtractUpload && fileNameExtract) {
    videoFileExtractUpload.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            fileNameExtract.textContent = this.files[0].name;
        } else {
            fileNameExtract.textContent = 'No file chosen';
        }
    });
}

// File upload handling for merge tab
function updateFileName(input) {
    const span = input.parentElement.querySelector('.file-name');
    if (input.files && input.files[0]) {
        span.textContent = input.files[0].name;
    } else {
        span.textContent = 'No file chosen';
    }
}

document.querySelectorAll('#file-uploads .file-upload-input').forEach(input => {
    input.addEventListener('change', function() {
        updateFileName(this);
    });
});

function addFileUpload() {
    const container = document.getElementById('file-uploads');
    const count = container.querySelectorAll('.file-upload-row').length + 1;
    const div = document.createElement('div');
    div.className = 'file-upload-row flex items-center space-x-2';
    div.innerHTML = `
        <label for="subtitle_file_${count}" class="file-upload-label">
            <i class="fas fa-upload mr-2"></i>Choose File
        </label>
        <input type="file" id="subtitle_file_${count}" name="subtitle_files" class="file-upload-input" accept=".srt,.vtt,.ass">
        <span class="file-name text-gray-500 dark:text-gray-400">No file chosen</span>
        <button type="button" onclick="removeFileUpload(this)" class="text-red-500 hover:text-red-700">
            <i class="fas fa-trash"></i>
        </button>
    `;
    container.appendChild(div);
    const input = div.querySelector('.file-upload-input');
    input.addEventListener('change', function() {
        updateFileName(this);
    });
}

function removeFileUpload(button) {
    button.parentElement.remove();
}
</script>
{% endblock %}