{% extends 'base.html.twig' %}

{% block title %}Note {% if note %}{{ note.getTitle }}{% endif %}{% endblock %}

{% block stylesheets %}
    {{ parent() }}

    <link rel="stylesheet" href="{{ asset('resources/vendors/trumbowyg/ui/trumbowyg.min.css') }}">
    <link rel="stylesheet" href="{{ asset('resources/js/trumbowyg-plugins/colors/ui/trumbowyg.min.css') }}">

    <style>
        .messages {
            height: 80%;
        }
    </style>
{% endblock %}

{% block content %}

    {% if note %}

    <header class="content__title">
        <h1>Note - {{ note.getTitle }}<small>Save your note-entry</small></h1>
    </header>

    <form action="{{ path('note_entry_add') }}" method="post" id="noteForm" enctype="multipart/form-data">
        <div class="messages">
            <div class="messages__sidebar">
                <div class="toolbar toolbar--inner">
                    <div class="toolbar__label">History</div>
                </div>

                <div class="listview listview--hover">
                    <div class="scrollbar">

                        {% for entry in noteEntries %}

                            <a class="listview__item" data-content="{{ entry.getContent }}">
                                <div class="listview__content">
                                    <div class="listview__heading">{{ entry.getUser.getName }}</div>
                                    <p>{{ entry.getDateCreated|date('d.m.Y H:i') }}</p>
                                </div>
                            </a>

                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="messages__body">
                <div class="messages__header">
                    <div class="toolbar toolbar--inner mb-0">
                        <div class="toolbar__label">Content</div>
                    </div>
                </div>

                <input type="hidden" id="noteId" name="id" value="{{ note.getId }}">
                <input type="hidden" id="noteContent" name="content" value="{% if noteEntries is not empty %}{{ (noteEntries|first).getContent }}{% endif %}">

                <div class="messages__content">
                    <div id="wysiwyg-editor"></div>
                </div>

                <div class="messages__reply">
                    <button type="submit" id="noteSubmit" class="btn btn-block btn-theme">Save</button>
                </div>
            </div>

        </div>
    </form>

    <div class="d-block d-md-block d-lg-none" style="margin-top: 20px;">
        <div class="card">
            <div class="toolbar toolbar--inner">
                <div class="toolbar__label">History</div>
            </div>

            {% for entry in noteEntries %}
            <div class="listview listview--bordered">
                <div class="listview__item" data-content="{{ entry.getContent }}" style="cursor: pointer;">
                    <div class="checkbox-char todo__item">
                        <div class="listview__content">
                            <div class="listview__heading">{{ entry.getUser.getName }}</div>
                            <p>{{ entry.getDateCreated|date('d.m.Y H:i') }}</p>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>

    {% else %}

    {% endif %}

    {#% include 'footer.html.twig' %#}
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    <script src="{{ asset('resources/vendors/trumbowyg/trumbowyg.min.js') }}"></script>
    <script src="{{ asset('resources/js/trumbowyg-plugins/fontsize/trumbowyg.fontsize.js') }}"></script>
    <script src="{{ asset('resources/js/trumbowyg-plugins/fontfamily/trumbowyg.fontfamily.js') }}"></script>
    <script src="{{ asset('resources/js/trumbowyg-plugins/colors/trumbowyg.colors.js') }}"></script>
    <script src="{{ asset('resources/js/trumbowyg-plugins/lineheight/trumbowyg.lineheight.js') }}"></script>

    <script>
        $('#noteForm').submit(function(){
            var json = JSON.stringify($('#wysiwyg-editor').trumbowyg('html'));
            $('#noteContent').val(json);

            return true;
        });

        var editorConfig = {
            btns: [
                ['viewHTML'],
                ['undo', 'redo'], // Only supported in Blink browsers
                ['formatting'],
                ['fontsize'],
                ['fontfamily'],
                ['foreColor', 'backColor'],
                ['lineheight'],
                ['strong', 'em', 'del'],
                ['superscript', 'subscript'],
                ['link'],
                ['insertImage'],
                ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
                ['unorderedList', 'orderedList'],
                ['horizontalRule'],
                ['removeformat'],
                ['fullscreen']
            ]
        };

        $('#wysiwyg-editor').trumbowyg(editorConfig);
        $('#wysiwyg-editor').trumbowyg('html', jQuery.parseJSON(
            $('#noteContent').val()
        ));

        $('.listview__item').click(function(){
            var data = $(this).data('content');
            $('#noteContent').val(data);
            $('#wysiwyg-editor').trumbowyg('html', jQuery.parseJSON(data));
        });
    </script>
{% endblock %}