<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Edit - <%= community.name %></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>New Announcement</h2>
        <form action="/v1/posts/new" class="post-emotion-radio" enctype="multipart/form-data" target="formSubmitFrame" method="post">
            <table>
                <tr>
                    <td>
                        <img class="post-user-icon" src="<%= mii_image_CDN %>/<%= user.pid %>/normal_face.png">
                        <input type="hidden" id="olive_title_id" name="olive_title_id" value="<%= community.title_id[0] %>">
                        <input type="hidden" id="olive_community_id" name="olive_community_id" value="<%= community.community_id %>">
                        <input type="hidden" id="pid" name="pid" value="<%= user.pid %>">
                        <input type="hidden" id="_post_type" name="_post_type" value="body">
                    </td>
                    <td>
                        <div class="post-emotions-wrapper">
                            <label for="post-emotion-0">
                                <input type="radio" name="emotion" id="post-emotion-0" value="0" onclick="changeMiiImageReaction(this)" checked>
                                <span class="post-emotion-0"></span>
                            </label>
                            <label for="post-emotion-1">
                                <input type="radio" name="emotion" id="post-emotion-1" value="1" onclick="changeMiiImageReaction(this)">
                                <span class="post-emotion-1"></span>
                            </label>
                            <label for="post-emotion-2">
                                <input type="radio" name="emotion" id="post-emotion-2" value="2" onclick="changeMiiImageReaction(this)">
                                <span class="post-emotion-2"></span>
                            </label>
                            <label for="post-emotion-3">
                                <input type="radio" name="emotion" id="post-emotion-3" value="3" onclick="changeMiiImageReaction(this)">
                                <span class="post-emotion-3"></span>
                            </label>
                            <label for="post-emotion-4">
                                <input type="radio" name="emotion" id="post-emotion-4" value="4" onclick="changeMiiImageReaction(this)">
                                <span class="post-emotion-4"></span>
                            </label>
                            <label for="post-emotion-5">
                                <input type="radio" name="emotion" id="post-emotion-5" value="5" onclick="changeMiiImageReaction(this)">
                                <span class="post-emotion-5"></span>
                            </label>
                        </div>
                        <div class="post-emotions-arrow-left"></div>
                    </td>
                    <td>
                        <label class="checkbox-container checkbox-post">Spoilers
                            <input type="checkbox" id="spoiler" name="spoiler" value="true">
                            <span class="checkmark"></span>
                        </label>
                        <div class="post-screenshot-picker" onclick="loadScreenshots()">
                            <div class="post-screenshot-picker-icon"></div>
                            <!--<div class="post-screenshot-picker-dropdown">
                                <div><img src="" class="post-screenshot-preview" id="post-top-screen-preview" onclick="document.getElementById('screenshot-value').value = wiiuMainApplication.getScreenShot(true);"></div>
                                <div><img src="" class="post-screenshot-preview" id="post-bottom-screen-preview" onclick="document.getElementById('screenshot-value').value = wiiuMainApplication.getScreenShot(false);"></div>
                                <div onclick="document.getElementById('screenshot-value').value = ''; loadScreenshots()">No Screenshot</div>
                                <input type="hidden" id="screenshot-value" name="screenshot" value="">
                            </div>-->
                        </div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2" id="post-text-input">
                        <textarea class="post-textarea" id="comment" name="body" placeholder="Enter text here" rows="4" cols="50"></textarea>
                    </td>
                    <td rowspan="2" id="post-painting-input" style="display: none;">
                        <div class="post-memo">
                            <img class="post-memo-preview" id="memo" width="640px" height="240px" src="" style="display: none;" onclick="newPainting(false)">
                            <input type="hidden" id="memo-value" name="painting" value="">
                        </div>
                    </td>
                    <br>
                </tr>
                <tr style="height: 70px">
                    <td>
                        <input type="submit" value="Post" class="submit-button" style="margin-left: -124px;">
                    </td>
                </tr>
            </table>
        </form>
        <iframe name="formSubmitFrame"></iframe>
    </div>
</div>
<script>
    function changeMiiImageReaction(element) {
        if(element.checked) {
            var pfp = document.getElementsByClassName('post-user-icon')[0];
            var newPfp;
            switch (element.value) {
                case '1':
                    newPfp = 'smile_open_mouth.png'
                    break;
                case '2':
                    newPfp = 'wink_left.png'
                    break;
                case '3':
                    newPfp = 'surprise_open_mouth.png'
                    break;
                case '4':
                    newPfp = 'frustrated.png'
                    break;
                case '5':
                    newPfp = 'sorrow.png'
                    break;
                default:
                    newPfp = 'normal_face.png'
                    break;
            }
            pfp.src = pfp.src.substring(0, pfp.src.lastIndexOf('/') + 1) + newPfp;
        }


    }
</script>
</body>
</html>
