@use super::subtemplates::{head_html, input_dropdown_html, main_body_html, footer_html};
@use super::overlays::{page_overlays_html, search_overlays_html, mobile_overlays_html};
@use crate::BaseData;

@(data: BaseData)

<!DOCTYPE html>
<html lang="en">
   @:head_html(&data)

   <body>

      <header id="search-row" class="wrap-row">
         <div class="d-flex center">

            <!-- Settings Button -->
            <div class="btn-container"> 
               <div class="settingsSvg settingsBtn" data-p='"button", @{"props":@{"name": "Settings Overlay", "category": "modal"@}@}' data-toggle="modal" data-target="#settingsModal"></div>
            </div>

            <!-- Home / Info Button -->
            <div class="btn-container right">
               <div class="homeBtn noselect" onmousedown='onHomeClick(event)'>home</div>
               <div class="infoSvg infoBtn" data-p='"button", @{"props":@{"name": "Help", "category": "page-swap"@}@}' onclick='openHelpPage()'></div>
            </div>

            <!-- Search Bar -->
            <div id="searchDiv">
               <div class="searchDivInner">
                  <form method="GET" action="/search" onsubmit="return onSearchStart()">
                     <div class="inner-form form-main">
                        
                        @:input_dropdown_html(&data)

                        <div class="input-field second-wrap">
                           <div class="input-group">
                              <input id="search" name="s" type="text" value="@data.get_query_str()" placeholder='@data.gettext("Search...")' tabindex="1" lang="ja" autocapitalize="off" autocomplete="off" data-autoload="false" data-effective-keyword=""/>
                              <span id="shadow-text"></span>
                              <button id="emptyInput" type="button" class="btn bg-transparent" onclick="emptySearchInput()">
                                 <div class="clearSvg"></div>
                              </button>
                              <span id="search-vl"></span>
                              <button id="searchBtn" class="search-embedded-btn search" type="submit">
                                 <div class="searchSvg"></div>
                              </button>
                              <button type="button" id="voiceBtn" class="search-embedded-btn p" data-p='"button", @{"props":@{"name": "Voice Overlay", "category": "toggle"@}@}' onclick='toggleSpeakOverlay()'>
                                 <div class="voiceSvg"></div> 
                              </button>
                              <button type="button" class="search-embedded-btn radical p" data-p='"button", @{"props":@{"name": "Radical Overlay", "category": "toggle"@}@}' onclick="toggleRadicalOverlay()">
                                 <span class="rad-picker-icon noselect">éƒ¨</span>
                              </button>
                          </div>
                        </div>
                     </div>
                  </form>
               </div>
               
               @:search_overlays_html(&data)

            </div>
         </div>
      </header>

      <main>
         @:main_body_html(&data)
         @:page_overlays_html(&data)
         @:mobile_overlays_html(&data)
      </main>

      @:footer_html(&data, false)

   </body>
</html>
