<%- include("../../../partials/header.ejs") %>
<%- include("../../../partials/nav.ejs") %>
<%- include("../../../partials/isDefaultCSS/button.ejs") %>
<section class="hero is-primary">
    <div class="hero-body">
        <br />
        <div class="container has-text-centered">
            <h1 class="title">
                <span class="icon is-medium iconalign">
                    <i aria-hidden="true" class="fad fa-<%= icon %> has-text-default"></i>
                </span>
                <br />
                <span><%= title %></span>
            </h1>
            <h2 class="subtitle">
                <%= subtitle %>
            </h2>
        </div>
    </div>
</section>
<div class="container">
    <div class="section">
        <form method="POST">
            <div class="field">
                <label class="label has-text-default"><%= __("page.remove.reasonType") %> <span class="has-text-danger">*</span></label>
                <div class="buttons" id="typeButtons">
                    <button type="button" id="innapAvatarName" onclick="premadeReason('innapAvatarName');" class="button is-dark">
                        <span><%= __("page.remove.premadeReasons.inappropriate") %></span>
                    </button>
                    <button type="button" id="discordTosViolation" onclick="premadeReason('discordTosViolation');" class="button is-dark">
                        <span><%= __("page.remove.premadeReasons.discord.tos") %></span>
                    </button>
                    <button type="button" id="tosViolation" onclick="premadeReason('tosViolation');" class="button is-dark">
                        <span><%= __("page.remove.premadeReasons.del.tos") %></span>
                    </button>
                    <button type="button" id="notLGBT" onclick="premadeReason('notLGBT');" class="button is-dark">
                        <span><%= __("page.remove.premadeReasons.notLGBT") %></span>
                    </button>
                    <button type="button" id="invalidInvite" onclick="premadeReason('invalidInvite');" class="button is-dark">
                        <span><%= __("page.remove.premadeReasons.invalidInvite") %></span>
                    </button>
                    <button type="button" id="other" onclick="premadeReason('other');" class="button is-dark">
                        <span><%= __("page.remove.premadeReasons.other") %></span>
                    </button>
                </div>
            </div>
            <br id="reasonInputBR" style="display: none;" />
            <div id="reasonInput" style="display: none;" class="field">
                <label class="label has-text-default"><%= __("common.reason") %> <span class="has-text-danger">*</span></label>
                <p class="control has-icons-left has-icons-right">
                    <input class="input is-rounded" type="text" id="reason" name="reason" placeholder="<%= __("page.remove.servers.placeholder") %>">
                    <span class="icon is-small is-left">
                        <i aria-hidden="true" class="fas fa-comment-dots"></i>
                    </span>
                </p>
            </div>
            <br />
            <input id="type" name="type" hidden>
            <div class="field is-grouped">
                <div class="buttons">
                    <button class="button is-success">
                        <span class="icon"><i aria-hidden="true" class="fas fa-check-circle"></i></span>
                        <span><%= __("common.submit") %></span>
                    </button>
                    <a class="button is-danger" href="<%= linkPrefix %>/servers/<%= removingServer._id %>">
                        <span class="icon"><i aria-hidden="true" class="fas fa-times-circle"></i></span>
                        <span><%= __("common.cancel") %></span>
                    </a>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    function premadeReason(type) {
        for (const button of document.getElementById("typeButtons").getElementsByTagName("button")) {
            button.classList.remove("is-default");
        }
        
        document.getElementById("reasonInputBR").style.display = "block";
        document.getElementById("reasonInput").style.display = "block";

        switch (type) {
            case "other":
                document.getElementById("type").value = 0;
                document.getElementById("other").classList.add("is-default");
                break;
            case "innapAvatarName":
                document.getElementById("reason").value = "This server contains an inappropriate avatar and/or name!";
                document.getElementById("innapAvatarName").classList.add("is-default");
                document.getElementById("type").value = 1;
                break;
            case "discordTosViolation": 
                document.getElementById("reason").value = "Violating Discord's Terms of Use.";
                document.getElementById("discordTosViolation").classList.add("is-default");
                document.getElementById("type").value = 2;
                break;
            case "tosViolation":
                document.getElementById("reason").value = "Violating our Terms of Use.";    
                document.getElementById("tosViolation").classList.add("is-default");
                document.getElementById("type").value = 3;
                break;
            case "notLGBT":
                document.getElementById("reason").value = "This server does not appear to be an LGBT server, so we do not accept it to our LGBT server site."; 
                document.getElementById("notLGBT").classList.add("is-default");
                document.getElementById("type").value = 4;
                break;
            case "invalidInvite":
                document.getElementById("reason").value = "The server's invite has expired.";
                document.getElementById("invalidInvite").classList.add("is-default");
                document.getElementById("type").value = 5;
                break;
        }
    }
</script>
<%- include("../../../partials/footer.ejs") %>
