<html>

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

<body class='bg-gray-800'>
    <div class='w-5/6 mx-auto'>
        <div>
            <div class='text-3xl mt-5 sm:h-20 sm:mt-5 sm:text-5xl text-yellow-200 font-extrabold text-center'>
                <%=data.blogTitle%>
            </div>
            <div class='text-2xl sm:mt-10 font-light sm:text-4xl text-red-300 text-left'>
                <%=data.blogContent%>
            </div>
        </div>
        <div>
            <div class='sm:w-2/3 text-left bg-gray-300 sm:mt-48'>
                <div class='text-black font-extrabold text-4xl sm:p-6 sm:mb-4'>Yorumlar</div>
                <% if (commentData.length) { %>
                    <% commentData.forEach(function (data) { %>
                        <div class='sm:p-5 text-black sm:text-xl flex'>
                            <span class='text-4xl'><i class="fas fa-user-tie"></i></span>
                            <span class='ml-5 font-bold'>
                                <%=data.userName%>
                            </span>
                        </div>
                        <div class='text-blue-600 bg-gray-50 shadow-inner sm:p-5 sm:m-2'>
                            <%=data.userComment%>
                        </div>
                        <div class='text-indigo-600 text-right sm:p-2'>
                            <%=data.created%>
                        </div>
                        <% }) %>
                            <% } else { %>
                                <h1 class='sm:p-6'>Henüz yorum eklenmemiş</h1>
                                <% } %>
            </div>
        </div>
        <div class='p-4 sm:mt-5 bg-gray-700 w-2/3'>
            <form action='/showBlogs/<%=id%>' method='POST'>
                <div class='m-4'>
                    <label class='text-red-600' for='userName'>User Name: </label>
                    <input
                        class='mt-3 block w-1/3 sm:h-8 sm:text-xl sm:pl-3 rounded-md bg-gray-300 focus:outline-none focus:bg-gray-100 resize-none'
                        type='text' name='userName'>
                </div>
                <div class='m-4'>
                    <label class='text-red-600' for='userComment'>Your Comment: </label>
                    <textarea
                        class='mt-3 block w-full h-1/6 sm:text-2xl rounded-md sm:pl-3 sm:pt-1 bg-gray-300 focus:outline-none focus:bg-gray-100 resize-none'
                        type='text' name='userComment'></textarea>
                </div>
                <input class='m-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'
                    value='Yorum Ekle' type='submit'>
            </form>
        </div>
    </div>
    <script>
    </script>
</body>

</html>