@use crate::BaseData;
@(data: &BaseData)

<div class="modal fade" id="settingsModal">
    <div class="modal-dialog">
       <div class="modal-content">
          <div class="modal-body">
            <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
               <div class="mdl-layout__header">
                 <div class="mdl-layout__header-row">
                   <!-- Title -->
                   <span class="mdl-layout-title">Settings</span>
                   <button type="button" class="close" data-dismiss="modal">Ã—</button>
                 </div>
                 <!-- Tabs -->
                 <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
                   <a href="#scroll-tab-1" class="mdl-layout__tab is-active">@data.gettext("Language")</a>
                   <a href="#scroll-tab-2" class="mdl-layout__tab">@data.gettext("Search")</a>
                   <a href="#scroll-tab-3" class="mdl-layout__tab">@data.gettext("Display")</a>
                   <a href="#scroll-tab-4" class="mdl-layout__tab">@data.gettext("Other")</a>
                 </div>
               </div>

               <!-- Content -->
               <div class="mdl-layout__content">

                  <!-- Page 1 -->
                  <section class="mdl-layout__tab-panel is-active" id="scroll-tab-1">
                     <div class="page-content">
                        <div class="d-flex flex-column">
                           <div class="settings-entry">
                              <span class="inner-title">@data.gettext("Default search language")</span>
                              <div class="choices noselect" data-type="select-one" tabindex="1">
                                 <div class="choices__inner">
                                    <select data-trigger="" name="type" data-onchange='alterLanguage_search' class="hidden">
                                       <option value="0">@data.gettext("English")</option>
                                    </select>
                                    <div class="choices__list choices__list--single">
                                       <div class="choices__item choices__item--selectable">@data.gettext("English")</div>
                                    </div>
                                 </div>
                                 <div class="choices__list choices__list--dropdown">
                                 <div id="search-lang-select" class="choices__list p" data-p='"button", @{"props":@{"name": "Search language change Select", "category": "settings"@}@}'>
                                    <div data-value="en-US" class="choices__item choices__item--choice choices__item--selectable">@data.gettext("English")</div>
                                    <div data-value="de-DE" class="choices__item choices__item--choice choices__item--selectable">@data.gettext("German")</div>
                                    <div data-value="es-ES" class="choices__item choices__item--choice choices__item--selectable">@data.gettext("Spanish")</div>
                                    <div data-value="fr-FR" class="choices__item choices__item--choice choices__item--selectable">@data.gettext("French")</div>
                                    <div data-value="nl-NL" class="choices__item choices__item--choice choices__item--selectable">@data.gettext("Dutch")</div>
                                    <div data-value="sv-SE" class="choices__item choices__item--choice choices__item--selectable">@data.gettext("Swedish")</div>
                                    <div data-value="ru"    class="choices__item choices__item--choice choices__item--selectable">@data.gettext("Russian")</div>
                                    <div data-value="hu"    class="choices__item choices__item--choice choices__item--selectable">@data.gettext("Hungarian")</div>
                                    <div data-value="sl-SI" class="choices__item choices__item--choice choices__item--selectable">@data.gettext("Slovenian")</div>
                                 </div>
                              </div>
                           </div>
                        </div>

                        <div class="settings-entry">
                           <span class="inner-title">@data.gettext("Page language")</span>
                           <div class="choices noselect" data-type="select-one" tabindex="1">
                              <div class="choices__inner">
                                 <select name="type" data-onchange='alterLanguage_page' class="hidden">
                                    <option value="0">@data.gettext("English")</option>
                                 </select>
                                 <div class="choices__list choices__list--single">
                                    <div class="choices__item choices__item--selectable">@data.gettext("English")</div>
                                 </div>
                              </div>
                              <div class="choices__list choices__list--dropdown p" data-p='"button", @{"props":@{"name": "Page language change Select", "category": "settings"@}@}'>
                                 <div id="page-lang-select" class="choices__list">
                                    <div data-value="en-US" class="choices__item choices__item--choice choices__item--selectable">@data.gettext("English")</div>
                                    <div data-value="de-DE" class="choices__item choices__item--choice choices__item--selectable">@data.gettext("German")</div>
                                    <div data-value="hu"    class="choices__item choices__item--choice choices__item--selectable">@data.gettext("Hungarian")</div>
                                    <div data-value="ja-JP" class="choices__item choices__item--choice choices__item--disabled">@data.gettext("Japanese")</div>
                                    <div data-value="es-ES" class="choices__item choices__item--choice choices__item--disabled">@data.gettext("Spanish")</div>
                                    <div data-value="fr-FR" class="choices__item choices__item--choice choices__item--disabled">@data.gettext("French")</div>
                                    <div data-value="nl-NL" class="choices__item choices__item--choice choices__item--disabled">@data.gettext("Dutch")</div>
                                    <div data-value="sv-SE" class="choices__item choices__item--choice choices__item--disabled">@data.gettext("Swedish")</div>
                                    <div data-value="ru"    class="choices__item choices__item--choice choices__item--disabled">@data.gettext("Russian")</div>
                                    <div data-value="sl-SI" class="choices__item choices__item--choice choices__item--disabled">@data.gettext("Slovenian")</div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                   </div>
                 </section>

                 <!-- Page 2 -->
                 <section class="mdl-layout__tab-panel" id="scroll-tab-2">
                     <div class="page-content">
                        <div class="d-flex flex-column">
                           <div class="inner-header">@data.gettext("General")</div>
                           <div class="settings-entry no-gap">
                              <span class="inner-title">@data.gettext("Always show english results"):</span>
                              <label for="show_eng_settings" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                                 <input id="show_eng_settings" type="checkbox" class="mdl-checkbox__input" onchange="Settings.alterSearch('alwaysShowEnglish', event.target.checked, true)">
                              </label>
                           </div>
                           <div class="settings-entry sub" id="eng_on_top_parent">
                              <span class="inner-title">@data.gettext("Show english results on top"):</span>
                              <label for="show_eng_on_top_settings" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                                 <input id="show_eng_on_top_settings" type="checkbox" class="mdl-checkbox__input" onchange="Settings.alterSearch('showEnglishOnTop', event.target.checked)">
                              </label>
                           </div>
                           <div class="settings-entry">
                              <span class="inner-title">@data.gettext("Focus search bar on load"):</span>
                              <label for="focus_search_bar_settings" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                                 <input id="focus_search_bar_settings" type="checkbox" class="mdl-checkbox__input" onchange="Settings.alterSearch('focusSearchbar', event.target.checked, true)">
                              </label>
                           </div>
                           <div class="settings-entry sub" id="select_searchbar_content_parent">
                              <span class="inner-title">@data.gettext("Select input on load"):</span>
                              <label for="select_searchbar_content_settings" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                                 <input id="select_searchbar_content_settings" type="checkbox" class="mdl-checkbox__input" onchange="Settings.alterSearch('selectSearchbarContent', event.target.checked)">
                              </label>
                           </div>
                           <div class="settings-entry txt-input">
                              <span id="rpr" class="inner-title txt-input">@data.gettext("Results per page"):</span>
                              <form action="#" onsubmit="return false">
                                 <div class="mdl-textfield mdl-js-textfield">
                                   <input class="mdl-textfield__input" type="text" pattern="\b(0*(?:[1-9][0-9]?|100))\b" id="items_per_page_input" onblur="Settings.alterSearch('itemsPerPage', event.target.value)">
                                   <label class="mdl-textfield__label" for="items_per_page_input">@data.gettext("Number...")</label>
                                   <span class="mdl-textfield__error">@data.gettext("Input has to be in range of 1 and 100!")</span>
                                 </div>
                               </form>
                               <div class="mdl-tooltip" for="rpr">
                                 @data.gettext("max amount of names/words/sentences shown per page")
                               </div>
                           </div>

                           <div class="inner-header">@data.gettext("Sentences")</div>
                           <div class="settings-entry">
                              <span class="inner-title">@data.gettext("Show Furigana"):</span>
                              <label for="show_sentence_furigana_settings" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                                 <input checked id="show_sentence_furigana_settings" type="checkbox" class="mdl-checkbox__input" onchange="Settings.alterSearch('showFurigana', event.target.checked)">
                              </label>
                           </div>

                           <div class="inner-header">@data.gettext("Words")</div>
                           <div class="settings-entry">
                              <span class="inner-title">@data.gettext("Show example sentences"):</span>
                              <label for="show_example_sentences_settings" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                                 <input checked id="show_example_sentences_settings" type="checkbox" class="mdl-checkbox__input" onchange="Settings.alterSearch('showExampleSentences', event.target.checked)">
                              </label>
                           </div>
                        
                           <div class="inner-header">@data.gettext("Kanji")</div>
                           <div class="settings-entry no-gap">
                              <span id="krp" class="inner-title txt-input">@data.gettext("Items per page"):</span>
                              <form action="#" onsubmit="return false">
                                 <div class="mdl-textfield mdl-js-textfield">
                                   <input class="mdl-textfield__input" type="text" pattern="\b(0*(?:[1-9][0-9]?|100))\b" id="kanji_per_page_input" onblur="Settings.alterSearch('kanjiPerPage', event.target.value)">
                                   <label class="mdl-textfield__label" for="kanji_per_page_input">@data.gettext("Number...")</label>
                                   <span class="mdl-textfield__error">@data.gettext("Input has to be in range of 1 and 100!")</span>
                                 </div>
                               </form>
                               <div class="mdl-tooltip" for="krp">
                                 @data.gettext("max amount of kanji shown per page")
                               </div>
                           </div>
                        </div>
                     </div>
                 </section>

                 <!-- Page 3 -->
                 <section class="mdl-layout__tab-panel" id="scroll-tab-3">
                     <div class="page-content">
                        <div class="d-flex flex-column">
                           <div class="settings-entry">
                              <span class="inner-title display">@data.gettext("Use dark mode"):</span>
                              <label for="use_dark_mode_settings" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                                 <input checked id="use_dark_mode_settings" type="checkbox" class="mdl-checkbox__input p" data-p='"button", @{"props":@{"name": "Dark Mode", "category": "settings"@}@}' onchange="setTheme(event.target.checked ? 'dark' : 'light')">
                              </label>
                           </div>
                           <div class="settings-entry">
                              <span class="inner-title display">@data.gettext("Show kanji on load"):</span>
                              <label for="show_kanji_on_load_settings" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                                 <input checked id="show_kanji_on_load_settings" type="checkbox" class="mdl-checkbox__input p" data-p='"button", @{"props":@{"name": "Show Kanji on load", "category": "settings"@}@}' onchange="Settings.alterDisplay('showKanjiOnLoad', event.target.checked)">
                              </label>
                           </div>
                           <div class="settings-entry">
                              <span class="inner-title display">@data.gettext("Show kanji numbers"):</span>
                              <label for="show_kanji_numbers_settings" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                                 <input checked id="show_kanji_numbers_settings" type="checkbox" class="mdl-checkbox__input p" data-p='"button", @{"props":@{"name": "Show Kanji numbers", "category": "settings"@}@}' onchange="Settings.alterDisplay('showKanjiNumbers', event.target.checked); if(JotoTools.getCurrentSearchType() == 1) location.reload();">
                              </label>
                           </div>
                           <div class="settings-entry">
                              <span class="inner-title">@data.gettext("Default kanji animation speed"):</span>
                              <div class="slidercontainer settings">
                                 <input id="show_anim_speed_settings" type="range" min="0.05" max="2" value="1" step="0.05" class="slider speedSlider settings" oninput="Settings.alterDisplay('kanjiAnimationSpeed', event.target.value); OverlaySettings.updateSliders();">
                                 <span id="show_anim_speed_settings_slider">2</span>
                              </div>
                           </div>
                        </div>
                     </div>
                 </section>

                 <!-- Page 4 -->
                 <section class="mdl-layout__tab-panel" id="scroll-tab-4">
                     <div class="page-content">
                        <div class="d-flex flex-column">
                            <div class="settings-entry">
                                <span class="inner-title">@data.gettext("Enable Quick-Copy"):</span>
                                <label for="dbl_click_copy_settings" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                                    <input checked id="dbl_click_copy_settings" type="checkbox" class="mdl-checkbox__input" onchange="Settings.alterOther('enableDoubleClickCopy', event.target.checked)">
                                </label>
                            </div>
                            <div class="settings-entry">
                                <span class="inner-title">@data.gettext("Share usage statistics"):</span>
                                <label for="tracking_settings" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                                    <input checked id="tracking_settings" type="checkbox" class="mdl-checkbox__input" onchange="Settings.onTrackingAcceptChange(event.target.checked)">
                                </label>
                            </div>
                            <div class="settings-entry ex">
                                <label>@data.gettext("STATISTICS_EXPLANATION")</label>
                            </div>
                        </div>
                     </div>
                 </section>
               </div>
             </div>
          </div>
        </div>
    </div>
 </div>
