<%- include('header') %>

  <!-- Search section -->
  <section class="search_section">
    <div class="container">
      <div class="text" style="display: none;">
        <h1>Search</h1>
        <h2>Search</h2>
      </div>
      <div class="row justify-content-center">
        <div class="col-12">
          <div class="search_area">
            <div class="top_text">
              <h4>Search</h4>
              <p>search games here !!!</p>
            </div>
            <form action="">
              <div class="form_group">
                <button class="search_btn">
                  <img src="assets/img/icons/red-search.svg" alt="search" draggable="false" />
                </button>
                <input type="text" name="s" placeholder="Search" value="<%- name %>" class="search_input"
                  id="search_inputs" autocomplete="off" />
                <button class="arrow_btn">
                  <img src="assets/img/icons/rigth-arrow.svg" alt="rigth-arrow" draggable="false" />
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Search Movies section -->
  <section class="popular_games_section search_games">
    <div class="container">

      <% if(data.length===0){%>
        <div class="top_text_area d-flex align-items-center" style="display: none !important;">
          <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g filter="url(#filter0_d_42_417)">
              <circle cx="10.5" cy="10.5" r="4.5" fill="url(#paint0_linear_42_417)" />
            </g>
            <defs>
              <filter id="filter0_d_42_417" x="0" y="0" width="21" height="21" filterUnits="userSpaceOnUse"
                color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix" />
                <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                  result="hardAlpha" />
                <feOffset />
                <feGaussianBlur stdDeviation="3" />
                <feComposite in2="hardAlpha" operator="out" />
                <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.143181 0 0 0 0 0.493698 0 0 0 0.65 0" />
                <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_42_417" />
                <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_42_417" result="shape" />
              </filter>
              <linearGradient id="paint0_linear_42_417" x1="6" y1="10.4749" x2="15" y2="10.4749"
                gradientUnits="userSpaceOnUse">
                <stop stop-color="#FF247E" />
                <stop offset="1" stop-color="#FF7033" />
              </linearGradient>
            </defs>
          </svg>
          <h5 class="m-0">Search Result</h5>
        </div>
        <%}else {%>
          <div class="top_text_area d-flex align-items-center">
            <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
              <g filter="url(#filter0_d_42_417)">
                <circle cx="10.5" cy="10.5" r="4.5" fill="url(#paint0_linear_42_417)" />
              </g>
              <defs>
                <filter id="filter0_d_42_417" x="0" y="0" width="21" height="21" filterUnits="userSpaceOnUse"
                  color-interpolation-filters="sRGB">
                  <feFlood flood-opacity="0" result="BackgroundImageFix" />
                  <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
                    result="hardAlpha" />
                  <feOffset />
                  <feGaussianBlur stdDeviation="3" />
                  <feComposite in2="hardAlpha" operator="out" />
                  <feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.143181 0 0 0 0 0.493698 0 0 0 0.65 0" />
                  <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_42_417" />
                  <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_42_417" result="shape" />
                </filter>
                <linearGradient id="paint0_linear_42_417" x1="6" y1="10.4749" x2="15" y2="10.4749"
                  gradientUnits="userSpaceOnUse">
                  <stop stop-color="#FF247E" />
                  <stop offset="1" stop-color="#FF7033" />
                </linearGradient>
              </defs>
            </svg>
            <h5 class="m-0">Search Result</h5>
          </div>
          <%} %>
            <div class="popular_games_area">
              <div class="row">

                <!-- No Data Found -->
                <% if(data.length===0){%>
                  <div class="text-center text-white">
                    <h2>No Games Found</h2>
                  </div>
                  <%} %>

                    <!-- Games Data -->
                    <% for(let i=0;i<data.length;i++) { %>
                      <div class="col-xl-2 col-lg-3 col-md-4 col-6 mb-3">
                        <div class="popular_game_box">
                          <a href="/<%= data[i].name %>">
                            <div class="image">
                              <img src="<%= data[i].logo %>" alt="<%= data[i].name %>" class="w-100 search_game_img"
                                draggable="false">
                            </div>
                            <div class="game-name text-center">
                              <p>
                                <%= data[i].name %>
                              </p>
                            </div>
                          </a>
                        </div>
                      </div>
                      <% } %>

              </div>
            </div>
    </div>
  </section>

  <%- include('footer') %>

    <script>
      document
        .getElementById("search_inputs")
        .addEventListener("keydown", function (e) {
          if (this.value.length === 0 && e.which === 32) e.preventDefault();
        });
    </script>

    </body>

    </html>