<!DOCTYPE html>
<html th:lang="${#locale.toString()}" th:lang-direction="#{language.direction}" xmlns:th="http://www.thymeleaf.org">


<th:block th:insert="~{fragments/common :: head(title=#{ocr.title})}"></th:block>
<head>
    <script>
        function handleLangSelection() {
            let checkboxes = document.getElementsByName("languages");
            let selected = false;
            for (let i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].checked) {
                    selected = true;
                    checkboxes[i].setAttribute('required', 'false');
                }
            }
            if (selected) {
                for (let i = 0; i < checkboxes.length; i++) {
                    checkboxes[i].removeAttribute('required');
                }
            }
            else {
                for (let i = 0; i < checkboxes.length; i++) {
                    checkboxes[i].setAttribute('required', 'true');
                }
            }
        }
    </script>
</head>

<body>
    <th:block th:insert="~{fragments/common :: game}"></th:block>
    <div id="page-container">
        <div id="content-wrap">
            <div th:insert="~{fragments/navbar.html :: navbar}"></div>
            <br> <br>
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-6">
                        <h2 th:text="#{ocr.header}"></h2>
                         <form th:if="${#lists.size(languages) > 0}" action="#" th:action="@{api/v1/misc/ocr-pdf}" method="post" enctype="multipart/form-data" class="mb-3">
                            <div th:replace="~{fragments/common :: fileSelector(name='fileInput', multiple=false, accept='application/pdf')}"></div>
                            <div class="mb-3">
                                <label for="languages" class="form-label" th:text="#{ocr.selectText.1}"></label>
                                <hr>
                                <div id="languages">
                                    <div th:each="language, iterStat : ${languages}">
                                        <input type="checkbox" th:name="languages" th:value="${language}" required th:id="${'language-' + language}" onchange="handleLangSelection()" />
                                        <label class="form-check-label" th:for="${'language-' + language}" th:text="${language}"></label>
                                    </div>
                                </div>
                                <hr>
                            </div>
                            <div class="mb-3">
                                <label th:text="#{ocr.selectText.10}"></label> 
                                <select class="form-control" name="ocrType">
                                    <option value="skip-text" th:text="#{ocr.selectText.6}"></option>
                                    <option value="force-ocr" th:text="#{ocr.selectText.7}"></option>
                                    <option value="Normal" th:text="#{ocr.selectText.8}"></option>
                                </select>
                            </div>
                            <br>
                            <label for="languages" class="form-label" th:text="#{ocr.selectText.9}"></label>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" name="sidecar" id="sidecar" />
                                <label class="form-check-label" for="sidecar" th:text="#{ocr.selectText.2}"></label>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" name="deskew" id="deskew" />
                                <label class="form-check-label" for="deskew" th:text="#{ocr.selectText.3}"></label>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" name="clean" id="clean" />
                                <label class="form-check-label" for="clean" th:text="#{ocr.selectText.4}"></label>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" name="clean-final" id="clean-final" />
                                <label class="form-check-label" for="clean-final" th:text="#{ocr.selectText.5}"></label>
                            </div>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" name="removeImagesAfter" id="removeImagesAfter" />
                                <label class="form-check-label" for="removeImagesAfter" th:text="#{ocr.selectText.11}"></label>
                            </div>
                            
                            
                            <div class="mb-3">
                                <label th:text="#{ocr.selectText.12}"></label> 
                                <select class="form-control" name="ocrRenderType">
                                    <option value="hocr">HOCR (Latin/Roman alphabet only)</option>
                                    <option value="sandwich">Sandwich</option>
                                </select>
                            </div>
                            <br>
                            <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{ocr.submit}"></button>
                        </form>
                        <script>
                        const languageMap = {
                        	    'afr': 'Afrikaans',
                        	    'amh': 'Amharic',
                        	    'ara': 'Arabic',
                        	    'asm': 'Assamese',
                        	    'aze': 'Azerbaijani',
                        	    'aze_cyrl': 'Azerbaijani (Cyrillic)',
                        	    'bel': 'Belarusian',
                        	    'ben': 'Bengali',
                        	    'bod': 'Tibetan',
                        	    'bos': 'Bosnian',
                        	    'bre': 'Breton',
                        	    'bul': 'Bulgarian',
                        	    'cat': 'Catalan',
                        	    'ceb': 'Cebuano',
                        	    'ces': 'Czech',
                        	    'chi_sim': 'Chinese (Simplified)',
                        	    'chi_sim_vert': 'Chinese (Simplified, Vertical)',
                        	    'chi_tra': 'Chinese (Traditional)',
                        	    'chi_tra_vert': 'Chinese (Traditional, Vertical)',
                        	    'chr': 'Cherokee',
                        	    'cos': 'Corsican',
                        	    'cym': 'Welsh',
                        	    'dan': 'Danish',
                        	    'dan_frak': 'Danish (Fraktur)',
                        	    'deu': 'German',
                        	    'deu_frak': 'German (Fraktur)',
                        	    'div': 'Divehi',
                        	    'dzo': 'Dzongkha',
                        	    'ell': 'Greek',
                        	    'eng': 'English',
                        	    'enm': 'English, Middle (1100-1500)',
                        	    'epo': 'Esperanto',
                        	    'equ': 'Math / equation detection module',
                        	    'est': 'Estonian',
                        	    'eus': 'Basque',
                        	    'fao': 'Faroese',
                        	    'fas': 'Persian',
                        	    'fil': 'Filipino',
                        	    'fin': 'Finnish',
                        	    'fra': 'French',
                        	    'frk': 'Frankish',
                        	    'frm': 'French, Middle (ca.1400-1600)',
                        	    'fry': 'Western Frisian',
                        	    'gla': 'Scottish Gaelic',
                        	    'gle': 'Irish',
                        	    'glg': 'Galician',
                        	    'grc': 'Ancient Greek',
                        	    'guj': 'Gujarati',
                        	    'hat': 'Haitian, Haitian Creole',
                        	    'heb': 'Hebrew',
                        	    'hin': 'Hindi',
                        	    'hrv': 'Croatian',
                        	    'hun': 'Hungarian',
                        	    'hye': 'Armenian',
                        	    'iku': 'Inuktitut',
                        	    'ind': 'Indonesian',
                        	    'isl': 'Icelandic',
                        	    'ita': 'Italian',
                        	    'ita_old': 'Italian (Old)',
                        	    'jav': 'Javanese',
                        	    'jpn': 'Japanese',
                        	    'jpn_vert': 'Japanese (Vertical)',
                        	    'kan': 'Kannada',
                        	    'kat': 'Georgian',
                        	    'kat_old': 'Georgian (Old)',
                        	    'kaz': 'Kazakh',
                        	    'khm': 'Central Khmer',
                        	    'kir': 'Kirghiz, Kyrgyz',
                        	    'kmr': 'Northern Kurdish',
                        	    'kor': 'Korean',
                        	    'kor_vert': 'Korean (Vertical)',
                        	    'lao': 'Lao',
                        	    'lat': 'Latin',
                        	    'lav': 'Latvian',
                        	    'lit': 'Lithuanian',
                        	    'ltz': 'Luxembourgish',
                        	    'mal': 'Malayalam',
                        	    'mar': 'Marathi',
                        	    'mkd': 'Macedonian',
                        	    'mlt': 'Maltese',
                        	    'mon': 'Mongolian',
                        	    'mri': 'Maori',
                        	    'msa': 'Malay',
                        	    'mya': 'Burmese',
                        	    'nep': 'Nepali',
                        	    'nld': 'Dutch; Flemish',
                        	    'nor': 'Norwegian',
                        	    'oci': 'Occitan (post 1500)',
                        	    'ori': 'Oriya',
                        	    'osd': 'Orientation and script detection module',
                        	    'pan': 'Panjabi, Punjabi',
                        	    'pol': 'Polish',
                        	    'por': 'Portuguese',
                        	    'pus': 'Pushto, Pashto',
                        	    'que': 'Quechua',
                        	    'ron': 'Romanian, Moldavian, Moldovan',
                        	    'rus': 'Russian',
                        	    'san': 'Sanskrit',
                        	    'sin': 'Sinhala, Sinhalese',
                        	    'slk': 'Slovak',
                        	    'slk_frak': 'Slovak (Fraktur)',
                        	    'slv': 'Slovenian',
                        	    'snd': 'Sindhi',
                        	    'spa': 'Spanish',
                        	    'spa_old': 'Spanish (Old)',
                        	    'sqi': 'Albanian',
                        	    'srp': 'Serbian',
                        	    'srp_latn': 'Serbian (Latin)',
                        	    'sun': 'Sundanese',
                        	    'swa': 'Swahili',
                        	    'swe': 'Swedish',
                        	    'syr': 'Syriac',
                        	    'tam': 'Tamil',
                        	    'tat': 'Tatar',
                        	    'tel': 'Telugu',
                        	    'tgk': 'Tajik',
                        	    'tgl': 'Tagalog',
                        	    'tha': 'Thai',
                        	    'tir': 'Tigrinya',
                        	    'ton': 'Tonga (Tonga Islands)',
                        	    'tur': 'Turkish',
                        	    'uig': 'Uighur, Uyghur',
                        	    'ukr': 'Ukrainian',
                        	    'urd': 'Urdu',
                        	    'uzb': 'Uzbek',
                        	    'uzb_cyrl': 'Uzbek (Cyrillic)',
                        	    'vie': 'Vietnamese',
                        	    'yid': 'Yiddish',
                        	    'yor': 'Yoruba'
                        	};
                        
                     	// Step 2: Function to get the full language name
                        function getFullLanguageName(shortCode) {
                            return languageMap[shortCode] || shortCode;
                        }

                        // Step 3: Apply the function to your labels
                        document.addEventListener('DOMContentLoaded', () => {
                        	const labels = document.querySelectorAll('#languages .form-check-label');
                            labels.forEach(label => {
                                const languageCode = label.getAttribute('for').split('-')[1];
                                label.textContent = getFullLanguageName(languageCode);
                            });
                        });
                        
                        </script>
                        <p th:text="#{ocr.credit}"></p>
                        <p th:text="#{ocr.help}"></p>
                        <a href="https://github.com/Frooodle/Stirling-PDF/blob/main/HowToUseOCR.md">https://github.com/Frooodle/Stirling-PDF/blob/main/HowToUseOCR.md</a>
                    </div>
                </div>
            </div>
        </div>
        <div th:insert="~{fragments/footer.html :: footer}"></div>
    </div>
</body>
</html>