<%- include("templates/base.ejs") %>
<div id="content">
    <div class="box-container">
        <h1>Settings</h1>
        <% if (errorMessage != null) { %>
        <div class="dialog error-dialog">
            <span><%= errorMessage %></span>
        </div>
        <% } %>
        <div class="settings-layout">
            <div class="settings-left">
                <div class="settings-area">
                    <h3 class="setting-name">Username</h3>
                    <input type="text" value="@<%= currentUser.username %>" class="form-input" readonly>
                    <span class="setting-description">This is your username, once you've created your account there is no way to change this.</span>
                </div>
                <div class="settings-area">
                    <h3 class="setting-name">Display name</h3>
                    <form action="/actions/settings/changeDisplayName" method="post" class="settings-form">
                        <input type="hidden" name="CSRFToken" value="<%= csrfToken %>">

                        <input type="text" name="displayName" value="<%= currentUser.displayName %>"  class="form-input">
                        <input type="submit" value="Change">
                    </form>
                    <span class="setting-description">This will be shown instead of your username on posts, your profile and other places.</span>
                </div>
                <div class="settings-area">
                    <h3 class="setting-name">Bio</h3>
                    <form action="/actions/settings/changeBio" method="post" class="settings-form">
                        <input type="hidden" name="CSRFToken" value="<%= csrfToken %>">

                        <textarea class="code-box" name="content" placeholder="bio"><%= currentUser.profile.bio %></textarea>
                        <input type="submit" class="post-box-button" value="Update">
                    </form>
                    <span class="setting-description">Tell everyone more about you with Markdown! (You can learn Markdown basics <a href="https://commonmark.org/help/">here</a>)</span>
                </div>
                <div class="settings-area">
                    <h3 class="setting-name">Custom CSS</h3>
                    <form action="/actions/settings/changeCSS" method="post" class="settings-form">
                        <input type="hidden" name="CSRFToken" value="<%= csrfToken %>">

                        <textarea class="code-box" name="content" placeholder="PLACEHOLDER WILL BE REPLACED WITH CODEMIRROR BOX"><%= currentUser.profile.css %></textarea>
                        <input type="submit" class="post-box-button" value="Update">
                    </form>
                    <span class="setting-description">Change your Bojan Social experience with custom CSS (<a href="https://developer.mozilla.org/en-US/">MDN</a> is a great reasource to learn basic CSS)</span>
                </div>
            </div>
            <div class="settings-right">
                <div class="settings-area">
                    <h3 class="setting-name">Profile picture</h3>
                    <div class="profile-picture-preview">
                      <img src="/@<%= currentUser.username %>/pfp" alt="Avatar" width="48" height="48">
                      <span class="setting-description">This is your current profile picture</span>
                    </div>
                    <form action="/actions/settings/changeProfilePicture" method="post" class="settings-form" enctype="multipart/form-data">
                        <input type="file" name="profilePicture" accept="image/jpeg image/png">
                        <input type="submit" value="Update">
                    </form>
                    <span class="setting-description">Supported file formats are .png and .jpg</span>
                </div>
                <div class="settings-area">
                    <h3 class="setting-name">Banner</h3>
                    <form action="/actions/settings/changeBanner" method="post" class="settings-form" enctype="multipart/form-data">
                        <input type="file" name="bannerPicture" accept="image/jpeg image/png">
                        <input type="submit" value="Update">
                    </form>
                    <span class="setting-description">Supported file formats are also .png and .jpg </span>
                </div>
                <div class="settings-area">
                    <h3 class="setting-name">Song upload</h3>
                    <form action="/actions/settings/changeSong" method="post" class="settings-form" enctype="multipart/form-data">
                        <input type="file" name="song">
                        <input type="submit" value="Update">
                    </form>
                    <span class="setting-description"></span>
                </div>
            </div>
        </div>
    </div>
</div>
<%- include("templates/footer.ejs") %>
</body>
</html>
