{% extends 'messages/master.twig' %}
{% from 'macros.twig' import avatar, container_title %}
{% from '_layout/input.twig' import input_hidden, input_text, input_select %}

{% set title = 'Composing message' %}
{% set canonical_url = url('messages-compose') %}

{% block messages_content %}
    <div class="messages-columns js-messages-compose">
        <div class="messages-columns-sidebar">
            <div class="messages-sidebar">
                <div class="messages-sidebar-button">
                    <a class="input__button" href="{{ url('messages-index') }}">Return</a>
                </div>

                <div class="container messages-sidebar-section">
                    {{ container_title('<i class="fas fa-address-card fa-fw"></i> Recipient') }}

                    <div class="messages-recipient js-messages-recipient" data-msg-lookup="{{ url('messages-recipient') }}">
                        <div class="messages-recipient-avatar js-messages-recipient-avatar">
                            {{ avatar(0, 100) }}
                        </div>
                        <div class="messages-recipient-name">
                            {{ input_text('name', 'messages-recipient-name-input js-messages-recipient-name', recipient, 'text', 'Recipient name') }}
                        </div>
                    </div>
                </div>

                <div class="warning">
                    <div class="warning__content">
                        <p>UI is VERY not final. It will be not awful before 2025 I promise for real this time!!!</p>
                        <p>I need to clean up a lot of code first because a lot of things are specifically written for the forum editor and it will become a big mess otherwise.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="messages-columns-content">
            <div class="container messages-reply messages-reply-compose js-messages-reply">
                {{ container_title('<i class="fas fa-pencil-alt"></i> Writing a message') }}

                <form class="messages-reply-form js-messages-reply-form">
                    {{ input_hidden('recipient', '') }}
                    <div class="warning js-reply-form-warning" hidden>
                        <div class="warning__content">
                            <p class="js-reply-form-warning-text"></p>
                        </div>
                    </div>
                    <div class="messages-reply-subject">
                        {{ input_text('title', 'messages-reply-subject-input', '', 'text', 'Subject', true) }}
                    </div>
                    <div class="messages-reply-body">
                        <textarea name="body" placeholder="Write your reply here...&#10;Press Ctrl+Enter to send your reply&#10;Press Ctrl+Shift+Enter to save a draft" class="input__textarea messages-reply-body-input js-messages-reply-body"></textarea>
                    </div>
                    <div class="messages-reply-actions js-messages-reply-actions" hidden></div>
                    <div class="messages-reply-options">
                        <div class="messages-reply-settings">
                            {{ input_select('parser', constant('\\Misuzu\\Parsers\\Parser::NAMES'), '1', null, null, null, 'js-messages-reply-parser') }}
                        </div>
                        <div class="messages-reply-buttons">
                            <button class="input__button js-messages-reply-save" name="draft" value="1">Save draft</button>
                            <button class="input__button js-messages-reply-send" name="draft" value="0">Reply</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}