{% extends "base.html" %}

{% block title %}Subtitle Comparison Editor{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/index.js') }}"></script>
{% endblock %}

{% block content %}
<div class="container">
    <h1>Subtitle Comparison Editor</h1>
    <div class="filter-section">
        <p>Select a comparison to review and edit: <strong id="video-count">{{ comparisons|length }}</strong> videos</p>
        <label class="filter-checkbox">
            <input type="checkbox" id="show-closed-issues" />
            Geschlossene Issues anzeigen
        </label>
    </div>
    
    <div class="comparison-list">
        {% for comp in comparisons %}
        <div class="comparison-item {{ 'comparison-item-disabled' if not comp.vtt_in_git }}" data-comparison-name="{{ comp.name }}">
            <div class="comparison-info">
                {% if comp.has_sbv and comp.has_diff and comp.vtt_in_git %}
                    <a href="{{ url_for('main.editor', comparison_name=comp.name) }}" class="comparison-title">
                        {{ comp.title }}
                    </a>
                {% else %}
                    <span class="comparison-title">{{ comp.title }}</span>
                {% endif %}
                
                {% if not comp.vtt_in_git %}
                <span class="badge bg-secondary">VTT nicht im Repository</span>
                {% endif %}
                
                {% if not comp.has_sbv %}
                <span class="badge bg-warning text-dark">Keine SBV-Datei</span>
                {% endif %}
                
                {% if comp.percentage_correct is not none %}
                <span class="badge bg-info text-dark">{{ "%.0f"|format(comp.percentage_correct) }}% korrekt</span>
                {% endif %}
                
                {% if comp.corrected %}
                <span class="correction-hint">Untertitel bereits korrigiert</span>
                {% endif %}
                
                {% if comp.has_sbv %}
                <span class="issue-badge-placeholder" data-comparison-name="{{ comp.name }}">
                    <span class="spinner-border spinner-border-sm" role="status"></span>
                </span>
                {% endif %}
            </div>
            <div class="comparison-actions">
                {% if not comp.vtt_in_git %}
                    <span class="text-muted" style="font-size: 0.9em;">Nicht bearbeitbar</span>
                    {% if comp.media_link %}
                    <div class="dropdown d-inline">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            ⋮
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ comp.media_link }}" target="_blank">Link zu Chaotikum Media</a></li>
                        </ul>
                    </div>
                    {% endif %}
                {% elif not comp.has_sbv %}
                    <label class="btn btn-warning btn-sm" for="upload-{{ comp.name }}">
                        SBV hochladen
                    </label>
                    <input type="file" id="upload-{{ comp.name }}" class="d-none upload-sbv-input" 
                           accept=".sbv" data-comparison-name="{{ comp.name }}" data-title="{{ comp.title }}">
                    {% if comp.media_link %}
                    <div class="dropdown d-inline">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            ⋮
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="{{ comp.media_link }}" target="_blank">Link zu Chaotikum Media</a></li>
                        </ul>
                    </div>
                    {% endif %}
                {% elif comp.has_diff %}
                    <a href="{{ url_for('main.editor', comparison_name=comp.name) }}" class="btn btn-primary btn-sm">Editieren</a>
                    <div class="dropdown d-inline">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            ⋮
                        </button>
                        <ul class="dropdown-menu">
                            {% if comp.media_link %}
                            <li><a class="dropdown-item" href="{{ comp.media_link }}" target="_blank">Link zu Chaotikum Media</a></li>
                            <li><hr class="dropdown-divider"></li>
                            {% endif %}
                            <li><a class="dropdown-item refresh-issue-btn" href="#" data-comparison-name="{{ comp.name }}">🔄 Issue-Status aktualisieren</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item text-danger delete-sbv-btn" href="#" data-comparison-name="{{ comp.name }}" data-title="{{ comp.title }}">SBV löschen</a></li>
                        </ul>
                    </div>
                {% else %}
                    <button class="btn btn-secondary btn-sm create-diff-btn" data-comparison-name="{{ comp.name }}" data-title="{{ comp.title }}">
                        Diff erstellen
                    </button>
                    <div class="dropdown d-inline">
                        <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                            ⋮
                        </button>
                        <ul class="dropdown-menu">
                            {% if comp.media_link %}
                            <li><a class="dropdown-item" href="{{ comp.media_link }}" target="_blank">Link zu Chaotikum Media</a></li>
                            <li><hr class="dropdown-divider"></li>
                            {% endif %}
                            <li><a class="dropdown-item text-danger delete-sbv-btn" href="#" data-comparison-name="{{ comp.name }}" data-title="{{ comp.title }}">SBV löschen</a></li>
                        </ul>
                    </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!-- Confirmation Modal -->
<div id="confirm-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <h3 id="confirm-title">Bestätigung</h3>
        <p id="confirm-message"></p>
        <div class="modal-actions">
            <button id="confirm-cancel-btn" class="btn btn-secondary">Abbrechen</button>
            <button id="confirm-ok-btn" class="btn btn-primary">OK</button>
        </div>
    </div>
</div>
{% endblock %}