<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
    <link rel="stylesheet" href="../../dist/styles.css">
    <title>Delete Blog</title>
</head>

<body>

    <div class="bg-yellow-300 h-48 mx-auto flex justify-center items-center flex-col">
        <div class="text-gray-800 font-black sm:text-6xl text-4xl">Ahmet KÖŞKER</div>
        <div class="sm:text-4xl md: text-gray-800 italic text-2xl">Ahmet KÖŞKER</div>
    </div>
    <div class="sm:w-full w-full bg-gray-900 h-auto m-auto">
        <div class="w-auto">
            <ul class="text-2xl text-yellow-200 text-center sm:flex justify-end sm:justify-center block">
                <li class="sm:p-5 p-3 hover:bg-gray-600"><a href=""
                        class="transition-all hover:text-4xl  hover:text-yellow-400">AHO</a></li>
                <li class="sm:p-5 p-3 hover:bg-gray-600"><a href=""
                        class="transition-all hover:text-4xl hover:text-yellow-400">AHO</a></li>
                <li class="sm:p-5 p-3 hover:bg-gray-600"><a href=""
                        class="transition-all hover:text-4xl hover:text-yellow-400">AHO</a></li>
            </ul>
        </div>
    </div>
    </div>
    <% data.forEach(function (data) { %>
        <div class="sm:w-1/2 mx-auto">
            <div>
                <div class='mb-10'>
                    <div class='overflow-hidden relative'>
                        <img class='hover:scale-110 hover:transition-all hover:duration-700 ease-in-out mx-auto'
                            src='/images/<%=data.blogImage%>'>
                        <a href='blog?id=<%=data._id%>&blogImage=<%=data.blogImage%>'
                            class='btn absolute top-0 right-0 text-3xl sm:text-5xl cursor-pointer'><i
                                class="fas fa-times-octagon text-red-900"></i></a>
                        <div id='tooltip'
                            class='absolute top-8 sm:top-12 right-0 font-bold p-0.5 sm:p-2 bg-black text-red-900 rounded-2xl hidden'>
                            Delete</div>
                    </div>
                    <div class='w-3/4 mx-auto p-6 border-b-4'>
                        <a class='text-yellow-700' href='<%=data._id%>'>
                            <div class='mb-8 mx-auto'>
                                <h1 class='text-3xl sm:text-5xl text-center'>
                                    <%=data.blogTitle%>
                                </h1>
                            </div>
                        </a>
                        <div>
                            <h4 class='text-center'>
                                <%=data.blogSummary%>
                            </h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <% }) %>

            <script>
                var btn = document.querySelectorAll('.btn');
                const buttons = document.querySelectorAll('.btn');
                buttons.forEach(function (btn) {
                    btn.addEventListener('mouseenter', function () {
                        btn.nextElementSibling.classList.replace('hidden', 'block')
                    });
                    btn.addEventListener('mouseleave', function () {
                        btn.nextElementSibling.classList.replace('block', 'hidden');
                    }); btn.addEventListener('click', function () {
                        let blog = btn.parentElement.parentElement;
                        blog.remove();
                        const url = new URL(btn.href);
                        var _id = url.searchParams.get('id');
                        var blogImage = url.searchParams.get('blogImage');
                        fetch('http://localhost:2000/ahoPanel/delete/blog', {
                            method: 'DELETE', headers: {
                                'Content-Type': 'application/json'
                            }, body: JSON.stringify({
                                id: _id, blogImage: blogImage
                            })
                        })
                    });
                })
            </script>
</body>

</html>

</body>

</html>