<%- include("../../partials/header.ejs") %>
<%- include("../../partials/nav.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>
<section class="hero is-primary">
    <div class="hero-body">
        <div class="container has-text-centered">
            <br />
            <h1 class="title">
                <span class="icon is-medium iconalign">
                    <i aria-hidden="true" class="fad fa-pen has-text-default fa-1x"></i>
                </span>
                <br />
                <span><%= title %></span>
            </h1>
            <% if (userProfile._id === user._id) { %>
                <h2 class="subtitle"><%= __("page.account.edit.subtitle.me") %></h2>
            <% } else { %>
                <h2 class="subtitle"><%= __("page.account.edit.subtitle.other", userProfile.fullUsername) %></h2>
            <% } %>
        </div>
    </div>
</section>
<div class="container">
    <div class="section">
        <form method="POST">
            <div class="field">
                <label class="label has-text-default"><%= __("page.account.edit.bio") %></label>
                <p class="control has-icons-left has-icons-right">
                    <input class="input is-rounded" type="text" name="bio" value="<%= userProfile.profile.bio %>" placeholder="<%= __("page.account.edit.bio.placeholder") %>">
                    <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"><%= __("common.website") %></label>
                <p class="control has-icons-left has-icons-right">
                    <input class="input is-rounded" type="text" name="website" value="<%= userProfile.profile.links.website %>" placeholder="<%= __("page.account.edit.website.placeholder") %>">
                    <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"><%= __("common.social.github") %> <span class="has-text-default">(<%= __("page.account.edit.social.notice") %>)</span></label>
                <p class="control has-icons-left has-icons-right">
                    <input class="input is-rounded" type="text" name="github" value="<%= userProfile.profile.links.github %>" placeholder="<%= __("page.account.edit.social.placeholder") %>">
                    <span class="icon is-small is-left">
                        <i aria-hidden="true" class="fab fa-github"></i>
                    </span>
                </p>
            </div>
            <br />
            <div class="field">
                <label class="label has-text-default"><%= __("common.social.gitlab") %> <span class="has-text-default">(<%= __("page.account.edit.social.notice") %>)</span></label>
                <p class="control has-icons-left has-icons-right">
                    <input class="input is-rounded" type="text" name="gitlab" value="<%= userProfile.profile.links.gitlab %>" placeholder="<%= __("page.account.edit.social.placeholder") %>">
                    <span class="icon is-small is-left">
                        <i aria-hidden="true" class="fab fa-gitlab"></i>
                    </span>
                </p>
            </div>
            <br />
            <div class="field">
                <label class="label has-text-default"><%= __("common.social.twitter") %> <span class="has-text-default">(<%= __("page.account.edit.social.notice") %>)</span></label>
                <p class="control has-icons-left has-icons-right">
                    <input class="input is-rounded" type="text" name="twitter" value="<%= userProfile.profile.links.twitter %>" placeholder="<%= __("page.account.edit.social.placeholder") %>">
                    <span class="icon is-small is-left">
                        <i aria-hidden="true" class="fab fa-twitter"></i>
                    </span>
                </p>
            </div>
            <br />
            <div class="field">
                <label class="label has-text-default"><%= __("common.social.instagram") %> <span class="has-text-default">(<%= __("page.account.edit.social.notice") %>)</span></label>
                <p class="control has-icons-left has-icons-right">
                    <input class="input is-rounded" type="text" name="instagram" value="<%= userProfile.profile.links.instagram %>" placeholder="<%= __("page.account.edit.social.placeholder") %>">
                    <span class="icon is-small is-left">
                        <i aria-hidden="true" class="fab fa-instagram"></i>
                    </span>
                </p>
            </div>
            <br />
            <div class="field">
                <label class="label has-text-default"><%= __("common.social.snapchat") %> <span class="has-text-default">(<%= __("page.account.edit.social.notice") %>)</span></label>
                <p class="control has-icons-left has-icons-right">
                    <input class="input is-rounded" type="text" name="snapchat" value="<%= userProfile.profile.links.snapchat %>" placeholder="<%= __("page.account.edit.social.placeholder") %>">
                    <span class="icon is-small is-left">
                        <i aria-hidden="true" class="fab fa-snapchat-ghost"></i>
                    </span>
                </p>
            </div>
            <br />
            <div class="field">
                <label class="label has-text-default"><%= __("page.account.edit.customCSS") %> <span class="has-text-default">(<%= __("page.account.edit.customCSS.notice") %>)</span></label>
                <% if (userProfile.rank.premium === true || userProfile.rank.mod === true) { %>
                    <div onkeyup="monacoToField();" id="profileCssEditor" class="editorBackdrop" style="width:99%;height:500px;" value="<%= userProfile.profile.css %>"></div>
                    <textarea hidden name="profileCss" id="profileCss"></textarea>
                <% } else { %>
                    <p class="has-text-danger"><%= __("page.account.edit.customCSS.notPermitted") %></p>
                <% } %>
            </div>
            <br />
            <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.save") %></span>
                    </button>
                    <a class="button is-danger" href="<%= linkPrefix %>/users/<% if (userProfile._id === user._id) { %>@me<% } else { %><%= userProfile._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>
    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:`<%= userProfile.profile.css %>`,language:"css"});function monacoToField(){var o=window.profileCssEditor.getValue();$("#profileCss").val(o)}monaco.editor.setTheme("<%= monacoTheme %>");</script>   
<%- include("../../partials/footer.ejs") %>