{% extends "layout-semantic2.html.twig" %}
{% block csslocal %}
    <link rel="stylesheet" href="/css/simplemde.min.css">
{% endblock %}
{% block header %}
    <div class="ui top attached tabular menu">
        <a class="active item" href="/wiki/{{ term.Slug }}?action=talk">Article</a>
        <a class="item" href="/wiki/{{ term.Slug }}?action=talk">Talk</a>
        <div class="right menu">
            <a class="item" href="/wiki/{{ term.Slug }}">Read</a>
            <a class="active item" href="/wiki/{{ term.Slug }}?action=edit">Edit</a>
            <a class="item" href="/wiki/{{ term.Slug }}?action=revisions">View History</a>
            <div class="item">
                <div class="ui transparent icon input">
                    <input placeholder="Search wiki" type="text">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block middle %}
    <div class="ui bottom attached segment">
        <textarea id="text">{{ revision.Text }}</textarea>
    </div>
    <div class="ui segment">
        <button class="ui primary basic button" onclick="saveChanges()">Save changes</button>
    </div>
{% endblock %}
{% block jslocal %}
    <script src="/js/simplemde/simplemde.min.js"></script>
    <script>
        var simplemde;
        simplemde = new SimpleMDE({
            hideIcons: ['guide', 'side-by-side', 'link', 'image', 'horizontal-rule'],
            showIcons: ['bold', 'italic', 'heading', 'heading-smaller', 'heading-bigger',
                'heading-1', 'heading-2', 'heading-3', 'code', 'quote', 'unordered-list', 'ordered-list',
                'clean-block', 'table', 'preview'],
            spellChecker: false
        });

        function saveChanges() {
            var payload = {
                action: "edit",
                termID: '{{ term.ID.Hex }}',
                text: simplemde.value()
            };

            var xhr = $.post('/wiki/{{ term.Slug }}', payload);
            xhr.done(function () {
                window.location.href= '/wiki/{{ term.Slug }}';
            })
        }
    </script>
{% endblock %}