{% extends base_template %}
{% load i18n widget_tweaks %}

{% block content %}
<h1>{% block title %}{% endblock title%}</h1>
<form method="POST"
    class="mb-4"
    id="wiki-page-form"
    action="{% if create %}{% url "tinywiki:page-create" %}{% else %}{% url "tinywiki:page-edit" slug=form.instance.slug|default:"1" %}{% endif %}">
    {% csrf_token %}
    <p>
        {% with title_extra|default:"" as title_class %}
        {{ form.title.label_tag }} {% render_field form.title class="{{ title_class }}" %}
        {% endwith %}
    </p>
    <p>
        
        {{ form.slug.label_tag }}
        {% with slug_extra|default:"" as slug_class%}
        {% if create and slug %}
        {% render_field form.slug class=slug_class value=slug placeholder="slug" %}
        {% else %}
        {% render_field form.slug class=slug_class palceholder="slug" %}
        {% endif %}
        {% endwith %}
    </p>
    <p>
        {% with content_type_extra|default:"" as content_type_class %}
        {{ form.content_type_data.label_tag }} {% render_field form.content_type_data class=content_type_class %}
        {% endwith %}
    </p>
    <p>
        {% with status_extra|default:"" as status_class %}
        {{ form.status_data.label_tag }} {% render_field form.status_data class=status_class %}
        {% endwith %}
    </p>
    <p>
        {% with content_extra|default:"" as content_class %}
        {{ form.content.label_tag }} {% render_field form.content class=content_class cols=80 rows=30 %}
        {% endwith %}
    </p>
    <div class="text-end">
    {% block form_buttons %}{% endblock form_buttons %}
    </div>
</form>
{% endblock content%}

{% block extra_scripts %}
<script>
document.getElementById("id_content").addEventListener('keydown',function(e) {
    if (e.key == "Tab") {
        e.preventDefault();
        var start = this.selectionStart;
        var end = this.selectionEnd;

        console.log(this.value);
        // set textarea value to: text before caret + 4 spaces + text after caret
        this.value = this.value.substring(0,start) + "    " + this.value.substring(end);
        this.selectionStart = this.selectionEnd = start + 4;
    } 
});

document.addEventListener('keydown',function(e) {
if (e.ctrlKey && e.key == "s") {
        e.preventDefault();
        
        var form = document.getElementById('wiki-page-form');
        form.action = form.action + "?save=1";
        form.submit();
    }
});

</script>
{% endblock extra_scripts %}