{% extends 'messages/master.twig' %}
{% from 'macros.twig' import container_title, pagination %}

{% set title = folder_name == 'inbox' ? 'Messages' : ('%s :: Messages'|format(folder_meta[folder_name].title)) %}
{% set canonical_url = url('messages-index') %}

{% block messages_content %}
    <div class="messages-columns">
        <div class="messages-columns-sidebar">
            <div class="messages-sidebar">
                {% if can_send_messages %}
                    <div class="messages-sidebar-button">
                        <a class="input__button" href="{{ url('messages-compose') }}">New Message</a>
                    </div>
                {% endif %}

                <div class="container messages-sidebar-section messages-actions">
                    {{ container_title('<i class="fas fa-folder fa-fw"></i> Folders') }}

                    {% for name, meta in folder_meta %}
                        <a class="{{ html_classes('messages-actions-item', {'messages-actions-item-current': folder_name == name}) }}" href="{{ url('messages-index', {folder: name == 'inbox' ? '' : name}) }}">
                            <div class="messages-actions-item-icon"><i class="{{ meta.icon }}"></i></div>
                            <div class="messages-actions-item-label">{{ meta.title }}</div>
                        </a>
                    {% endfor %}
                </div>

                <div class="container messages-sidebar-section messages-actions">
                    {{ container_title('<i class="fas fa-comments fa-fw"></i> Actions') }}

                    <button class="messages-actions-item js-messages-actions-select-all" data-state="inactive" data-inactive-str="Select all" data-inactive-ico="far fa-check-square fa-fw" data-active-str="Unselect all" data-active-ico="far fa-square fa-fw">
                        <div class="messages-actions-item-icon js-messages-button-icon"><i></i></div>
                        <div class="messages-actions-item-label js-messages-button-label"></div>
                    </button>
                    {% if folder_name == 'inbox' %}
                        <button class="messages-actions-item js-messages-actions-mark-read" data-state="inactive" data-inactive-str="Mark as read" data-inactive-ico="fas fa-envelope-open fa-fw" data-active-str="Mark as unread" data-active-ico="fas fa-envelope">
                            <div class="messages-actions-item-icon js-messages-button-icon"><i></i></div>
                            <div class="messages-actions-item-label js-messages-button-label"></div>
                        </button>
                    {% endif %}
                    <button class="messages-actions-item js-messages-actions-move-trash" data-state="{{ folder_name == 'trash' ? 'active' : 'inactive' }}" data-inactive-str="Move to Trash" data-inactive-ico="fas fa-trash-alt fa-fw" data-active-str="Restore item" data-active-ico="fas fa-trash-restore-alt">
                        <div class="messages-actions-item-icon js-messages-button-icon"><i></i></div>
                        <div class="messages-actions-item-label js-messages-button-label"></div>
                    </button>
                    {% if folder_name == 'trash' %}
                        <button class="messages-actions-item js-messages-actions-nuke">
                            <div class="messages-actions-item-icon"><i class="fas fa-radiation-alt"></i></div>
                            <div class="messages-actions-item-label">Permanently delete</div>
                        </button>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="messages-columns-content">
            <div class="container">
                {{ container_title('<i class="%s"></i> %s'|format(folder_meta[folder_name].icon, folder_meta[folder_name].title)) }}

                <div class="messages-folder js-messages-list">
                    <div class="messages-folder-notice js-messages-folder-empty"{% if folder_messages is not empty %} hidden{% endif %}>
                        <div class="messages-folder-notice-icon"><i class="fas fa-tenge fa-fw fa-4x"></i></div>
                        <div class="messages-folder-notice-text">There are no messages to display.</div>
                    </div>
                    {% if folder_messages is not empty %}
                        {% for message in folder_messages %}
                            {% set user_info = (folder_name == 'drafts' or folder_name == 'sent' ? message.recipient_info : message.author_info) %}
                            {% set user_colour = (folder_name == 'drafts' or folder_name == 'sent' ? message.recipient_colour : message.author_colour) %}
                            <div class="messages-folder-item messages-entry js-messages-entry" tabindex="0" data-msg-id="{{ message.info.id }}" data-msg-url="{{ url('messages-view', {message: message.info.id}) }}" data-msg-sent="{{ message.info.isSent ? 'sent' : 'draft' }}" data-msg-read="{{ message.info.isRead ? 'read' : 'unread' }}" style="--user-colour: {{ user_colour }};">
                                <div class="messages-entry-header">
                                    <div class="messages-entry-check"><input type="checkbox" class="js-entry-checkbox"></div>
                                    <div class="messages-entry-unread js-messages-entry-unread"{% if not message.info.isSent or message.info.isRead %} hidden{% endif %}><div class="messages-entry-unread-orb"></div></div>
                                    <div class="messages-entry-author"><div class="messages-entry-overflow">{{ user_info.name|default('Deleted User') }}</div></div>
                                    <div class="messages-entry-spacing"></div>
                                    <div class="messages-entry-datetime"><time datetime="{{ message.info.displayTime|date('c') }}" title="{{ message.info.displayTime|date('r') }}">{{ message.info.displayTime|time_format }}</time></div>
                                </div>
                                <div class="messages-entry-subject">
                                    <div class="messages-entry-overflow">{{ message.info.title }}</div>
                                </div>
                                <div class="messages-entry-preview">
                                    <div class="messages-entry-overflow">{{ message.info.body }}</div>
                                </div>
                            </div>
                        {% endfor %}
                    {% endif %}
                    {{ pagination(folder_pagination, 'messages-index', {folder: (folder_name == 'index' ? '' : folder_name)}) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}