{% load aa_forum evelinks i18n %}

<div class="col-md-9 mb-3">
    <div class="card card-default mb-3 card-aa-forum-personal-messages-list">
        <div class="card-header">
            <div class="card-title mb-0">
                {% translate "Inbox" %}
            </div>
        </div>

        <div class="card-body">
            {% if page_obj %}
                <div class="card-aa-forum-personal-messages-item-header hidden-xs hidden-sm">
                    <div class="aa-forum-personal-message-date">
                        {% translate "Date" %}
                    </div>

                    <div class="aa-forum-personal-message-sender">
                        {% translate "Sender" %}
                    </div>

                    <div class="aa-forum-personal-message-subject">
                        {% translate "Subject" %}
                    </div>
                </div>

                {% for message in page_obj %}
                    <div id="aa-forum-personal-message-id-{{ message.pk }}">
                        <div class="card-aa-forum-personal-messages-item {% if not message.is_read %}card-aa-forum-personal-messages-item-unread{% endif %}">
                            <div class="aa-forum-personal-message-date">
                                {{ message.time_sent|aa_forum_time }}
                            </div>

                            <div class="aa-forum-personal-message-sender">
                                {% with sender_maincharacter_id=message.sender|aa_forum_main_character_id %}
                                    <img
                                        class="aa-forum-character-portrait img rounded img-last-post-avatar"
                                        src="{{ sender_maincharacter_id|character_portrait_url:32 }}"
                                        alt="{{ message.sender|aa_forum_main_character_name }}"
                                        width="32"
                                        height="32"
                                        loading="lazy"
                                    >
                                {% endwith %}

                                {{ message.sender|aa_forum_main_character_name }}
                            </div>

                            <div class="aa-forum-personal-message-subject">
                                {{ message.subject }}

    {# {% if not message.is_read %} #}
    {# <span class="badge text-bg-warning label label-new-message label-aa-forum-topic-new-message ms-2"> #}
    {# {% translate "New" %} #}
    {# </span> #}
    {# {% endif %} #}

                                <span class="float-end">
                                    <button
                                        class="btn btn-aa-forum-topic-moderation btn-sm btn-read-personal-message"
                                        title="{% translate 'Read message' %}"
                                        data-bs-tooltip="aa-forum"
                                        data-sender="{{ message.sender.pk }}"
                                        data-recipient="{{ message.recipient.pk }}"
                                        data-message="{{ message.pk }}"
                                        data-message-folder="inbox"
                                    >
                                        <i class="fa-solid fa-envelope-open"></i>
                                    </button>

                                    <button
                                        class="btn btn-aa-forum-topic-moderation btn-sm btn-aa-forum-delete"
                                        title="{% translate 'Delete message' %}"
                                        data-bs-tooltip="aa-forum"
                                        data-bs-toggle="modal"
                                        data-bs-target="#delete-message-{{ message.pk }}"
                                    >
                                        <i class="fa-regular fa-trash-can"></i>
                                    </button>
                                </span>
                            </div>

                            {% include "aa_forum/modals/personal-messages/message-delete.html" with message_folder='inbox' %}
                        </div>

                        <div class="d-none mb-3 card-aa-forum-personal-messages-message"></div>
                    </div>
                {% endfor %}
            {% else %}
                <div class="alert alert-info">
                    <p>{% translate "No personal messages" %}</p>
                </div>
            {% endif %}
        </div>
    </div>

    {% include "aa_forum/partials/personal-messages/inbox/pagination.html" %}
</div>

<script>
    const aaForumJsSettingsOverride = {
        form: {
            csrfToken: '{{ csrf_token }}',
        },
        url: {
            readMessage: '{% url "aa_forum:personal_messages_ajax_read_message" "inbox" %}',
            unreadMessagesCount: '{% url "aa_forum:personal_messages_ajax_unread_messages_count" %}'
        }
    }
</script>