{% extends "base.html" %}

{% block title %}{{ translations.sync_check_tool if translations else 'Sync Check' }}{% 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">
            <i class="fas fa-stethoscope mr-2"></i>{{ translations.sync_check_tool if translations else 'Sync Check' }}
        </h1>
        <p class="text-gray-600 dark:text-gray-300 mb-4">
            {{ translations.sync_check_page_desc if translations else 'Upload a video and a subtitle file. We probe the video, analyze the subtitles, and compare against any embedded subtitle track to diagnose offset, drift, or a version mismatch.' }}
        </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>

        {% 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" enctype="multipart/form-data">
            <div class="mb-6">
                <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="video_file">
                    {{ translations.upload_video_file if translations else 'Upload Video File' }}
                </label>
                <div class="flex items-center">
                    <label for="video_file" class="file-upload-label">
                        <i class="fas fa-video mr-2"></i> {{ translations.choose_file if translations else 'Choose File' }}
                    </label>
                    <input type="file" id="video_file" name="video_file" class="file-upload-input" accept="video/*,.mkv,.mp4,.avi,.mov,.m2ts,.webm" required>
                    <span id="video-file-name" 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="mb-6">
                <label class="block text-gray-700 font-medium mb-2 dark:text-gray-300" for="srt_file">
                    {{ translations.upload_srt_file if translations else 'Upload Subtitle File (.srt)' }}
                </label>
                <div class="flex items-center">
                    <label for="srt_file" 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="srt_file" name="srt_file" class="file-upload-input" accept=".srt" required>
                    <span id="srt-file-name" 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-center">
                <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-stethoscope mr-2"></i>{{ translations.run_check if translations else 'Run Check' }}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    function bindFileName(inputId, spanId) {
        const input = document.getElementById(inputId);
        const span = document.getElementById(spanId);
        if (input && span) {
            input.addEventListener('change', function () {
                span.textContent = this.files.length ? this.files[0].name : '';
            });
        }
    }
    bindFileName('video_file', 'video-file-name');
    bindFileName('srt_file', 'srt-file-name');
</script>
{% endblock %}