<%- include("../../partials/header.ejs") %>
<%- include("../../partials/nav.ejs") %>
<link href="/css/theme/<%= preferredTheme %>/form.css?v=<%= cssVersion %>" media="screen, print" rel="stylesheet">
<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">
<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>
<section class="hero is-primary">
    <div class="hero-body">
        <div class="container has-text-centered" style="text-align: center;">
            <br />
            <h1 class="title">
                <span class="icon is-medium iconalign">
                    <i aria-hidden="true" class="fad fa-swatchbook has-text-default fa-1x"></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.account.preferences.snake") %></label>
                <div class="field">
                    <input class="is-checkradio is-circle has-background-color is-danger" type="checkbox" id="noGames" name="noGames" <% if (req.user.db.preferences.enableGames === false) { %>checked="checked"<% } %>>
                    <label class="has-text-danger" for="noGames"><%= __("common.disable") %></label>
                </div>
                <br />
                <label class="label has-text-default"><%= __("page.account.preferences.experiments") %></label>
                <div class="field">
                    <input class="is-checkradio is-circle has-background-color is-success" type="checkbox" id="experiments" name="experiments" <% if (req.user.db.preferences.experiments === true) { %>checked="checked"<% } %>>
                    <label class="has-text-success" for="experiments"><%= __("common.allow") %></label>
                    <br />
                    <label class="is-size-7 has-text-danger"><%= __("page.account.preferences.experiments.warning") %></label>
                </div>
                <br />
                <label class="label has-text-default"><%= __("page.account.preferences.accent") %></label>
                <div class="field">
                    <input class="backdrop" name="iconColour" type="color" value="<%= req.user.db.preferences.defaultColour %>" style="width:30%; background-color: transparent; border-color: transparent;">
                </div>
                <br />
                <div class="field">
                    <label class="label has-text-default"><%= __("page.account.preferences.theme") %></label>
                    <div class="control has-icons-left">
                        <div class="select is-rounded">
                            <select name="theme" required>
                                <option disabled><%= __("common.select") %></option>
                                <option value="black" <% if (req.user.db.preferences.theme === 0) { %>selected<% } %>><%= __("common.theme.black") %></option>
                                <option value="dark" <% if (req.user.db.preferences.theme === 1) { %>selected<% } %>><%= __("common.theme.dark") %></option>
                                <option value="light" <% if (req.user.db.preferences.theme === 2) { %>selected<% } %>><%= __("common.theme.light") %></option>
                            </select>
                        </div>
                        <div class="icon is-small is-left">
                            <i aria-hidden="true" class="fas fa-palette"></i>
                        </div>
                    </div>
                </div>
                <br />    
                <div class="field">
                    <label class="label has-text-default"><%= __("page.account.preferences.customCSS") %> <span class="has-text-danger">(<%= __("page.account.preferences.customCSS.danger") %>)</span></label>
                    <div onkeyup="monacoToField();" id="profileCssEditor" class="editorBackdrop" style="width:99%;height:500px;" value="<%= customGlobalCssDB %>"></div>
                    <textarea hidden name="customCss" id="profileCss"></textarea>
                    <label class="is-size-7 has-text-default"><%= __("page.account.preferences.customCSS.note") %></label>
                </div>
                <br />
                <div class="field is-grouped">
                    <div class="buttons">
                        <button class="button is-success" onclick="monacoToField();">
                            <span class="icon"><i aria-hidden="true" class="fas fa-check-circle"></i></span>
                            <span><%= __("common.save") %></span>
                        </button>
                        <a class="button is-orange" href="<%= linkPrefix %>/users/account/preferences/reset">
                            <span class="icon"><i aria-hidden="true" class="fas fa-minus-circle"></i></span>
                            <span><%= __("page.account.preferences.revert") %></span>
                        </a>
                        <a class="button is-danger" href="<%= linkPrefix %>/users/<%= req.user.id %>">
                            <span class="icon"><i aria-hidden="true" class="fas fa-times-circle"></i></span>
                            <span><%= __("common.cancel") %></span>
                        </a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
<div style="display: none;" id="customGlobalCssDB"><%= customGlobalCssDB %></div>
<script>
    const warn = event => {
        event.preventDefault()
        event.returnValue=''
    }
    addEventListener('beforeunload', warn)
    document.querySelector('form').onsubmit = () => removeEventListener('beforeunload', warn)
    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 profileCssEditor=monaco.editor.create(document.getElementById("profileCssEditor"),{value:document.getElementById("customGlobalCssDB").innerText,language:"css"});function monacoToField(){var o=window.profileCssEditor.getValue();$("#profileCss").val(o)}monaco.editor.setTheme("<%= monacoTheme %>");</script>   
<%- include("../../partials/footer.ejs") %>
