{% extends 'forum/master.twig' %}
{% from 'macros.twig' import avatar %}
{% from 'forum/macros.twig' import forum_header %}
{% from '_layout/input.twig' import input_hidden, input_csrf, input_text, input_button, input_select, input_checkbox %}

{% set title = 'Posting' %}
{% set is_reply = posting_topic is defined %}
{% set is_opening = not is_reply or posting_post.is_opening_post|default(false) %}

{% block content %}
    <form method="post" action="{{ url('forum-' ~ (is_reply ? 'post' : 'topic') ~ '-create') }}" class="js-forum-posting">
        {{ input_hidden('post[' ~ (is_reply ? 'topic' : 'forum') ~ ']', is_reply ? posting_topic.topic_id : posting_forum.forum_id) }}
        {{ input_hidden('post[mode]', posting_mode) }}
        {{ input_csrf() }}
        {{ forum_header(
            is_reply and not is_opening
                ? posting_topic.topic_title
                : input_text(
                    'post[title]',
                    'forum__header__input',
                    posting_defaults.title|default(posting_topic.topic_title|default('')),
                    'text',
                    'Enter your title here...'
                ),
            posting_breadcrumbs,
            false,
            is_reply and not is_opening
                ? url('forum-topic', {'topic': posting_topic.topic_id})
                : ''
        ) }}

        {% if posting_post is defined %}
            {{ input_hidden('post[id]', posting_post.post_id) }}
        {% endif %}

        {% if posting_notices|length > 0 %}
            <div class="warning">
                <div class="warning__content">
                    {% for notice in posting_notices %}
                        <p>{{ notice }}</p>
                    {% endfor %}
                </div>
            </div>
        {% endif %}

        <div class="container forum__post" style="{{ posting_post.poster_colour|default(posting_info.colour)|html_colour('--accent-colour') }}">
            <div class="forum__post__info">
                <div class="forum__post__info__background"></div>
                <div class="forum__post__info__content">
                    <span class="forum__post__avatar">{{ avatar(posting_post.poster_id|default(posting_info.user_id), 120, posting_post.poster_name|default(posting_info.username)) }}</span>

                    <span class="forum__post__username">{{ posting_post.poster_name|default(posting_info.username) }}</span>

                    <div class="forum__post__icons">
                        <div class="flag flag--{{ posting_post.poster_country|default(posting_info.user_country)|lower }}" title="{{ posting_post.poster_country|default(posting_info.user_country)|country_name }}"></div>
                        <div class="forum__post__posts-count">{{ posting_post.poster_post_count|default(posting_info.user_forum_posts)|number_format }} posts</div>
                    </div>

                    <div class="forum__post__joined">
                        joined <time datetime="{{ posting_post.poster_joined|default(posting_info.user_created)|date('c') }}" title="{{ posting_post.poster_joined|default(posting_info.user_created)|date('r') }}">{{ posting_post.poster_joined|default(posting_info.user_created)|time_format }}</time>
                    </div>
                </div>
            </div>

            <div class="forum__post__content">
                <div class="forum__post__details">
                    <span class="forum__post__mode js-forum-posting-mode">
                        {% if posting_post is defined %}
                            Editing
                        {% elseif is_reply %}
                            Replying
                        {% else %}
                            Creating
                        {% endif %}
                    </span>
                </div>

                <textarea name="post[text]" class="forum__post__text forum__post__text--edit js-forum-posting-text js-ctrl-enter-submit" placeholder="Type your post content here...">{{ posting_defaults.text|default(posting_post.post_text|default('')) }}</textarea>
                <div class="forum__post__text js-forum-posting-preview" hidden></div>

                <div class="forum__post__actions forum__post__actions--bbcode" hidden>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--bb-bold" title="Bold [b]<text>[/b]" data-tag-open="[b]" data-tag-close="[/b]">
                        <i class="fas fa-bold fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--bb-italic" title="Italic [i]<text>[/i]" data-tag-open="[i]" data-tag-close="[/i]">
                        <i class="fas fa-italic fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--bb-underline" title="Underline [u]<text>[/u]" data-tag-open="[u]" data-tag-close="[/u]">
                        <i class="fas fa-underline fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--bb-strike" title="Strikethrough [s]<text>[/s]" data-tag-open="[s]" data-tag-close="[/s]">
                        <i class="fas fa-strikethrough fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--bb-link" title="Link [url]<url>[/url] or [url=<url>]<text>[/url]" data-tag-open="[url=]" data-tag-close="[/url]">
                        <i class="fas fa-link fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--bb-image" title="Image [img]<url>[/img]" data-tag-open="[img]" data-tag-close="[/img]">
                        <i class="fas fa-image fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--bb-audio" title="Audio [audio]<url>[/url]" data-tag-open="[audio]" data-tag-close="[/audio]">
                        <i class="fas fa-music fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--bb-video" title="Video [video]<url>[/video]" data-tag-open="[video]" data-tag-close="[/video]">
                        <i class="fas fa-video fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--bb-code" title="Code [code]<code>[/code]" data-tag-open="[code]" data-tag-close="[/code]">
                        <i class="fas fa-code fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--bb-zalgo" title="Zalgo [zalgo]<text>[/zalgo]" data-tag-open="[zalgo]" data-tag-close="[/zalgo]">
                        <i class="fas fa-frog fa-fw"></i>
                    </div>
                </div>

                <div class="forum__post__actions forum__post__actions--markdown" hidden>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--md-bold" title="Bold **<text>**" data-tag-open="**" data-tag-close="**">
                        <i class="fas fa-bold fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--md-italic" title="Italic *<text>* or _<text>_" data-tag-open="*" data-tag-close="*">
                        <i class="fas fa-italic fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--md-underline" title="Underline __<text>__" data-tag-open="__" data-tag-close="__">
                        <i class="fas fa-underline fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--md-strike" title="Strikethrough ~~<text>~~" data-tag-open="~~" data-tag-close="~~">
                        <i class="fas fa-strikethrough fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--md-link" title="Link [<text>](<url>)" data-tag-open="[](" data-tag-close=")">
                        <i class="fas fa-link fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--md-image" title="Image ![<alt text>](<url>)" data-tag-open="![](" data-tag-close=")">
                        <i class="fas fa-image fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--md-audio" title="Audio ![<alt text>](<url>)" data-tag-open="![](" data-tag-close=")">
                        <i class="fas fa-music fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--md-video" title="Video ![<alt text>](<url>)" data-tag-open="![](" data-tag-close=")">
                        <i class="fas fa-video fa-fw"></i>
                    </div>
                    <div class="forum__post__action forum__post__action--tag forum__post__action--md-code" title="Code `<code>` or ```<code>```" data-tag-open="```" data-tag-close="```">
                        <i class="fas fa-code fa-fw"></i>
                    </div>
                </div>

                <div class="forum__post__options">
                    <div class="forum__post__settings">
                        {{ input_select(
                            'post[parser]',
                            constant('\\Misuzu\\Parsers\\Parser::NAMES'),
                            posting_defaults.parser|default(posting_post.post_parse|default(posting_info.user_post_parse|default(constant('\\Misuzu\\Parsers\\Parser::BBCODE')))),
                            null, null, false, 'forum__post__dropdown js-forum-posting-parser'
                        ) }}
                        {% if is_opening and posting_types|length > 1 %}
                            {{ input_select(
                                'post[type]',
                                posting_types,
                                posting_defaults.type|default(posting_topic.topic_type|default(posting_types|keys|first)),
                                null, null, null, 'forum__post__dropdown'
                            ) }}
                        {% endif %}
                        {{ input_checkbox(
                            'post[signature]',
                            'Display Signature',
                            posting_defaults.signature is not null
                                ? posting_defaults.signature : (
                                    posting_post.post_display_signature is defined
                                        ? posting_post.post_display_signature
                                        : true
                                )
                        ) }}
                    </div>

                    <div class="forum__post__buttons js-forum-posting-buttons">
                        <button class="input__button" onclick="forumPostingCloseOK = true;">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    {% if globals.eeprom.path is not empty %}
        <script type="text/javascript">
            const peepPath = '{{ globals.eeprom.path }}', peepApp = '{{ globals.eeprom.app }}';
        </script>
    {% endif %}
{% endblock %}