{% extends "base.html" %}
{% load translation_tags %}

{% block title %}Translations - {{ site.domain }}{% endblock %}

{% block content %}
<div class="translations-list">
    <h1>Translations for {{ site.domain }}</h1>
    <p>Language: <strong>{{ language }}</strong></p>
    
    <div class="translations-search">
        <input type="text" id="search-input" placeholder="Search translations..." class="form-control">
    </div>
    
        <form method="post" action="{% url 'translations:save_bulk' %}" id="translations-form" class="js-form-save-bar" data-save-bar-unsaved="You have unsaved translation changes." data-save-bar-actions=".form-actions">
        {% csrf_token %}
        <input type="hidden" name="language" value="{{ language }}">
        
        <!-- Tabs -->
        <div class="translation-tabs">
            {% for group_key, group_name in group_names.items %}
                <button type="button" class="tab-button {% if forloop.first %}active{% endif %}" data-tab="{{ group_key }}">
                    {{ group_name }} ({{ grouped_keys|get_item:group_key|length }})
                </button>
            {% endfor %}
            {% optional_include "translations/translations_tab_button_extra.html" site=site %}
        </div>
        
        <!-- Tab Content -->
        {% for group_key, group_name in group_names.items %}
            <div class="tab-content {% if forloop.first %}active{% endif %}" id="tab-{{ group_key }}">
                <table class="translations-table">
                    <thead>
                        <tr>
                            <th>Original (English)</th>
                            <th>Translation ({{ language }})</th>
                            <th>Context</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in grouped_keys|get_item:group_key %}
                            <tr class="translation-row">
                                <td class="original-key">
                                    <div>{{ item.key.key|linebreaksbr }}</div>
                                    {% if item.key.context %}
                                        <small class="context">Context: {{ item.key.context }}</small>
                                    {% endif %}
                                </td>
                                <td class="translation-input">
                                    <textarea 
                                        name="translation_{{ item.key.id }}" 
                                        class="form-control translation-text"
                                        rows="2"
                                        data-key-id="{{ item.key.id }}"
                                    >{{ item.translation_text }}</textarea>
                                </td>
                                <td class="context-col">
                                    {% if item.key.context %}
                                        <small>{{ item.key.context }}</small>
                                    {% else %}
                                        <small class="text-muted">—</small>
                                    {% endif %}
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="3">No translation keys found in this group. Run 'python manage.py scan_translations' to scan for translation strings.</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endfor %}
        
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save All Translations</button>
            <a href="{% url 'domains:landing' %}" class="btn btn-secondary">Back to Domains</a>
        </div>
    </form>
    {% optional_include "translations/translations_tab_content_extra.html" site=site %}
</div>

<style>
.translations-list {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.translations-search {
    margin: 20px 0;
}

.translations-search input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
}

.translation-tabs {
    display: flex;
    border-bottom: 2px solid #ddd;
    margin: 20px 0 0 0;
}

.tab-button {
    padding: 12px 24px;
    background: #f5f5f5;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    margin-right: 4px;
    transition: all 0.2s;
}

.tab-button:hover {
    background: #e9e9e9;
    color: #333;
}

.tab-button.active {
    background: white;
    color: #007bff;
    border-bottom-color: #007bff;
    font-weight: 600;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.translations-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.translations-table th {
    background: #f5f5f5;
    padding: 10px;
    text-align: left;
    border-bottom: 2px solid #ddd;
}

.translations-table td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.translations-table .original-key {
    width: 30%;
    font-family: monospace;
    font-size: 0.9em;
}

.translations-table .translation-input {
    width: 50%;
}

.translations-table .context-col {
    width: 20%;
    font-size: 0.9em;
}

.translation-text {
    width: 100%;
    min-height: 60px;
    font-family: inherit;
}

.context {
    color: #666;
    font-style: italic;
    display: block;
    margin-top: 5px;
}


.form-actions {
    margin-top: 20px;
    text-align: right;
}

.btn {
    padding: 10px 20px;
    margin-left: 10px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background: #007bff;
    color: white;
}

.btn-primary:hover {
    background: #0056b3;
}

.btn-secondary {
    background: #6c757d;
    color: white;
}

.btn-secondary:hover {
    background: #545b62;
}

.form-control {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Tab functionality
    const tabButtons = document.querySelectorAll('.tab-button');
    const tabContents = document.querySelectorAll('.tab-content');
    
    tabButtons.forEach(button => {
        button.addEventListener('click', function() {
            const targetTab = this.getAttribute('data-tab');
            
            // Remove active class from all buttons and contents
            tabButtons.forEach(btn => btn.classList.remove('active'));
            tabContents.forEach(content => content.classList.remove('active'));
            
            // Add active class to clicked button and corresponding content
            this.classList.add('active');
            document.getElementById('tab-' + targetTab).classList.add('active');
        });
    });
    
    // Search functionality - search within active tab
    const searchInput = document.getElementById('search-input');
    
    searchInput.addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        const activeTab = document.querySelector('.tab-content.active');
        const rows = activeTab ? activeTab.querySelectorAll('.translation-row') : [];
        
        rows.forEach(row => {
            const text = row.textContent.toLowerCase();
            row.style.display = text.includes(searchTerm) ? '' : 'none';
        });
    });
    
    // Form submission - save all translations at once
    const form = document.getElementById('translations-form');
    
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // Submit the form normally - backend will handle bulk save
        form.submit();
    });
});
</script>
{% endblock %}