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

@(data: BaseData)

<!DOCTYPE html>
<html lang="en">
   @:head_html(&data)
   <link rel="stylesheet" type="text/css" href="variable_assets/@data.asset_hash/assets/css/page/indexPage.css">
   <link rel="stylesheet" type="text/css" href="variable_assets/@data.asset_hash/assets/css/page/multiPage/markdown.css">
   <link rel="stylesheet" type="text/css" href="variable_assets/@data.asset_hash/assets/css/overlay/notificationOverlay.css">
   <script defer src="/variable_assets/@data.asset_hash/assets/js/page/overlay/notifications.js"></script>

   <body class="index">
      <main class="noselect">

          <!-- Title Icon -->
         <div onmousedown="return false" class="title">
            <img class="titleImg" src="variable_assets/@data.asset_hash/assets/jotokun/JotoTitle.svg"> 
         </div>

         <!-- Search Row -->
         <div id="search-row" class="wrap-row">
            <div class="d-flex center">

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

                           <div class="input-field second-wrap">
                              <div class="input-group">
                                 <input id="search" name="s" type="text" value="" placeholder='@data.gettext("Search...")' tabindex="1" lang="ja" autocapitalize="off" autocomplete="off" data-autoload="false" data-effective-keyword="">
                                 <span id="shadow-text"></span>
                                 <button type="button" class="btn bg-transparent search-embedded-btn p" data-p='"button", @{"props":@{"name": "Image upload Overlay", "category": "modal"@}@}' onclick="toggleImageSearchOverlay()">
                                    <div class="cameraSvg index"></div>
                                 </button>
                                 <button type="button" class="btn bg-transparent search-embedded-btn p" data-p='"button", @{"props":@{"name": "Voice input Overlay", "category": "modal"@}@}' onclick="toggleSpeakOverlay()">
                                    <div class="voiceSvg index"></div> 
                                 </button>
                              </div>
                           </div>
                           
                        </div>
                     </form>
                  </div>
                  
                  @:search_overlays_html(&data)

               </div>
            </div>

            <div id="notifications-container" class="hidden">
               <div class="notifications-info-container">
                  <div class="notification-title">
                     @data.gettext("Notifications")
                  </div>
                  <div id="notification-content">
                     <div id="no-result" class="notification-entry hidden">
                        @data.gettext("No new notifications")
                     </div>
                     <div class="button-container">
                        <button class="overlay-button p" data-p='"button", @{"props":@{"name": "All notifications", "category": "page-swap"@}@}' onclick="showAllNotifications()">@data.gettext("Show all")</button>
                        <button class="overlay-button" onclick="closeNotifications()">@data.gettext("Close")</button>
                     </div>
                  </div>
               </div>
            </div>

            @:page_overlays_html(&data)

            <div class="modal fade" id="notificationModal">
               <div class="modal-dialog">
                  <div class="modal-content">
           
                     <!-- Modal Header -->
                     <div class="modal-header">
                        <h3 id="notification-detail-head" class="modal-title"></h3>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                     </div>
                     
                     <!-- Modal body -->
                     <div id="notification-detail-body" class="modal-body"></div>
                  </div>
               </div>
            </div>

         </div>
       
         <!-- Search / Radical Button -->
         <div class="index-btn-container">
            <div class="input-field third-wrap index">
               <button id="searchBtn" class="btn-search" onclick="onSearchStart()">
                  <div class="flex-center">
                     <div>@data.gettext("Search")</div>
                     <div class="searchSvg index"></div>
                  </div>
               </button>
            </div>
   
            <div class="input-field third-wrap index rad">
               <button class="btn-search" onclick="toggleRadicalOverlay()">
                  <span>@data.gettext("Radicals")</span>
                  <span class="rad-picker-icon index noselect">éƒ¨</span>
               </button>
            </div>
         </div> 

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

         <!-- Info / Notification Button-->
         <div class="btn-container">
            <div class="infoSvg infoBtn index p" data-p='"button", @{"props":@{"name": "Help", "category": "page-swap"@}@}' onclick='openHelpPage()'></div>
            <div>
               <div class="notificationSvg notificationBtn index p" data-p='"button", @{"props":@{"name": "Notifications Popup", "category": "popup"@}@}' onclick="toggleNotifications(event)"></div>
               <span class="notificationPoint"></span>
            </div>
         </div>      
      </main>

      @:footer_html(&data, true)

   </body>
</html>
