<%- 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="fad fa-pen 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.templates.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.new/
                                </a>
                            </p>
                            <p class="control" required>
                                <input id="form_useCode" class="input is-rounded" type="text" name="code" value="<%= template._id %>" placeholder="aUe6qZZgnhGh" onpaste="setTimeout(() => this.value = this.value.replace('https:/\/discord.new/', ''), 0)">
                            </p>
                        </div>
                    </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" <% if (template.tags && template.tags.includes("Gaming")) { %>checked="checked"<% } %>>
                            <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" <% if (template.tags && template.tags.includes("Music")) { %>checked="checked"<% } %>>
                            <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" <% if (template.tags && template.tags.includes("Media & Entertainment")) { %>checked="checked"<% } %>>
                            <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" <% if (template.tags && template.tags.includes("Creative Arts")) { %>checked="checked"<% } %>>
                            <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" <% if (template.tags && template.tags.includes("Science & Tech")) { %>checked="checked"<% } %>>
                            <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" <% if (template.tags && template.tags.includes("Education")) { %>checked="checked"<% } %>>
                            <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" <% if (template.tags && template.tags.includes("Fashion & Beauty")) { %>checked="checked"<% } %>>
                            <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" <% if (template.tags && template.tags.includes("Relationships & Identity")) { %>checked="checked"<% } %>>
                            <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" <% if (template.tags && template.tags.includes("Travel & Food")) { %>checked="checked"<% } %>>
                            <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" <% if (template.tags && template.tags.includes("Fitness & Health")) { %>checked="checked"<% } %>>
                            <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" <% if (template.tags && template.tags.includes("Finance")) { %>checked="checked"<% } %>>
                            <label class="has-text-orange" for="finance"><%= __("common.tags.finance") %></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.descriptions") %></h3>
                <br />
                <div class="field">
                    <label class="label has-text-default"><%= __("page.templates.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" value="<%= template.shortDesc %>" name="shortDescription" placeholder="<%= __("page.templates.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.templates.longDesc") %> (<%= __("common.form.basicHtmlMarkdown") %>)</label>
                    <div onkeyup="monacoToField();" id="longDescEditor" class="editorBackdrop" style="width:99%;height:500px;"></div>
                    <textarea hidden name="longDescription" id="longDesc" required><%- longDesc %></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 %>/templates/<%= template._id %>" 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>
            function htmlDecode(input){
                var e = document.createElement('textarea');
                e.innerHTML = input;
                return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
            }

            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 %>/templates/<%= template._id %>/edit", {
                    shortDescription: document.getElementById("form_shortDescription").value,
                    longDescription: document.getElementById("longDesc").value,
                    code: document.getElementById("form_useCode").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
                })
                .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 %>/templates/<%= template._id %>");
                    } else {
                        removeEventListener("beforeunload", warn);
                        window.location = "<%= linkPrefix %>/templates/<%= template._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>var longDescEditor=monaco.editor.create(document.getElementById("longDescEditor"),{theme:"<%= monacoTheme %>",value:htmlDecode(document.getElementById("longDesc").value),language:"markdown"});
        function monacoToField(){var o=window.longDescEditor.getValue();$("#longDesc").val(o)}monaco.editor.setTheme("<%= monacoTheme %>");</script>   
<%- include("../../partials/footer.ejs") %>