{% extends 'manage/users/master.twig' %}
{% from 'macros.twig' import pagination, container_title, avatar %}
{% from '_layout/input.twig' import input_hidden, input_csrf, input_text, input_checkbox, input_select %}

{% block manage_content %}
    <div class="container">
        {{ container_title('<i class="fas fa-sticky-note fa-fw"></i> ' ~ (note_new ? ('Adding mod note to ' ~ note_user.username) : ('Editing mod note #' ~ note_info.id))) }}

        <form method="post" enctype="multipart/form-data" action="{{ url('manage-users-note', note_new ? {'user': note_user.id} : {'note': note_info.id}) }}" class="manage__note {{ note_new ? 'manage__note--edit' : 'manage__note--view' }}">
            {{ input_csrf() }}

            <div class="manage__note__header">
                <div class="manage__note__title">
                    <div class="manage__note__title__text manage__note--viewing">{{ note_info.title|default() }}</div>
                    <div class="manage__note--editing">{{ input_text('mn_title', '', note_info.title|default(), 'text', '', true, null, 1) }}</div>
                </div>
                <div class="manage__note__actions">
                    <a href="javascript:;" onclick="this.closest('.manage__note').classList.remove('manage__note--view'); this.closest('.manage__note').classList.add('manage__note--edit');" title="Edit" class="input__button input__button--autosize manage__notes__item__action manage__note--viewing"><i class="fas fa-pen fa-fw"></i></a>
                    <button class="input__button input__button--autosize manage__notes__item__action manage__note--editing" title="{{ note_new ? 'Save Note' : 'Save Changes' }}" tabindex="3"><i class="fas fa-save fa-fw"></i></button>
                    {% if not note_new %}
                        <button class="input__button input__button--autosize input__button--destroy manage__notes__item__action manage__note--editing" type="reset" title="Discard Changes" tabindex="4"><i class="fas fa-slash fa-fw"></i></button>
                        <a href="javascript:;" onclick="this.closest('.manage__note').classList.remove('manage__note--edit'); this.closest('.manage__note').classList.add('manage__note--view');" title="View" class="input__button input__button--autosize manage__notes__item__action manage__note--editing" tabindex="5"><i class="fas fa-eye fa-fw"></i></a>
                    {% endif %}
                </div>
            </div>

            <div class="manage__note__attributes">
                {% if note_author is not null %}
                    <div class="manage__note__attribute manage__notes__item__author" style="--user-colour: {{ note_author.colour }}">
                        <div class="manage__note__author__prefix">Created by</div>
                        <div class="manage__note__author__avatar">
                            <a href="{{ url('user-profile', {'user': note_author.id}) }}">{{ avatar(note_author.id, 20, note_author.username) }}</a>
                        </div>
                        <div class="manage__note__author__name">
                            <a href="{{ url('user-profile', {'user': note_author.id}) }}">{{ note_author.username }}</a>
                        </div>
                    </div>
                {% endif %}
                {% if not note_new %}
                    <div class="manage__note__attribute manage__note__created">
                        <div class="manage__note__created__icon"><i class="fas fa-clock"></i></div>
                        <div class="manage__note__created__time">
                            <time datetime="{{ note_info.createdTime|date('c') }}" title="{{ note_info.createdTime|date('r') }}">{{ note_info.createdTime|time_format }}</time>
                        </div>
                    </div>
                {% endif %}
                <div class="manage__note__attribute manage__note__user" style="--user-colour: {{ note_user.colour }}">
                    <div class="manage__note__user__prefix">Regarding</div>
                    <div class="manage__note__user__avatar">
                        <a href="{{ url('manage-user', {'user': note_user.id}) }}">{{ avatar(note_user.id, 20, note_user.username) }}</a>
                    </div>
                    <div class="manage__note__user__name">
                        <a href="{{ url('manage-user', {'user': note_user.id}) }}">{{ note_user.username }}</a>
                    </div>
                </div>
            </div>

            {% if not note_new and note_info.hasBody %}
                <div class="manage__note__body markdown manage__note--viewing">
                    {{ note_info.body|parse_text(2)|raw }}
                </div>
            {% else %}
                <div class="manage__note__nobody manage__note--viewing">
                    This note has no additional content.
                </div>
            {% endif %}

            <div class="manage__note__editor manage__note--editing">
                <textarea name="mn_body" class="input__textarea" tabindex="2">{{ note_info.body|default() }}</textarea>
            </div>
        </form>
    </div>
{% endblock %}