<!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>Update <%=community.name%></h2>
        <form action="/v1/communities/<%= community.community_id %>/update" enctype="multipart/form-data" target="formSubmitFrame" method="post">
            <div class="form-section">
                <div class="section-info">
                    <h2>Meta information</h2>
                    <p>Update the name, description, system icon, and title ID's of the community</p>
                </div>
                <div class="section-inputs">
                    <div class="input-div">
                        <label for="name">Community Name:</label>
                        <input type="text" id="name" name="name" value="<%=community.name%>">
                    </div>

                    <div class="input-div">
                        <label for="description">Description:</label>
                        <textarea type="text" id="description" name="description"><%=community.description%></textarea>
                    </div>

                    <div class="input-grid">
                        <div class="input-div">
                            <label for="title_ids">Title ID 1:</label>
                            <input type="text" id="title_ids" name="title_ids[]" value="<%=community.title_ids[0]%>">
                        </div>

                        <div class="input-div">
                            <label for="title_ids">Title ID 2:</label>
                            <input type="text" id="title_ids" name="title_ids[]" value="<%=community.title_ids[1]%>">
                        </div>

                        <div class="input-div">
                            <label for="title_ids">Title ID 3:</label>
                            <input type="text" id="title_ids" name="title_ids[]" value="<%=community.title_ids[2]%>">
                        </div>

                        <div class="input-div">
                            <label for="icon">System Icon (B64 TGA):</label>
                            <input type="text" id="icon" name="icon" value="<%=community.icon%>">
                        </div>
                    </div>
                </div>
            </div>

            <div class="form-section">
                <div class="section-info">
                    <h2>Browser Icons and Meta Data</h2>
                    <p>Update the browser icons for the Miiverse Applets, as well as setting the platform, and other settings</p>
                </div>
                <div class="section-inputs">
                    <div class="input-div choices-inputs do-input-cols">
                        <div>
                            Browser Icon (128px x 128px)
                            <input type="file" id="browserIcon" accept="image/png" name="browserIcon">
                        </div>
                        <div>
                            <img src="/icons/<%= community.community_id %>.png">
                        </div>
                    </div>

                    <hr>

                    <div class="input-div choices-inputs do-input-cols">
                        <div>
                            3DS Browser Banner (400px x 220px)
                            <input type="file" id="CTRbrowserHeader" accept="image/png" name="CTRbrowserHeader">
                        </div>
                        <div>
                            <img src="<%=community.CTR_browser_header%>">
                        </div>
                    </div>

                    <hr>

                    <div class="input-div choices-inputs">
                        Wii U Browser Banner (1498px x 328px)
                        <input type="file" id="WiiUbrowserHeader" accept="image/png" name="WiiUbrowserHeader">
                        <img src="<%=community.WiiU_browser_header%>">
                    </div>

                    <hr>

                    <div class="input-div choices-inputs">
                        Is Recommended?
                        <input type="radio" id="isRecomended" name="is_recommended" value="1" <%if(community.is_recommended === 1) {%> checked <%}%>>
                        <label for="isRecomended">True</label>
                        <input type="radio" id="isNotRecomended" name="is_recommended" value="0" <%if(community.is_recommended === 0) {%> checked <%}%>>
                        <label for="isNotRecomended">False</label>
                    </div>

                    <div class="input-div choices-inputs">
                        Has Shop Page?
                        <input type="radio" id="hasShopPage" name="has_shop_page" value="1" <%if(community.has_shop_page === 1) {%> checked <%}%>>
                        <label for="hasShopPage">True</label>
                        <input type="radio" id="noShopPage" name="has_shop_page" value="0" <%if(community.has_shop_page === 0) {%> checked <%}%>>
                        <label for="noShopPage">False</label>
                    </div>

                    <div class="input-div choices-inputs">
                        Platform
                        <input type="radio" id="WiiU" name="platform_id" value="0" <%if(community.platform_id === 0) {%> checked <%}%>>
                        <label for="platform_id">Wii U</label>
                        <input type="radio" id="3DS" name="platform_id" value="1" <%if(community.platform_id === 1) {%> checked <%}%>>
                        <label for="platform_id">3DS</label>
                        <input type="radio" id="Both" name="platform_id" value="2" <%if(community.platform_id === 2) {%> checked <%}%>>
                        <label for="platform_id">Both</label>
                    </div>

                    <div class="input-div choices-inputs">
                        Type
                        <input type="radio" id="main" name="type" value="0" <%if(community.type === 0) {%> checked <%}%>>
                        <label for="type">Main</label>
                        <input type="radio" id="sub" name="type" value="1" <%if(community.type === 1) {%> checked <%}%>>
                        <label for="type">Sub</label>
                        <input type="radio" id="admin" name="type" value="2" <%if(community.type === 2) {%> checked <%}%>>
                        <label for="type">Announcement</label>
                    </div>

                    <div class="input-div">
                        <label for="parent">Parent Community</label>
                        <input type="text" id="parent" name="parent" value="<%=community.parent%>">
                    </div>
                </div>
            </div>

            <div class="form-section">
                <div class="section-info">
                    <h2>Submit or Delete Community</h2>
                    <p></p>
                </div>
                <div class="section-inputs">
                    <div>
                        <button type="submit" class="btn">Submit</button>
                        <button type="button" class="btn" onclick="deleteCommunity()">Delete Community</button>
                    </div>
                    <iframe name="formSubmitFrame"></iframe>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    function deleteCommunity() {
        var confirm = prompt('Type the name of the community in to confirm you want to delete it.');
        if (confirm === '<%=community.name%>') {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState === 4 && this.status === 200) {
                    alert('Community has been deleted');
                    window.location.replace("/communities");
                }
                else if (this.readyState === 4){
                    alert("Unable to delete community.")
                }
            };
            xhttp.open("POST", "/v1/communities/<%=community.community_id%>/delete", true);
            xhttp.send();
        }
    }
</script>
</body>
</html>
