<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <% if(profileData[0].username) { %>
        <title><%- profileData[0].username %>'s post on Hydraulisc</title>
        <meta property="og:title" content="Check out <%- profileData[0].username %>'s post on Hydraulisc">
        <meta property="og:image" content="<%- profileData[0].pfp %>">
        <meta property="og:description" content="Check out <%- profileData[0].username %>'s post on Hydraulisc | Follow <%- profileData[0].username %> and others you know to get the latest updates and more, on Hydraulisc.">
    <% } else { %>
        <title>Not Found | Hydraulisc</title>
        <meta property="og:title" content="Hydraulisc - Stay in the loop">
        <meta property="og:description" content="Create an account on Hydraulisc to see more!">
        <meta property="og:image" content="https://raw.githubusercontent.com/Hydraulisc/hydraulisc.github.io/main/assets/img/Hydraulisc.png">
        <link rel="canonical" href="https://hydraulisc.net/404">
    <% } %>
    <!-- Unused Canonical and alternate "link"'s removed: https://www.html-easy.com/references/html-link-tag/ & https://ahrefs.com/blog/canonical-tags/ -->
    <link rel="icon" type="image/png" href="https://avatars.githubusercontent.com/u/144374735">
    <meta name="description" content="Stay in the loop, with Hydraulisc - where communities come together!">
    <meta property="og:site_name" content="Hydraulisc - Stay in the loop">
    <meta name="theme-color" content="rgba(33, 33, 33, 0.98)">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="manifest" href="/json/manifest.json">
    <style>
        a {
            color: #5667c7;
        }
    </style>
