<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Juxt Admin Panel</title>
    <link rel="stylesheet" type="text/css" href="/css/juxt.css">
</head>
<body>

<h2 style="display: inline-block; margin-left: 20px">Juxt Admin Panel - <%= user.user_id %></h2> <img style="width: 57px; display: inline-block; position: absolute; right: 8px;" src="<%= mii_image_CDN %>/<%= user.pid %>/normal_face.png">

<div class="row">
    <div class="left" style="background-color:#bbb;max-width: 10%;">
        <ul id="myMenu">
            <li><a href="/">Home</a></li>
            <li><a href="/communities">Communities</a></li>
            <li><a href="/audit">Audit Log</a></li>
            <li><a href="/announcements">Announcements</a></li>
            <li><a href="/users">Users</a></li>
            <li><a href="/discovery">Discovery</a></li>
        </ul>
    </div>

    <div class="right" style="background-color:#ddd;">
        <h2><%= community.name %></h2>
        <div class="community-page-info-container">
            <table>
                <tbody>
                    <tr>
                        <td>
                            <img class="community-page-info-icon" src="/icons/<%= community.community_id %>.png">
                        </td>
                        <td>
                            <h4 class="community-page-description"><%= community.description %></h4>
                        </td>
                    </tr>
                </tbody>
            </table>
            <button type="button" style="margin-left: 20px; width: 760px; <%if(community.type === 1){%>display: none;<%}%>" onclick="window.location='/posts/new'">New Post</button>
            <button type="button" style="margin-left: 20px; width: 760px" onclick="window.location='/communities/<%= community.community_id %>/edit'">Edit</button>
            <div class="community-page-margin-line"></div>
            <table class="community-page-table-wrapper">
                <tbody>
                <tr>
                    <td>
                        <div class="community-page-shaded-info-container">
                            <h4 class="community-page-table-label">Followers</h4>
                            <h4 class="community-page-table-text"><%= community.followers %></h4>
                        </div>
                    </td>
                    <td>
                        <div class="community-page-shaded-info-container">
                            <h4 class="community-page-table-label">Posts</h4>
                            <h4 class="community-page-table-text"><%=totalNumPosts%></h4>
                        </div>
                    </td>
                    <td>
                        <div class="community-page-shaded-info-container" style="width: 275px;">
                            <h4 class="community-page-table-label">Tags</h4>
                            <h4 class="community-page-table-text">N/A</h4>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="community-page-posts-wrapper">
            <% newPosts.forEach(function(post) { %>
                <div id="<%= post.id %>">
                    <div class="post-user-info-wrapper">
                        <%if(post.verified) {%>
                            <img class="community-page-post-user-icon verified" src="<%= mii_image_CDN %>/<%= post.pid %>/<% if(post.feeling_id === 1) {%>smile_open_mouth.png<%} else if(post.feeling_id === 2 ) {%>wink_left.png<%} else if(post.feeling_id === 3 ) {%>surprise_open_mouth.png<%} else if(post.feeling_id === 4 ) {%>frustrated.png<%} else if(post.feeling_id === 5 ) {%>sorrow.png<%} else {%>normal_face.png<%}%>" onclick="loadUserProfile(<%=post.pid%>)">
                            <span class="community-page-verified-user-badge community-page-verified" style=""></span>
                        <%} else {%>
                            <img class="community-page-post-user-icon" src="<%= mii_image_CDN %>/<%= post.pid %>/<% if(post.feeling_id === 1) {%>smile_open_mouth.png<%} else if(post.feeling_id === 2 ) {%>wink_left.png<%} else if(post.feeling_id === 3 ) {%>surprise_open_mouth.png<%} else if(post.feeling_id === 4 ) {%>frustrated.png<%} else if(post.feeling_id === 5 ) {%>sorrow.png<%} else {%>normal_face.png<%}%>" onclick="loadUserProfile(<%=post.pid%>)">
                            <span class="community-page-verified-user-badge community-page-verified" style="display: none;"></span>
                        <%}%>
                        <h2 class="community-page-post-username" onclick="loadUserProfile(<%=post.pid%>)"><%= post.screen_name %></h2>
                        <h4 class="community-page-post-time-stamp"><%= post.created_at %></h4>

                        <div class="community-page-post-yeah-button-wrapper">
                            <div class="community-page-post-yeah-button" onclick="deletePost(event, '<%= post.id %>')"></div>
                        </div>
                        <div id="yeah-<%= post.id %>" class="community-page-post-yeah-count"><%= post.empathy_count %> Yeahs</div>
                    </div>
                    <div class="community-page-post-wrapper">
                        <% if(post.body !== '' && post.painting === '' && post.screenshot === '' && !post.url) { %>
                            <h3><%= post.body %></h3>
                        <%} else { %>
                            <% if(post.screenshot !== '') { %>
                                <img class="community-page-post-screenshot" src="data:image/png;base64,<%= post.screenshot %>">
                            <%}%>
                            <% if(post.painting !== '') { %>
                                <img class="community-page-post-painting" src="<%= post.painting_uri %>">
                            <%}%>
                            <% if(post.url) { %>
                                <iframe width="760" height="427.5" src="<%= post.url %>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                            <%}%>
                            <% if(post.body) { %>
                                <div class="community-page-post-text-overlay">
                                    <h3><%= post.body %></h3>
                                </div>
                            <%}%>
                        <%}%>
                    </div>
                </div>
            <% }); %>
        </div>
    </div>
</div>
<script>
    function deletePost(event, postID) {
        if (event.shiftKey) {
            var post = document.getElementById(postID);
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState === 4 && this.status === 200) {
                    post.style.display = 'none';
                }
                else if (this.readyState === 4){
                    alert('Error: "' + this.statusText + '"\nPlease send code to Jemma on Discord with what you were doing');
                }
            };
            xhttp.open("POST", "/v1/posts/" + postID + '/delete', true);
            xhttp.send();
        } else {
            if(confirm('Delete post?')) {
                var post = document.getElementById(postID);
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState === 4 && this.status === 200) {
                        post.style.display = 'none';
                    }
                    else if (this.readyState === 4){
                        alert('Error: "' + this.statusText + '"\nPlease send code to Jemma on Discord with what you were doing');
                    }
                };
                xhttp.open("POST", "/v1/posts/" + postID + '/delete', true);
                xhttp.send();
            }
        }
    }

    function loadUserPosts() {
        var id = document.getElementsByClassName('post-user-info-wrapper')[document.getElementsByClassName('post-user-info-wrapper').length - 1].id
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState === 4 && this.status === 200) {
                document.getElementsByClassName('community-page-posts-wrapper')[0].innerHTML += this.responseText;
            }
            else if(this.readyState === 4 && this.status === 204)
            {
                document.getElementById('load-more-posts-button').style.display = 'none';
            }
            else if (this.readyState === 4){
                alert('Error: "' + this.statusText + '"\nPlease send code to Jemma on Discord with what you were doing');
            }
        };
        xhttp.open("GET", "/users/loadPosts" + '?postID=' + id, true);
        xhttp.send();
    }
</script>
</body>
</html>
