<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Home | Top & Popular Anime</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css" type="text/css">
  <script charset="utf-8">
	function search_this(){
	const pre_query = document.querySelector('#srchTxt').value
	  if(pre_query.length == ''){
		console.log(`Can't just search for nothing!`)
	  } else {
	    const query = pre_query.replace(/\s/g,'+')
	    window.location.href = `/search?q=${query}`
	  }
	}

      window.onload = function (){

	      const get_search_inp = document.querySelector('input.srch-txt')
	      get_search_inp.addEventListener('keypress', function(e){ if(e.key == 'Enter'){ search_this() }})
      }	

  </script>
</head>
<body>
  <header>
    <h1 class="h-logo">
      <p onclick="window.location.href = '/'">Äそ</p>
    </h1>
  <h1>
    <div>
	<input type="text" class="srch-txt" id="srchTxt" placeholder="...Search">
	<button class="srch-btn" onclick="search_this()">Go</button>
    </div>
  </h1>
  <h1 class="latest-h1" onclick="window.location.href = '/latest' " > Recent </h1>
  </header>



<div class="contain-top-list">
<div class="srch-prompt">
  <h1 class="srch-for">   </h1>
</div>
  <center>

<div class="container">
	
 <%  const JSON_length = json_data.length
   const titles = []
   let num=0
   for(let x=0; JSON_length > x ; x++){
     const title = json_data[x].title
     titles.push(
     title
   )
   }
   titles.forEach(single_title => {
   %>
       <a href="view/<%= json_data[num].animeID %>">
       <figure class="per-ani">
	 <img class="poster" src="<%= json_data[num].thumbnail %>">
	  <figcaption class="title">
	   <%= single_title %>
	  </figcaption>
       </figure>
       </a>

   <% num++ }) %>
  

</div>

<div class="pg-opts">
  <button class="prev-pg" onclick="go_PreviousPage()" data-page="" > Previous Page</button>
  <button class="next-pg" onclick="go_NextPage()" data-page="" > Next Page </button>
</div>

  
  </center> 

<div class="footer">
	<span class="auth">	<a href="https://github.com/sidmaz666" target="_blank">
	Coded by Sidmaz666
	</a>
	</span>
	<br>
	<span class="cl">© Copyleft  </span>	
</div>


</div>



<script type="text/javascript" src="js/main.js" charset="utf-8"></script>
</body>
</html>