</head>
<body>
    <div id="warningbanner" style="width: 100%; height: 100%; position: absolute;top: 4.2rem;z-index: 10;background: rgba(0,0,0,0.5);left: 0;display: none;">
        <div style="display: flex;background: black;max-width: 380px;margin: auto;">
            <div style="padding: 1rem;font-weight: 600;color: red;">
                <p>Your comment is too long, and hasn't been uploaded.</p>
                <p>Error code 89.</p>
            </div>
        </div>
    </div>
    <%- include('../partials/cookies', { cookies: cookies }) %>
    <%- include('../partials/header', { username: username, uid: uid }) %>
    <br>
    <div class="app-container">
        <div class="gridz">
            <div class="home_container">
                <% if (posts[0].adminRemoved === true) { %>
                    <div style="width: 90%; margin: auto;">
                        <h3 style="max-width: 100%;"><a href="/user/<%- posts[0].user %>" style="font-family: 'ubuntu mono', serif !important; text-decoration: none;">@<%- profileData[0].username %>#<%- profileData[0].discriminator %></a> <%- profileData[0].getPostContent %></h3>
                    </div>
                    <div class="container_container">
                            <div>
                                <br class="separator">
                                <div id="<%- posts[0].postId %>" class="star_post_container">
                                    <div style="border-bottom: 1px solid #04050a;">
                                        <span class="star_post_header_container">
                                            <span class="star_post_header">
                                                <span style="position: relative;">
                                                    <span style="display: flex;">
                                                        <div>
                                                            <div>
                                                                <a href="/user/<%- posts[0].user %>" class="star_post_title">
                                                                    <div style="padding-right: 6px;">
                                                                        <img src="<%- profileData[0].pfp %>" style="color: black; border-radius: 50%; overflow: hidden; justify-content: center; align-items: center; width: 40px; height: 40px; display: flex;" loading="lazy">
                                                                    </div>
                                                                    <span style="font-size: larger;"><%- profileData[0].username %></span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </span>
                                                </span>
                                            </span>
                                        </span>
                                    </div>
                                    <a style="inset: 0; text-decoration: none; color: white;" href="/user/<%- posts[0].user %>">
                                        <div style="display: flex; margin-top: .3rem;">
                                            <div style="overflow: hidden; margin-left: auto; margin-right: auto;">
                                                <img class="enlargened_post_body" src="<%- posts[0].imageUrl %>">
                                            </div>
                                        </div>
                                    </a>
                                    <div class="logged-in" style="position: relative; overflow: hidden;" id="fancy-icons">
                                        <div id="love-count-<%- posts[0].postId %>" style="float: left; display: block; text-align: center; padding: 14px; text-decoration: none; cursor: pointer;"><svg width="18px" height="18px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/><g id="SVGRepo_iconCarrier"> <path d="M8.96173 18.9109L9.42605 18.3219L8.96173 18.9109ZM12 5.50063L11.4596 6.02073C11.601 6.16763 11.7961 6.25063 12 6.25063C12.2039 6.25063 12.399 6.16763 12.5404 6.02073L12 5.50063ZM15.0383 18.9109L15.5026 19.4999L15.0383 18.9109ZM9.42605 18.3219C7.91039 17.1271 6.25307 15.9603 4.93829 14.4798C3.64922 13.0282 2.75 11.3345 2.75 9.1371H1.25C1.25 11.8026 2.3605 13.8361 3.81672 15.4758C5.24723 17.0866 7.07077 18.3752 8.49742 19.4999L9.42605 18.3219ZM2.75 9.1371C2.75 6.98623 3.96537 5.18252 5.62436 4.42419C7.23607 3.68748 9.40166 3.88258 11.4596 6.02073L12.5404 4.98053C10.0985 2.44352 7.26409 2.02539 5.00076 3.05996C2.78471 4.07292 1.25 6.42503 1.25 9.1371H2.75ZM8.49742 19.4999C9.00965 19.9037 9.55954 20.3343 10.1168 20.6599C10.6739 20.9854 11.3096 21.25 12 21.25V19.75C11.6904 19.75 11.3261 19.6293 10.8736 19.3648C10.4213 19.1005 9.95208 18.7366 9.42605 18.3219L8.49742 19.4999ZM15.5026 19.4999C16.9292 18.3752 18.7528 17.0866 20.1833 15.4758C21.6395 13.8361 22.75 11.8026 22.75 9.1371H21.25C21.25 11.3345 20.3508 13.0282 19.0617 14.4798C17.7469 15.9603 16.0896 17.1271 14.574 18.3219L15.5026 19.4999ZM22.75 9.1371C22.75 6.42503 21.2153 4.07292 18.9992 3.05996C16.7359 2.02539 13.9015 2.44352 11.4596 4.98053L12.5404 6.02073C14.5983 3.88258 16.7639 3.68748 18.3756 4.42419C20.0346 5.18252 21.25 6.98623 21.25 9.1371H22.75ZM14.574 18.3219C14.0479 18.7366 13.5787 19.1005 13.1264 19.3648C12.6739 19.6293 12.3096 19.75 12 19.75V21.25C12.6904 21.25 13.3261 20.9854 13.8832 20.6599C14.4405 20.3343 14.9903 19.9037 15.5026 19.4999L14.574 18.3219Z" fill="#d7d9e0"/></g></svg>  undefined Love</div>
                                    </div>
                                </div>
                            </div>
                    </div>
                <% } else { %>
                    <div style="width: 90%; margin: auto;">
                        <h3 style="max-width: 100%;"><a href="/user/<%- posts[0].user %>" style="font-family: 'ubuntu mono', serif !important; text-decoration: none;"><%- profileData[0].username %></a>: <%- profileData[0].getPostContent %></h3>
                    </div>
                    <div class="container_container">
                            <div>
                                <br class="separator">
                                <div id="<%- posts[0].postId %>" class="star_post_container">
                                    <div style="border-bottom: 1px solid #04050a;">
                                        <span class="star_post_header_container">
                                            <span class="star_post_header">
                                                <span style="position: relative;">
                                                    <span style="display: flex;">
                                                        <div>
                                                            <div>
                                                                <a href="/user/<%- posts[0].user %>" class="star_post_title">
                                                                    <div style="padding-right: 6px;">
                                                                        <img src="<%- profileData[0].pfp %>" style="color: black; border-radius: 50%; overflow: hidden; justify-content: center; align-items: center; width: 40px; height: 40px; display: flex;" loading="lazy">
                                                                    </div>
                                                                    <span style="font-size: larger;"><%- profileData[0].username %></span>
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </span>
                                                </span>
                                            </span>
                                        </span>
                                    </div>
                                    <a style="inset: 0; position: absolute;  text-decoration: none; color: white;" href="/user/<%- posts[0].user %>"></a>
                                    <div style="display: flex; margin-top: .3rem;">
                                        <div style="overflow: hidden; margin-left: auto; margin-right: auto;">
                                            <img class="enlargened_post_body" src="<%- posts[0].imageUrl %>">
                                            <div style="position: absolute; width: 100% !important; height: 93.5% !important; top: 0; left: 0;"></div>
                                        </div>
                                    </div>
                                    <div class="logged-in" style="position: relative; overflow: hidden;" id="fancy-icons">
                                        <div id="love-count-<%- posts[0].postId %>" style="float: left; display: block; text-align: center; padding: 14px; text-decoration: none; cursor: pointer;">
                                            <svg width="18px" height="18px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                <g id="SVGRepo_bgCarrier" stroke-width="0"/><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
                                                <g id="SVGRepo_iconCarrier">
                                                    <path d="M8.96173 18.9109L9.42605 18.3219L8.96173 18.9109ZM12 5.50063L11.4596 6.02073C11.601 6.16763 11.7961 6.25063 12 6.25063C12.2039 6.25063 12.399 6.16763 12.5404 6.02073L12 5.50063ZM15.0383 18.9109L15.5026 19.4999L15.0383 18.9109ZM9.42605 18.3219C7.91039 17.1271 6.25307 15.9603 4.93829 14.4798C3.64922 13.0282 2.75 11.3345 2.75 9.1371H1.25C1.25 11.8026 2.3605 13.8361 3.81672 15.4758C5.24723 17.0866 7.07077 18.3752 8.49742 19.4999L9.42605 18.3219ZM2.75 9.1371C2.75 6.98623 3.96537 5.18252 5.62436 4.42419C7.23607 3.68748 9.40166 3.88258 11.4596 6.02073L12.5404 4.98053C10.0985 2.44352 7.26409 2.02539 5.00076 3.05996C2.78471 4.07292 1.25 6.42503 1.25 9.1371H2.75ZM8.49742 19.4999C9.00965 19.9037 9.55954 20.3343 10.1168 20.6599C10.6739 20.9854 11.3096 21.25 12 21.25V19.75C11.6904 19.75 11.3261 19.6293 10.8736 19.3648C10.4213 19.1005 9.95208 18.7366 9.42605 18.3219L8.49742 19.4999ZM15.5026 19.4999C16.9292 18.3752 18.7528 17.0866 20.1833 15.4758C21.6395 13.8361 22.75 11.8026 22.75 9.1371H21.25C21.25 11.3345 20.3508 13.0282 19.0617 14.4798C17.7469 15.9603 16.0896 17.1271 14.574 18.3219L15.5026 19.4999ZM22.75 9.1371C22.75 6.42503 21.2153 4.07292 18.9992 3.05996C16.7359 2.02539 13.9015 2.44352 11.4596 4.98053L12.5404 6.02073C14.5983 3.88258 16.7639 3.68748 18.3756 4.42419C20.0346 5.18252 21.25 6.98623 21.25 9.1371H22.75ZM14.574 18.3219C14.0479 18.7366 13.5787 19.1005 13.1264 19.3648C12.6739 19.6293 12.3096 19.75 12 19.75V21.25C12.6904 21.25 13.3261 20.9854 13.8832 20.6599C14.4405 20.3343 14.9903 19.9037 15.5026 19.4999L14.574 18.3219Z" fill="#d7d9e0"/>
                                                </g>
                                            </svg>  <%- likeCount %> Love</div>
                                    </div>
                                </div>
                            </div>
                    </div>  
                <% } %>
                <div class="commentsContainer">
                    <% if (username) { %>
                        <script src="/js/comments.js" defer></script>
                        <div class="createCommentsContainer">
                            <div style="width: calc(100% - 3px); max-height: 300px; height: auto; border: 1px solid #5667c7;">
                                <div style="padding: 1rem;">
                                    <div style="margin-left: auto; margin-right: auto; width: 100%;">
                                        <textarea id="commentInput" type="text" name="comment" autocomplete="off" placeholder="Your Comment" maxlength="1500" style="width: 100% !important; height: 100px; text-align: left !important; background-color: rgba(48, 48, 48, 0.6); border-radius: 5px; color: rgb(250, 250, 250); border: none; resize: none;"></textarea>
                                    </div>
                                    <div class="charcounter" id="charcounter">0 / 1500</div>
                                    <button onclick="createComment('<%- posts[0].postId %>')" id="thenewpostingposterbutton" style="border: none;">Post</button>
                                </div>
                            </div>
                        </div>
                        <script>
                            const buttoneer = document.getElementById("thenewpostingposterbutton");
                            buttoneer.addEventListener('click', function () {
                                // create a bloody post
                                createComment('<%- posts[0].postId %>');
                            });
                        </script>
                    <% } else { %>
                        <div class="createCommentsContainer"><a href="/auth?mod=disqus">Sign In</a> to contribute to Discussions!</div>
                    <% } %>
                    <% if (comments.length) { %>
                        <% for (const comment of comments) { %>
                            <div class="star_post_container" style="margin-top: 1rem !important;">
                                <div style="border-bottom: 1px solid #04050a;">
                                    <span class="star_post_header_container">
                                        <span class="star_post_header">
                                            <span style="position: relative;">
                                                <span style="display: flex;">
                                                    <div>
                                                        <div>
                                                            <a href="/user/<%- comment.userId %>" class="star_post_title">
                                                                <div style="padding-left: 6px;">
                                                                    <img src="<%- comment.pfp %>" style="border-radius: 50%; overflow: hidden; justify-content: center; align-items: center; width: 40px; height: 40px; display: flex;">
                                                                </div>
                                                                <span style="font-size: larger; padding-left: 6px;"><%- comment.username %></span>
                                                            </a>
                                                        </div>
                                                    </div>
                                                </span>
                                            </span>
                                        </span>
                                    </span>
                                </div>
                                <a href="/user/<%- comment.userId %>" style="inset: 0; position: absolute; text-decoration: none; color: white;"></a>
                                <div style="background: #1d1f29; width: 100%; padding-top: .5rem; padding-bottom: .5rem;">
                                    <p><%- comment.content %></p>
                                </div>
                                <div class="<%- username ? 'logged-in' : 'logged-out' %>"></div>
                            </div>
                        <% } %>
                    <% } else { %>
                        <h3>No Comments Yet! Be the first!</h3>
                    <% } %>
                </div>
            </div>
        </div>
    </div>
    <%- include('../partials/footer', { username: username, uid: uid }) %>
    <%- include('../partials/pwa') %>
</body>
</html>