{% load i18n %}
{% load static %}
{% load aa_forum %}

<div class="aa-forum-topic-row {% if topic.is_locked %}aa-forum-topic-locked{% endif %} {% if topic.is_sticky %}aa-forum-topic-sticky{% endif %} row">
    <div class="aa-forum-topic p-3">
        <div class="aa-forum-topic-image">
            {% if topic.has_unread_messages %}
                <svg id="aa-forum-unread-in-{{ board.id }}">
                    <use href="#aa-forum-icon-post-new"></use>
                </svg>
            {% else %}
                <svg>
                    <use href="#aa-forum-icon-post"></use>
                </svg>
            {% endif %}
        </div>

        <div class="aa-forum-topic-name">
            <p>
                <a href="{{ topic.get_absolute_url }}">{{ topic.subject }}</a>

                {% if topic.has_unread_messages %}
                    <a
                        id="aa-forum-link-new-{{ topic.id }}"
                        href="{% url 'aa_forum:forum_topic_first_unread_message' topic.board.category.slug topic.board.slug topic.slug %}"
                        class="badge bg-warning label-aa-forum-topic-new-message ms-2"
                    >
                        {% translate "New" %}
                    </a>
                {% endif %}
                <br>
                <span class="small">
                    {% if topic.is_sticky %}
                        <span class="aa-forum-topic-status-icon aa-forum-topic-status-sticky mx-1 my-0">
                            <i class="fa-solid fa-thumbtack" title="{% translate 'Topic is always on top' %}" data-bs-tooltip="aa-forum"></i>
                        </span>
                    {% endif %}

                    {% if topic.is_locked %}
                        <span class="aa-forum-topic-status-icon aa-forum-topic-status-locked mx-1 my-0">
                            <i class="fa-solid fa-lock" title="{% translate 'Topic is locked' %}" data-bs-tooltip="aa-forum"></i>
                        </span>
                    {% endif %}

                    {% translate "Started by" %} {{ topic.first_message.user_created|aa_forum_main_character_name }}
                </span>
            </p>
        </div>

        <div class="aa-forum-topic-stats hidden-sm hidden-xs">
            <span class="small">
                {% if topic.num_posts > 0 %}
                    {% if topic.num_posts == 2 %}
                        1 {% translate "Reply" %}
                    {% else %}
                        {{ topic.num_posts|add:"-1" }} {% translate "Replies" %}
                    {% endif %}
                {% else %}
                    0 {% translate "Replies" %}
                {% endif %}
            </span>
        </div>

        <div class="aa-forum-topic-last-post hidden-xs">
            <span class="small">
                {% translate "Last post" %} {{ topic.last_message.time_posted|aa_forum_time }}

                <a
                    href="{% url 'aa_forum:forum_message' topic.board.category.slug topic.board.slug topic.slug topic.last_message_id %}"
                    title="{% translate 'Go to last message' %}"
                    data-bs-tooltip="aa-forum"
                    class="ms-2"
                >
                    <i class="fa-solid fa-right-to-bracket"></i>
                </a>

                <br>
                by {{ topic.last_message.user_created|aa_forum_main_character_name }}
            </span>
        </div>

        <div class="aa-forum-topic-actions hidden-xs">
            {% if perms.aa_forum.manage_forum %}
                <div class="text-end">
                    {% if topic.is_locked %}
                        <button
                            class="btn btn-aa-forum-topic-moderation btn-sm"
                            title="{% translate 'Unlock/re-open topic' %}"
                            data-bs-tooltip="aa-forum"
                            data-bs-toggle="modal"
                            data-bs-target="#topic-lock-state-change-{{ topic.pk }}"
                        >
                            <i class="fa-solid fa-unlock"></i>
                        </button>
                    {% else %}
                        <button
                            class="btn btn-aa-forum-topic-moderation btn-sm"
                            title="{% translate 'Lock/close topic' %}"
                            data-bs-tooltip="aa-forum"
                            data-bs-toggle="modal"
                            data-bs-target="#topic-lock-state-change-{{ topic.pk }}"
                        >
                            <i class="fa-solid fa-lock"></i>
                        </button>
                    {% endif %}

                    <button
                        class="btn btn-aa-forum-topic-moderation btn-sm"
                        title="{% translate 'Change topics sticky state' %}"
                        data-bs-tooltip="aa-forum"
                        data-bs-toggle="modal"
                        data-bs-target="#topic-sticky-state-change-{{ topic.pk }}"
                    >
                        <i class="fa-solid fa-thumbtack"></i>
                    </button>

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

                {% include "aa_forum/modals/forum/board/topic-change-lock-state.html" %}
                {% include "aa_forum/modals/forum/board/topic-change-sticky-state.html" %}
                {% include "aa_forum/modals/forum/board/topic-delete.html" %}
            {% endif %}
        </div>
    </div>
</div>
