<%- include("../../partials/header.ejs") %>

<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.min.css" integrity="sha512-XjO5XYWl8u7tYF3CItEHgoWh8rtQmDeSzPJq4+4PIrbak7TiqeKbWv/4ZwHZ1HAf5dIWHXoguA/jobn2psKZ7w==" crossorigin="anonymous">
<link href="/css/monaco.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js" integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g==" crossorigin="anonymous" async></script>
<script src="https://cdn.jsdelivr.net/gh/jitbit/HtmlSanitizer@master/HtmlSanitizer.js"></script>
<style>.is-checkradio[type="checkbox"].is-default.has-background-color+label::before,.is-checkradio[type="checkbox"].is-default.has-background-color+label:before{border-color:transparent !important;background-color:<%= defaultColour %> !important}.is-checkradio[type="checkbox"].is-default:hover:not([disabled])+label::before,.is-checkradio[type="checkbox"].is-default:hover:not([disabled])+label:before{border-color:<%= defaultColour %> !important}.is-checkradio[type="checkbox"].is-default:checked+label::after,.is-checkradio[type="checkbox"].is-default:checked+label:after{border-color:<%= defaultColour %> !important}.is-checkradio[type="checkbox"].is-default:checked.has-background-color+label::before,.is-checkradio[type="checkbox"].is-default:checked.has-background-color+label:before{border-color:transparent !important;background-color:<%= defaultColour %> !important}.is-checkradio[type="checkbox"].is-default:checked.has-background-color+label::after,.is-checkradio[type="checkbox"].is-default:checked.has-background-color+label:after{border-color:<%= foreground %> !important;background-color:<%= defaultColour %> !important}.is-checkradio[type="checkbox"].is-default.is-block:hover:not([disabled])+label::after,.is-checkradio[type="checkbox"].is-default.is-block:hover:not([disabled])+label:after,.is-checkradio[type="checkbox"].is-default.is-block:hover:not([disabled])+label::before,.is-checkradio[type="checkbox"].is-default.is-block:hover:not([disabled])+label:before{border-color:<%= defaultColour %> !important}.is-checkradio[type="checkbox"].is-default.is-block:checked+label{color:<%= foreground %>;border-color:<%= defaultColour %> !important;background:<%= defaultColour %>}.is-checkradio[type="checkbox"].is-default.is-block:checked+label::after,.is-checkradio[type="checkbox"].is-default.is-block:checked+label:after{border-color:<%= foreground %> !important}.is-checkradio[type="checkbox"].is-default.is-block:checked:hover:not([disabled])+label{background:#5e78d5}.is-checkradio[type="checkbox"].is-default.is-block:checked:hover:not([disabled])+label::after,.is-checkradio[type="checkbox"].is-default.is-block:checked:hover:not([disabled])+label:after,.is-checkradio[type="checkbox"].is-default.is-block:checked:hover:not([disabled])+label::before,.is-checkradio[type="checkbox"].is-default.is-block:checked:hover:not([disabled])+label:before{border-color:#f2f2f2 !important}</style>
<%- include("../../partials/nav.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="fas fa-plus has-text-default"></i>
                </span>
                <br>
                <span><%= title %></span>
            </h1>
            <h2 class="subtitle">
                <%= subtitle %>
            </h2>
        </div>
    </div>
    </section>
    <div class="container">
        <div class="section">
            <article id="errors" style="display: none;" class="message is-danger">
                <div class="message-body content has-background-primary">
                    <ul id="errorList" style="margin-top: unset;">
                        
                    </ul>
                </div>
            </article>

            <form method="POST">
                <h3 class="is-size-3 has-text-default"><%= __("page.form.category.generalInfo") %></h3>
                <br>
                <div class="field">
                    <label class="label has-text-default"><%= __("page.servers.code") %> <span class="has-text-danger">*</span></label>
                    <div class="control">
                        <div class="field has-addons <% if (htmlDir === "rtl") { %>has-addons-right<% } %>" style="direction: ltr;">
                            <p class="control" aria-hidden="true">
                                <a class="button is-rounded is-static">
                                    https://discord.gg/
                                </a>
                            </p>
                            <p class="control" required>
                                <input id="form_inviteCode" class="input is-rounded" type="text" name="invite" placeholder="WeCer3J" onpaste="setTimeout(() => this.value = this.value.replace('https:/\/discord.gg/', ''), 0)">
                            </p>
                        </div>
                    </div>
                    <p id="serverName" style="margin-top: 10px;" class="is-size-7 has-text-default"></p>
                </div>
                <br>
                <label class="label has-text-default"><%= __("common.tags") %></label>
                <div class="columns">
                    <div class="column is-one-quarter">
                        <div class="field">
                            <input class="is-checkradio is-circle has-background-color is-link" type="checkbox" id="gaming" name="gaming">
                            <label class="has-text-link" for="gaming"><%= __("common.tags.gaming") %></label>
                        </div>
                        <div class="field">
                            <input class="is-checkradio is-circle has-background-color is-info" type="checkbox" id="music" name="music">
                            <label class="has-text-info" for="music"><%= __("common.tags.music") %></label>
                        </div>
                        <div class="field">
                            <input class="is-checkradio is-circle has-background-color is-success" type="checkbox" id="mediaEntertain" name="mediaEntertain">
                            <label class="has-text-success" for="mediaEntertain"><%= __("common.tags.mediaEntertainment") %></label>
                        </div>
                        <div class="field">
                            <input class="is-checkradio is-circle has-background-color is-orange" type="checkbox" id="createArts" name="createArts">
                            <label class="has-text-orange" for="createArts"><%= __("common.tags.creativeArts") %></label>
                        </div>
                        <div class="field">
                            <input class="is-checkradio is-circle has-background-color is-danger" type="checkbox" id="sciTech" name="sciTech">
                            <label class="has-text-danger" for="sciTech"><%= __("common.tags.scienceTech") %></label>
                        </div>
                        <div class="field">
                            <input class="is-checkradio is-circle has-background-color is-magenta" type="checkbox" id="edu" name="edu">
                            <label class="has-text-magenta" for="edu"><%= __("common.tags.education") %></label>
                        </div>
                        <div class="field">
                            <input class="is-checkradio is-circle has-background-color is-pink" type="checkbox" id="fashBeaut" name="fashBeaut">
                            <label class="has-text-pink" for="fashBeaut"><%= __("common.tags.fashionBeauty") %></label>
                        </div>
                    </div>
                    <div class="column is-one-quarter">
                        <div class="field">
                            <input class="is-checkradio is-circle has-background-color is-link" type="checkbox" id="relIdentity" name="relIdentity">
                            <label class="has-text-link" for="relIdentity"><%= __("common.tags.relationshipIdentity") %></label>
                        </div>
                        <div class="field">
                            <input class="is-checkradio is-circle has-background-color is-info" type="checkbox" id="travelCuis" name="travelCuis">
                            <label class="has-text-info" for="travelCuis"><%= __("common.tags.travelFood") %></label>
                        </div>
                        <div class="field">
                            <input class="is-checkradio is-circle has-background-color is-success" type="checkbox" id="fitHealth" name="fitHealth">
                            <label class="has-text-success" for="fitHealth"><%= __("common.tags.fitnessHealth") %></label>
                        </div>
                        <div class="field">
                            <input class="is-checkradio is-circle has-background-color is-orange" type="checkbox" id="finance" name="finance">
                            <label class="has-text-orange" for="finance"><%= __("common.tags.finance") %></label>
                        </div><div class="field">
                            <input class="is-checkradio is-circle has-background-color is-danger" type="checkbox" id="contCreat" name="contCreat">
                            <label class="has-text-danger" for="contCreat"><%= __("common.tags.contCreat") %></label>
                        </div>
                        <div class="field">
                            <input class="is-checkradio is-circle has-background-color is-magenta" type="checkbox" id="lgbt" name="lgbt">
                            <label class="has-text-magenta" for="lgbt"><%= __("common.tags.lgbt") %></label>
                        </div>
                        <div class="field">
                            <input class="is-checkradio is-circle has-background-color is-pink" type="checkbox" id="nsfw" name="nsfw">
                            <label class="has-text-pink" for="nsfw"><%= __("common.tags.nsfw") %></label>
                        </div>
                    </div>
                    <div class="column is-one-quarter"></div>
                    <div class="column is-one-quarter"></div>
                </div>
                <br>
                <br>
                <h3 class="is-size-3 has-text-default"><%= __("page.form.category.links") %></h3>
                <br>
                <div class="field">
                    <label class="label has-text-default"><%= __("page.servers.website") %></label>
                    <p class="control has-icons-left has-icons-right">
                        <input id="form_website" class="input is-rounded" type="text" name="website" placeholder="https://watchanimeattheoffice.com">
                        <span class="icon is-small is-left">
                            <i aria-hidden="true" class="fas fa-globe"></i>
                        </span>
                    </p>
                </div>
                <br>
                <div class="field">
                    <label class="label has-text-default"><%= __("page.servers.donate") %></label>
                    <p class="control has-icons-left has-icons-right">
                        <input id="form_donationUrl" class="input is-rounded" type="text" name="donationUrl" placeholder="https://bigbeans.solutions">
                        <span class="icon is-small is-left">
                            <i aria-hidden="true" class="fas fa-dollar-sign"></i>
                        </span>
                    </p>
                </div>
                <br>
                <br>
                <% if (req.user.db.preferences.experiments === true) { %>
                    <h3 class="is-size-3 has-text-default"><%= __("page.servers.preview") %></h3>
                    <p style="margin-bottom: .5em;"><%= __("page.servers.preview.details") %></span>
                    <h4 class="is-size-6" style="margin-bottom: .75em;"><a class="has-text-info" rel="noopener" target="_blank" onclick="inviteWB(window, 350, 600);"><%= __("common.widgetbot.invite") %></a></h4>
                    <div class="field">
                        <label class="label has-text-default"><%= __("page.servers.preview.id") %> <span class="has-text-orange">* (<%= __("common.widgetbot.form.require") %>)</span></label>
                        <p class="control has-icons-left">
                            <input id="form_previewChannel" class="input is-rounded" type="text" placeholder="569679825988485130">
                            <span class="icon is-small is-left">
                                <i class="fas fa-hashtag"></i>
                            </span>
                        </p>
                    </div>
                    <br>
                    <br>
                <% } %>
                <h3 class="is-size-3 has-text-default"><%= __("page.form.category.descriptions") %></h3>
                <br>
                <div class="field">
                    <label class="label has-text-default"><%= __("page.servers.shortDesc") %> <span class="has-text-danger">*</span></label>
                    <p class="control has-icons-left has-icons-right">
                        <input id="form_shortDescription" class="input is-rounded" type="text" name="shortDescription" placeholder="<%= __("page.servers.shortDesc.placeholder") %>" required maxlength="200">
                        <span class="icon is-small is-left">
                            <i aria-hidden="true" class="fas fa-comment-dots"></i>
                        </span>
                    </p>
                </div>
                <br>
                <div class="field">
                    <label class="label has-text-default"><%= __("page.servers.longDesc") %> (<%= __("common.form.basicHtmlMarkdown") %>) <span class="has-text-danger">*</span></label>
                    <div onkeyup="monacoToField();" id="longDescEditor" class="editorBackdrop" style="width:99%;height:500px;"></div>
                    <textarea hidden name="longDescription" id="longDesc" required></textarea>
                </div>
                <br>
                <div class="field is-grouped">
                    <div class="buttons">
                        <a id="submitButton" onclick="doSubmit();" class="button is-success">
                            <span class="icon">
                              <i aria-hidden="true" class="fas fa-check-circle"></i>
                            </span>
                            <span><%= __("common.submit") %></span>
                        </a>
                        <a id="cancelButton" href="<%= linkPrefix %>/users/@me" class="button is-danger">
                            <span class="icon">
                              <i aria-hidden="true" class="fas fa-times-circle"></i>
                            </span>
                            <span><%= __("common.cancel") %></span>
                        </a>
                    </div>
                </div>
            </form>    
        </div>
        <br>
        <script>
    const code = document.querySelector('#form_inviteCode')
    const shortDesc = document.querySelector('#form_shortDescription')
    const name = document.querySelector('#serverName')
    code.addEventListener('change', async () => {
        if (!code.value) return name.innerText = ""

        if (code.value.includes(' ')) {
            document.getElementById("errors").style.display = "block";
            document.getElementById("errorList").innerText = '<%= __("common.error.listing.arr.invite.invalid") %>'
            scroll(0, 0);
        } else if (code.value.length > 32) {
            document.getElementById("errors").style.display = "block";
            document.getElementById("errorList").innerHTML = '<%= __("common.error.listing.arr.invite.tooLong") %>'
            scroll(0, 0);
        } else if (code.value.includes('discord.gg')) {
            document.getElementById("errors").style.display = "block";
            document.getElementById("errorList").innerHTML = '<%= __("common.error.server.arr.invite.dgg") %>'
            scroll(0, 0);
        } else document.getElementById("errors").style.display = "none";

        const invite = await (await fetch(`https://discord.com/api/v10/invites/${code.value}?with_expiration=true`)).json()
        if (!invite.guild) return

        name.innerText = invite.guild.name

        if (invite.expires_at) {
            document.getElementById("errors").style.display = "block";
            document.getElementById("errorList").innerHTML = '<%= __("common.error.server.invite.expires") %>'
            return scroll(0, 0)
        }

        if (await (await fetch(`./${invite.guild.id}/exists`)).json()) {
            document.getElementById("errors").style.display = "block";
            document.getElementById("errorList").innerText = '<%= __("common.error.server.conflict") %>'
            scroll(0, 0);
        } else {
            document.getElementById("errors").style.display = "none";
            if (!shortDesc.value) {
                if (invite.guild.description) {
                    shortDesc.value = invite.guild.description
                } else if (invite.guild.welcome_screen.description) {
                    shortDesc.value = invite.guild.welcome_screen.description
                }
            }
        }
    })
            
    const warn = event => {
        event.preventDefault()
        event.returnValue=''
    }
    addEventListener('beforeunload', warn)
    document.querySelector('form').onsubmit = () => removeEventListener('beforeunload', warn)

    function doSubmit() {
        monacoToField();
        document.getElementById("errors").style.display = "none";
        document.getElementById("submitButton").classList.add("is-loading");
        document.getElementById("cancelButton").setAttribute("disabled", true);
        document.getElementById("cancelButton").removeAttribute("href");

        async function fetchPOST(url = '', data = {}) {
            const response = await fetch(url, {
                method: "POST",
                mode: "cors", 
                cache: "no-cache", 
                credentials: "same-origin",
                headers: {
                    "Content-Type": "application/json"
                },
                redirect: "follow",
                referrerPolicy: "no-referrer",
                body: JSON.stringify(data)
            });

            return response.json();
        }

        fetchPOST("<%= linkPrefix %>/servers/submit", {
            shortDescription: document.getElementById("form_shortDescription").value,
            longDescription: document.getElementById("longDesc").value,
            invite: document.getElementById("form_inviteCode").value,
            website: document.getElementById("form_website").value,
            donationUrl: document.getElementById("form_donationUrl").value,
            previewChannel: document.getElementById("form_previewChannel")?.value,

            gaming: document.getElementById("gaming").checked,
            music: document.getElementById("music").checked,
            mediaEntertain : document.getElementById("mediaEntertain").checked,
            createArts: document.getElementById("createArts").checked,
            sciTech: document.getElementById("sciTech").checked,
            edu: document.getElementById("edu").checked, 
            fashBeaut: document.getElementById("fashBeaut").checked,
            relIdentity: document.getElementById("relIdentity").checked,
            travelCuis: document.getElementById("travelCuis").checked,
            fitHealth: document.getElementById("fitHealth").checked,
            finance: document.getElementById("finance").checked,
            lgbt: document.getElementById("lgbt").checked
        })
        .then(data => {
            if (!data || data.error === true) {
                document.getElementById("errors").style.display = "block";
                document.getElementById("errorList").innerHTML = data.errors.map(err => `<li>${HtmlSanitizer.SanitizeHtml(err)}</li>`).join('');
                scroll(0, 0);
                document.getElementById("submitButton").classList.remove("is-loading");
                document.getElementById("cancelButton").removeAttribute("disabled");
                document.getElementById("cancelButton").setAttribute("href", "<%= linkPrefix %>/users/@me");
            } else {
                removeEventListener("beforeunload", warn);
                window.location = `<%= baseURL %>/<%= linkPrefix %>/servers/${data.id}`;
            }
        }).catch((e) => { console.error(e); });
    }
    MonacoEnvironment = {getWorkerUrl: () => '/js/monaco.js'}
</script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.min.js" integrity="sha512-gWqaPfGsZiCkYB6e5mNN4SMRpEvLGItLBqgOAoyLSKtDxWS2O1YPcOeGTy8d8l00gqc8rVue9ae/ncZqhmfj4g==" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.nls.min.js" integrity="sha512-4XY3/LL6Plkq2tXMnatY+se07ZhwFMkZehD5Z68HrKoSL3BTyLDjwFomhUWixKu8VUw6jWe/8RXT1WtH95lLFg==" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.min.js" integrity="sha512-CK3czr9gLG2z/ygdSM+gNenkN9AShfpW4gMjVyY06VgFHLoc4OCoO92Z8UkcBwVX0ufoYbJw3IVs1mHfXQeI3g==" crossorigin="anonymous"></script>
        <script>function inviteWB(win,w,h){const y=win.top.outerHeight/2+win.top.screenY-(h/2);const x=win.top.outerWidth/2+win.top.screenX-(w/2);return win.open("https://add.widgetbot.io/","Invite WidgetBot",`toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=${ w }, height=${ h }, top=${ y }, left=${ x }`)}
                var longDescEditor=monaco.editor.create(document.getElementById("longDescEditor"),{language:"markdown"});function monacoToField(){var o=window.longDescEditor.getValue();$("#longDesc").val(o)}monaco.editor.setTheme("<%= monacoTheme %>");</script>   
<%- include("../../partials/footer.ejs") %>