<%- include('header') %>

    <!-- All Games -->
    <section class="popular_games_section all_games">
        <div class="container">
            <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">
                    <%= name %> Games
                </h5>
            </div>
            <div class="popular_games_area">
                <div class="row">
                    <% for(let i=0;i<data.length;i++) { %>
                        <div class="col-xl-2 col-lg-3 col-md-4 col-6">
                            <div class="popular_game_box">
                                <div class="image">
                                    <a href="/<%= data[i].name %>">
                                        <img src="<%= data[i].logo %>" alt="popular-img" class="w-100 all-img"
                                            draggable="false">
                                    </a>
                                    <div class="bottom_text_area d-flex align-items-center justify-content-between">
                                        <div class="left_side_area">
                                            <p class="m-0">
                                                <%= data[i].name %>
                                            </p>
                                        </div>
                                        <div class="right_side_area">
                                            <div class="icon_box" onclick="changeImage('<%= data[i].id %>',this)">
                                                <img src="/assets/img/icons/like-stroke-icon.svg" alt="like-icon"
                                                    class="img-fluid" draggable="false">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <% } %>
                </div>
            </div>
        </div>
    </section>

    <%- include('footer') %>

        <script>
            function changeImage(iconBox, icon) {

                const img = icon.querySelector("img");
                if (img.getAttribute("src") === "/assets/img/icons/like-stroke-icon.svg") {
                    img.setAttribute("src", "/assets/img/icons/active-heart.svg");
                } else {
                    img.setAttribute("src", "/assets/img/icons/like-stroke-icon.svg");
                }

                $.ajax(`/game-like/${iconBox}`,
                    {
                        success: function (data, status, xhr) {
                            console.log(data);
                        }
                    })
            }
        </script>
        </body>

        </html>