{% extends "base.html" %}

{% block title %}Words to Readlang - Upload{% endblock %}

{% block content %}
<div class="upload-container">
    <h2>Upload Vocabulary File</h2>

    <form action="{{ url_for('upload.upload_file') }}" method="POST" enctype="multipart/form-data" class="upload-form">
        <div class="form-group">
            <label for="file">Select File</label>
            <input type="file" id="file" name="file" accept=".csv,.tsv,.txt" required>
            <small>Accepts CSV and TSV files (max 10MB)</small>
        </div>

        <div class="form-group">
            <label>
                <input type="checkbox" name="auto_detect" id="auto_detect" checked>
                Auto-detect format
            </label>
        </div>

        {% if previous_pairs|length > 1 %}
        <div class="form-group" id="previous-pairs">
            <label>Previously used language pairs</label>
            <div class="previous-pairs-list">
                {% for src, tgt in previous_pairs %}
                <button type="button" class="btn btn-sm btn-secondary pair-btn"
                        data-src="{{ src }}" data-tgt="{{ tgt }}">
                    {{ src|language_name }} → {{ tgt|language_name }}
                </button>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <div class="form-group" id="format-selection">
            <label for="format">Format</label>
            <select name="format" id="format" disabled>
                <option value="">-- Auto-detect --</option>
                {% for name, description in parsers.items() %}
                <option value="{{ name }}">{{ name }} - {{ description }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form-group">
            <label for="source_language">Source Language (words are in this language)</label>
            <select name="source_language" id="source_language" required>
                <option value="afr">Afrikaans (Afrikaans)</option>
                <option value="sqi">Albanian (Shqip)</option>
                <option value="amh">Amharic (አማርኛ)</option>
                <option value="ara">Arabic (العربية)</option>
                <option value="hye">Armenian (հայերեն)</option>
                <option value="asm">Assamese (অসমীয়া)</option>
                <option value="aym">Aymara (Aymar aru)</option>
                <option value="aze">Azerbaijani (azərbaycan)</option>
                <option value="bam">Bambara (bamanankan)</option>
                <option value="eus">Basque (Euskara)</option>
                <option value="bel">Belarusian (Беларуская)</option>
                <option value="ben">Bengali (বাংলা)</option>
                <option value="bos">Bosnian (Bosanski)</option>
                <option value="bre">Breton (Brezhoneg)</option>
                <option value="bul">Bulgarian (български)</option>
                <option value="mya">Burmese (မြန်မာ)</option>
                <option value="yue">Cantonese (粵語)</option>
                <option value="cat">Catalan (Català)</option>
                <option value="ceb">Cebuano (Bisaya)</option>
                <option value="cmn">Chinese (中文)</option>
                <option value="cor">Corsican (Corsu)</option>
                <option value="hrv">Croatian (Hrvatski)</option>
                <option value="ces">Czech (Čeština)</option>
                <option value="dan">Danish (Dansk)</option>
                <option value="div">Dhivehi (ދިވެހި)</option>
                <option value="nld">Dutch (Nederlands)</option>
                <option value="eng">English (English)</option>
                <option value="epo">Esperanto (Esperanto)</option>
                <option value="est">Estonian (Eesti)</option>
                <option value="ewe">Ewe (Eʋegbe)</option>
                <option value="fil">Filipino (Filipino)</option>
                <option value="fin">Finnish (Suomi)</option>
                <option value="fra">French (Français)</option>
                <option value="fry">Frisian (Frysk)</option>
                <option value="glg">Galician (Galego)</option>
                <option value="kat">Georgian (ქართული ენა)</option>
                <option value="deu">German (Deutsch)</option>
                <option value="ell">Greek (Ελληνικά)</option>
                <option value="grn">Guarani (Avañe'ẽ)</option>
                <option value="guj">Gujarati (ગુજરાતી)</option>
                <option value="hat">Haitian Creole (Kreyòl ayisyen)</option>
                <option value="hau">Hausa (Hausa)</option>
                <option value="heb">Hebrew (עברית)</option>
                <option value="hin">Hindi (हिंदी)</option>
                <option value="hun">Hungarian (Magyar)</option>
                <option value="isl">Icelandic (Íslenska)</option>
                <option value="ibo">Igbo (Asụsụ Igbo)</option>
                <option value="ind">Indonesian (Indonesia)</option>
                <option value="gle">Irish (Gaeilge)</option>
                <option value="ita">Italian (Italiano)</option>
                <option value="jpn">Japanese (日本語)</option>
                <option value="jav">Javanese (ꦧꦱꦗꦮ)</option>
                <option value="kan">Kannada (ಕನ್ನಡ)</option>
                <option value="kaz">Kazakh (Қазақ)</option>
                <option value="khm">Khmer (ភាសាខ្មែរ)</option>
                <option value="kin">Kinyarwanda (Ikinyarwanda)</option>
                <option value="kor">Korean (한국어)</option>
                <option value="kur">Kurdish (Kurmanji) (Kurdî)</option>
                <option value="ckb">Kurdish (Sorani) (سۆرانی)</option>
                <option value="kir">Kyrgyz (Кыргызча)</option>
                <option value="lao">Lao (ລາວ)</option>
                <option value="lat">Latin (Latina)</option>
                <option value="lav">Latvian (Latviešu valoda)</option>
                <option value="lin">Lingala (Lingála)</option>
                <option value="lit">Lithuanian (Lietuvių kalba)</option>
                <option value="lug">Luganda (Luganda)</option>
                <option value="ltz">Luxembourgish (Lëtzebuergesch)</option>
                <option value="mkd">Macedonian (Македонски)</option>
                <option value="mlg">Malagasy (Malagasy)</option>
                <option value="msa">Malay (Bahasa Melayu)</option>
                <option value="mal">Malayalam (മലയാളം)</option>
                <option value="mlt">Maltese (Malti)</option>
                <option value="mri">Maori (Maori)</option>
                <option value="mar">Marathi (मराठी)</option>
                <option value="mon">Mongolian (Монгол)</option>
                <option value="nep">Nepali (नेपाली)</option>
                <option value="nor">Norwegian (Norsk)</option>
                <option value="nya">Nyanja / Chichewa (Chichewa)</option>
                <option value="ori">Odia / Oriya (ଓଡ଼ିଆ)</option>
                <option value="orm">Oromo (Afaan Oromoo)</option>
                <option value="pus">Pashto (پښتو)</option>
                <option value="fas">Persian (فارسی)</option>
                <option value="pol">Polish (Polski)</option>
                <option value="por">Portuguese (Português)</option>
                <option value="pan">Punjabi (ਪੰਜਾਬੀ)</option>
                <option value="que">Quechua (Runasimi)</option>
                <option value="ron">Romanian (Română)</option>
                <option value="rus">Russian (Русский)</option>
                <option value="smo">Samoan (Gagana Samoa)</option>
                <option value="san">Sanskrit (संस्कृतम्)</option>
                <option value="gla">Scots Gaelic (Gàidhlig)</option>
                <option value="srp">Serbian (Cрпски)</option>
                <option value="sot">Sesotho (Sesotho)</option>
                <option value="sna">Shona (chiShona)</option>
                <option value="snd">Sindhi (سنڌي)</option>
                <option value="sin">Sinhala / Sinhalese (සිංහල)</option>
                <option value="slk">Slovak (Slovenský)</option>
                <option value="slv">Slovenian (Slovenski jezik)</option>
                <option value="som">Somali (Soomaaliga)</option>
                <option value="spa">Spanish (Español)</option>
                <option value="sun">Sundanese (Basa Sunda)</option>
                <option value="swa">Swahili (Kiswahili)</option>
                <option value="swe">Swedish (Svenska)</option>
                <option value="tgk">Tajik (тоҷикӣ)</option>
                <option value="tam">Tamil (தமிழ்)</option>
                <option value="tat">Tatar (Татарча)</option>
                <option value="tel">Telugu (తెలుగు)</option>
                <option value="tha">Thai (ภาษาไทย)</option>
                <option value="tir">Tigrinya (ትግርኛ)</option>
                <option value="zho">Traditional Chinese (繁體中文)</option>
                <option value="tso">Tsonga (Xitsonga)</option>
                <option value="tur">Turkish (Türkçe)</option>
                <option value="tuk">Turkmen (Türkmen)</option>
                <option value="aka">Twi / Akan (Twi)</option>
                <option value="ukr">Ukrainian (українська)</option>
                <option value="urd">Urdu (اردو)</option>
                <option value="uig">Uyghur (ئۇيغۇرچە)</option>
                <option value="uzb">Uzbek (O'zbek)</option>
                <option value="vie">Vietnamese (tiếng Việt)</option>
                <option value="cym">Welsh (Cymraeg)</option>
                <option value="xho">Xhosa (isiXhosa)</option>
                <option value="yid">Yiddish (ייִדיש)</option>
                <option value="yor">Yoruba (Yoruba)</option>
                <option value="zul">Zulu (isiZulu)</option>
            </select>
            <small>The language of the vocabulary words</small>
        </div>

        <div class="form-group">
            <label for="target_language">Target Language (translations are in this language)</label>
            <select name="target_language" id="target_language" required>
                <option value="afr">Afrikaans (Afrikaans)</option>
                <option value="sqi">Albanian (Shqip)</option>
                <option value="amh">Amharic (አማርኛ)</option>
                <option value="ara">Arabic (العربية)</option>
                <option value="hye">Armenian (հայերեն)</option>
                <option value="asm">Assamese (অসমীয়া)</option>
                <option value="aym">Aymara (Aymar aru)</option>
                <option value="aze">Azerbaijani (azərbaycan)</option>
                <option value="bam">Bambara (bamanankan)</option>
                <option value="eus">Basque (Euskara)</option>
                <option value="bel">Belarusian (Беларуская)</option>
                <option value="ben">Bengali (বাংলা)</option>
                <option value="bos">Bosnian (Bosanski)</option>
                <option value="bre">Breton (Brezhoneg)</option>
                <option value="bul">Bulgarian (български)</option>
                <option value="mya">Burmese (မြန်မာ)</option>
                <option value="yue">Cantonese (粵語)</option>
                <option value="cat">Catalan (Català)</option>
                <option value="ceb">Cebuano (Bisaya)</option>
                <option value="cmn">Chinese (中文)</option>
                <option value="cor">Corsican (Corsu)</option>
                <option value="hrv">Croatian (Hrvatski)</option>
                <option value="ces">Czech (Čeština)</option>
                <option value="dan">Danish (Dansk)</option>
                <option value="div">Dhivehi (ދިވެހި)</option>
                <option value="nld">Dutch (Nederlands)</option>
                <option value="eng">English (English)</option>
                <option value="epo">Esperanto (Esperanto)</option>
                <option value="est">Estonian (Eesti)</option>
                <option value="ewe">Ewe (Eʋegbe)</option>
                <option value="fil">Filipino (Filipino)</option>
                <option value="fin">Finnish (Suomi)</option>
                <option value="fra">French (Français)</option>
                <option value="fry">Frisian (Frysk)</option>
                <option value="glg">Galician (Galego)</option>
                <option value="kat">Georgian (ქართული ენა)</option>
                <option value="deu">German (Deutsch)</option>
                <option value="ell">Greek (Ελληνικά)</option>
                <option value="grn">Guarani (Avañe'ẽ)</option>
                <option value="guj">Gujarati (ગુજરાતી)</option>
                <option value="hat">Haitian Creole (Kreyòl ayisyen)</option>
                <option value="hau">Hausa (Hausa)</option>
                <option value="heb">Hebrew (עברית)</option>
                <option value="hin">Hindi (हिंदी)</option>
                <option value="hun">Hungarian (Magyar)</option>
                <option value="isl">Icelandic (Íslenska)</option>
                <option value="ibo">Igbo (Asụsụ Igbo)</option>
                <option value="ind">Indonesian (Indonesia)</option>
                <option value="gle">Irish (Gaeilge)</option>
                <option value="ita">Italian (Italiano)</option>
                <option value="jpn">Japanese (日本語)</option>
                <option value="jav">Javanese (ꦧꦱꦗꦮ)</option>
                <option value="kan">Kannada (ಕನ್ನಡ)</option>
                <option value="kaz">Kazakh (Қазақ)</option>
                <option value="khm">Khmer (ភាសាខ្មែរ)</option>
                <option value="kin">Kinyarwanda (Ikinyarwanda)</option>
                <option value="kor">Korean (한국어)</option>
                <option value="kur">Kurdish (Kurmanji) (Kurdî)</option>
                <option value="ckb">Kurdish (Sorani) (سۆرانی)</option>
                <option value="kir">Kyrgyz (Кыргызча)</option>
                <option value="lao">Lao (ລາວ)</option>
                <option value="lat">Latin (Latina)</option>
                <option value="lav">Latvian (Latviešu valoda)</option>
                <option value="lin">Lingala (Lingála)</option>
                <option value="lit">Lithuanian (Lietuvių kalba)</option>
                <option value="lug">Luganda (Luganda)</option>
                <option value="ltz">Luxembourgish (Lëtzebuergesch)</option>
                <option value="mkd">Macedonian (Македонски)</option>
                <option value="mlg">Malagasy (Malagasy)</option>
                <option value="msa">Malay (Bahasa Melayu)</option>
                <option value="mal">Malayalam (മലയാളം)</option>
                <option value="mlt">Maltese (Malti)</option>
                <option value="mri">Maori (Maori)</option>
                <option value="mar">Marathi (मराठी)</option>
                <option value="mon">Mongolian (Монгол)</option>
                <option value="nep">Nepali (नेपाली)</option>
                <option value="nor">Norwegian (Norsk)</option>
                <option value="nya">Nyanja / Chichewa (Chichewa)</option>
                <option value="ori">Odia / Oriya (ଓଡ଼ିଆ)</option>
                <option value="orm">Oromo (Afaan Oromoo)</option>
                <option value="pus">Pashto (پښتو)</option>
                <option value="fas">Persian (فارسی)</option>
                <option value="pol">Polish (Polski)</option>
                <option value="por">Portuguese (Português)</option>
                <option value="pan">Punjabi (ਪੰਜਾਬੀ)</option>
                <option value="que">Quechua (Runasimi)</option>
                <option value="ron">Romanian (Română)</option>
                <option value="rus">Russian (Русский)</option>
                <option value="smo">Samoan (Gagana Samoa)</option>
                <option value="san">Sanskrit (संस्कृतम्)</option>
                <option value="gla">Scots Gaelic (Gàidhlig)</option>
                <option value="srp">Serbian (Cрпски)</option>
                <option value="sot">Sesotho (Sesotho)</option>
                <option value="sna">Shona (chiShona)</option>
                <option value="snd">Sindhi (سنڌي)</option>
                <option value="sin">Sinhala / Sinhalese (සිංහල)</option>
                <option value="slk">Slovak (Slovenský)</option>
                <option value="slv">Slovenian (Slovenski jezik)</option>
                <option value="som">Somali (Soomaaliga)</option>
                <option value="spa">Spanish (Español)</option>
                <option value="sun">Sundanese (Basa Sunda)</option>
                <option value="swa">Swahili (Kiswahili)</option>
                <option value="swe">Swedish (Svenska)</option>
                <option value="tgk">Tajik (тоҷикӣ)</option>
                <option value="tam">Tamil (தமிழ்)</option>
                <option value="tat">Tatar (Татарча)</option>
                <option value="tel">Telugu (తెలుగు)</option>
                <option value="tha">Thai (ภาษาไทย)</option>
                <option value="tir">Tigrinya (ትግርኛ)</option>
                <option value="zho">Traditional Chinese (繁體中文)</option>
                <option value="tso">Tsonga (Xitsonga)</option>
                <option value="tur">Turkish (Türkçe)</option>
                <option value="tuk">Turkmen (Türkmen)</option>
                <option value="aka">Twi / Akan (Twi)</option>
                <option value="ukr">Ukrainian (українська)</option>
                <option value="urd">Urdu (اردو)</option>
                <option value="uig">Uyghur (ئۇيغۇرچە)</option>
                <option value="uzb">Uzbek (O'zbek)</option>
                <option value="vie">Vietnamese (tiếng Việt)</option>
                <option value="cym">Welsh (Cymraeg)</option>
                <option value="xho">Xhosa (isiXhosa)</option>
                <option value="yid">Yiddish (ייִדיש)</option>
                <option value="yor">Yoruba (Yoruba)</option>
                <option value="zul">Zulu (isiZulu)</option>
            </select>
            <small>The language of the translations</small>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Upload & Process</button>
            <a href="{{ url_for('main.index') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>

    <div class="format-info">
        <h3>Supported Formats</h3>
        <ul>
            {% for name, description in parsers.items() %}
            <li><strong>{{ name }}</strong>: {{ description }}</li>
            {% endfor %}
        </ul>
    </div>
</div>

<script>
// Set initial language selection from server-provided defaults
document.getElementById('source_language').value = {{ default_source|tojson }};
document.getElementById('target_language').value = {{ default_target|tojson }};

// Toggle format selection based on auto-detect checkbox
document.getElementById('auto_detect').addEventListener('change', function(e) {
    const formatSelect = document.getElementById('format');
    if (e.target.checked) {
        formatSelect.disabled = true;
        formatSelect.value = '';
    } else {
        formatSelect.disabled = false;
    }
});

// Quick-pick previously used language pairs
function updateActivePairBtn() {
    const src = document.getElementById('source_language').value;
    const tgt = document.getElementById('target_language').value;
    document.querySelectorAll('.pair-btn').forEach(function(btn) {
        btn.classList.toggle('active', btn.dataset.src === src && btn.dataset.tgt === tgt);
    });
}

document.querySelectorAll('.pair-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
        document.getElementById('source_language').value = btn.dataset.src;
        document.getElementById('target_language').value = btn.dataset.tgt;
        updateActivePairBtn();
    });
});

// Also update active state when the user manually changes a dropdown
document.getElementById('source_language').addEventListener('change', updateActivePairBtn);
document.getElementById('target_language').addEventListener('change', updateActivePairBtn);

updateActivePairBtn();
</script>
{% endblock %}