{% extends "base.html" %}

{% block title %}
    {{ royal.username }} - RYGbioeditor
{% endblock %}

{% block head %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
    <script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
{% endblock %}

{% block content %}
    <div class="dbox">
        <div class="dbox-top">
            <span class="left">
                Editor Bio
            </span>
        </div>
        <div class="dbox-bot">
            <form method="POST" class="full">
                <!--suppress HtmlFormInputWithoutLabel -->
                <textarea id="profile-editbio-contents" name="contents">{{ royal.bio.contents }}</textarea>
                <label for="profile-editbio-submit">
                    <input id="profile-editbio-submit" type="submit" value="Salva">
                </label>
            </form>
        </div>
    </div>
{% endblock %}

{% block footscripts %}
    <script>
        //TODO: maybe enable autosave?
        let simplemde = new SimpleMDE({
            element: document.getElementById("profile-editbio-contents"),
            blockStyles: {
                italic: "_"
            },
            tabSize: 4,
            spellChecker: false,
            toolbar: [
                {
                    name: "bold",
                    action: SimpleMDE.toggleBold,
                    className: "fas fa-bold no-icon",
                    title: "Grassetto",
                },
                {
                    name: "italic",
                    action: SimpleMDE.toggleItalic,
                    className: "fas fa-italic no-icon",
                    title: "Corsivo",
                },
                {
                    name: "strikethrough",
                    action: SimpleMDE.toggleStrikethrough,
                    className: "fas fa-strikethrough no-icon",
                    title: "Barrato",
                },
                {
                    name: "link",
                    action: SimpleMDE.drawLink,
                    className: "fas fa-link no-icon",
                    title: "Link",
                },
                "|",
                {
                    name: "heading-smaller",
                    action: SimpleMDE.toggleHeadingSmaller,
                    className: "fas fa-header no-icon",
                    title: "(Rimpicciolisci) Titolo",
                },
                {
                    name: "heading",
                    action: SimpleMDE.toggleHeadingBigger,
                    className: "fas fa-header fa-lg no-icon",
                    title: "(Ingrandisci) Titolo",
                },
                "|",
                {
                    name: "code",
                    action: SimpleMDE.toggleCodeBlock,
                    className: "fas fa-code no-icon",
                    title: "Codice",
                },
                {
                    name: "quote",
                    action: SimpleMDE.toggleBlockquote,
                    className: "fas fa-quote-left no-icon",
                    title: "Citazione",
                },
                {
                    name: "unordered-list",
                    action: SimpleMDE.toggleUnorderedList,
                    className: "fas fa-list-ul no-icon",
                    title: "Lista puntata",
                },
                {
                    name: "ordered-list",
                    action: SimpleMDE.toggleOrderedList,
                    className: "fas fa-list-ol no-icon",
                    title: "Lista ordinata",
                },
                {
                    name: "horizontal-rule",
                    action: SimpleMDE.drawHorizontalRule,
                    className: "fas fa-minus no-icon",
                    title: "Separatore",
                },
                "|",
                {
                    name: "image",
                    action: SimpleMDE.drawImage,
                    className: "fas fa-picture-o no-icon",
                    title: "Immagine",
                },
                {
                    name: "table",
                    action: SimpleMDE.drawTable,
                    className: "fas fa-table no-icon",
                    title: "Tabella",
                }
	        ],
        });
    </script>
{% endblock %}