{% extends "base.html" %}

{% block title %}{{ translations.convert_tool if translations else 'Subtitle Format Converter' }}{% 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.convert_tool if translations else 'Subtitle Format Converter' }}</h1>
        <p class="text-gray-600 dark:text-gray-300">
            {{ translations.convert_desc if translations else 'Convert subtitle files between different formats (SRT, VTT, ASS, TTML, and more).' }}
        </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 %}

    <form method="post" class="bg-white rounded-lg shadow-md p-6 dark:bg-slate-800">
        <div class="mb-6">
            <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="subtitle_file">
                {{ translations.upload_subtitle_file if translations else 'Upload Subtitle File' }}
            </label>
            <div class="flex items-center">
                <label for="subtitle_file_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="subtitle_file_upload" name="subtitle_file_upload" class="file-upload-input" accept=".srt,.vtt,.ass,.ssa,.sub,.sbv,.txt,.sami,.smi,.csv,.tsv,.json,.TextGrid">
                <span id="file-name" class="ml-4 text-gray-500 dark:text-gray-400">{{ translations.no_file_chosen if translations else 'No file chosen' }}</span>
            </div>
            <textarea
                id="subtitle_file"
                name="subtitle_file"
                rows="10"
                class="form-input w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 mt-2 dark:bg-slate-700 dark:border-slate-600 dark:text-white"
                placeholder="{{ translations.paste_subtitle_content if translations else 'Paste your subtitle content here or upload a file...' }}"
                required
            ></textarea>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ translations.paste_subtitle_desc if translations else 'Paste the content of your subtitle file here or upload a file' }}</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
            <div>
                <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="input_format">
                    {{ translations.input_format if translations else 'Input Format' }}
                </label>
                <select
                    id="input_format"
                    name="input_format"
                    class="form-input w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"
                >
                    <option value="auto" selected>{{ translations.auto_detect if translations else 'Auto-detect' }}</option>
                    <option value="srt">SRT</option>
                    <option value="vtt">VTT (WebVTT)</option>
                    <option value="ass">ASS (Advanced Substation)</option>
                    <option value="ssa">SSA (SubStation Alpha)</option>
                    <option value="sub">SUB</option>
                    <option value="sbv">SBV (YouTube)</option>
                    <option value="txt">TXT</option>
                    <option value="sami">SAMI</option>
                    <option value="smi">SMI</option>
                    <option value="csv">CSV</option>
                    <option value="tsv">TSV</option>
                    <option value="json">JSON</option>
                    <option value="textgrid">TextGrid (Praat)</option>
                    <option value="gemini">Gemini/YouTube Transcript</option>
                </select>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ translations.input_format_desc if translations else 'Select input format or auto-detect' }}</p>
            </div>

            <div>
                <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="output_format">
                    {{ translations.output_format if translations else 'Output Format' }} <span class="text-red-500">*</span>
                </label>
                <select
                    id="output_format"
                    name="output_format"
                    class="form-input w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-700 dark:border-slate-600 dark:text-white"
                    required
                >
                    <option value="">{{ translations.select_output_format if translations else 'Select output format...' }}</option>
                    <option value="srt">SRT</option>
                    <option value="vtt">VTT (WebVTT)</option>
                    <option value="ass">ASS (Advanced Substation)</option>
                    <option value="ssa">SSA (SubStation Alpha)</option>
                    <option value="sub">SUB</option>
                    <option value="sbv">SBV (YouTube)</option>
                    <option value="txt">TXT</option>
                    <option value="sami">SAMI</option>
                    <option value="smi">SMI</option>
                    <option value="csv">CSV</option>
                    <option value="tsv">TSV</option>
                    <option value="json">JSON</option>
                    <option value="textgrid">TextGrid (Praat)</option>
                    <option value="gemini">Gemini/YouTube Transcript</option>
                    <option value="ttml">TTML (Generic)</option>
                    <option value="imsc1">TTML (IMSC1 - Netflix/Streaming)</option>
                    <option value="ebu_tt_d">TTML (EBU-TT-D - European Broadcast)</option>
                    <option value="avid_ds">Avid Media Composer (DS)</option>
                    <option value="fcpxml">Final Cut Pro XML</option>
                    <option value="premiere_xml">Adobe Premiere Pro XML</option>
                    <option value="audition_csv">Adobe Audition CSV</option>
                    <option value="edimarker_csv">Pro Tools (EdiMarker CSV)</option>
                </select>
                <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ translations.output_format_desc if translations else 'Select the format to convert to' }}</p>
            </div>
        </div>

        <div class="mb-6">
            <label class="flex items-center">
                <input
                    type="checkbox"
                    id="preserve_formatting"
                    name="preserve_formatting"
                    checked
                    class="form-checkbox h-5 w-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500 dark:border-slate-600"
                >
                <span class="ml-2 text-gray-700 dark:text-gray-300">{{ translations.preserve_formatting if translations else 'Preserve text formatting' }}</span>
            </label>
            <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ translations.preserve_formatting_desc if translations else 'Keep original text formatting (HTML tags, whitespace, etc.). Uncheck to normalize text.' }}</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"
            >
                {{ translations.convert_subtitles if translations else 'Convert Subtitles' }}
            </button>
        </div>
    </form>

    <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.convert_srt_to_vtt if translations else 'Convert SRT to VTT' }}: <code class="bg-blue-100 px-1 rounded dark:bg-blue-800/30">subtitle_convert.py input.srt -o output.vtt</code></li>
            <li>{{ translations.convert_ass_to_srt if translations else 'Convert ASS to SRT' }}: <code class="bg-blue-100 px-1 rounded dark:bg-blue-800/30">subtitle_convert.py input.ass -o output.srt</code></li>
            <li>{{ translations.convert_normalize if translations else 'Convert with text normalization' }}: <code class="bg-blue-100 px-1 rounded dark:bg-blue-800/30">subtitle_convert.py input.srt -o output.sbv --normalize-text</code></li>
        </ul>
    </div>

    <div class="bg-gray-50 border border-gray-200 rounded-lg p-4 mt-4 dark:bg-slate-700/50 dark:border-slate-600">
        <p class="text-sm text-gray-600 dark:text-gray-400">
            <i class="fas fa-info-circle mr-1"></i>
            <strong>{{ translations.powered_by if translations else 'Powered by' }}:</strong>
            <a href="https://github.com/lattifai/captions" target="_blank" rel="noopener noreferrer" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300">
                lattifai-captions
            </a>
            {{ translations.license_info if translations else ' (Apache-2.0 License)' }}
        </p>
    </div>
</div>

<script>
    // File upload handling
    const fileInput = document.getElementById('subtitle_file_upload');
    const fileNameSpan = document.getElementById('file-name');
    const textArea = document.getElementById('subtitle_file');
    const inputFormatSelect = document.getElementById('input_format');

    fileInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            const fileName = this.files[0].name;
            fileNameSpan.textContent = fileName;

            // Try to auto-detect format from extension
            const ext = fileName.split('.').pop().toLowerCase();
            const formatMap = {
                'srt': 'srt',
                'vtt': 'vtt',
                'ass': 'ass',
                'ssa': 'ssa',
                'sub': 'sub',
                'sbv': 'sbv',
                'txt': 'txt',
                'sami': 'sami',
                'smi': 'smi',
                'csv': 'csv',
                'tsv': 'tsv',
                'json': 'json',
                'textgrid': 'textgrid'
            };

            if (formatMap[ext]) {
                inputFormatSelect.value = formatMap[ext];
            }

            // Read file content
            const reader = new FileReader();
            reader.onload = function(e) {
                textArea.value = e.target.result;
            }
            reader.readAsText(this.files[0]);
        } else {
            fileNameSpan.textContent = 'No file chosen';
        }
    });
</script>
{% endblock %}