{% extends "aa_forum/base.html" %}

{% load aa_forum_versioned_static %}
{% load static %}
{% load i18n %}

{% block page_title %}{{ topic.subject }} » {% translate "Forum" %}{% endblock %}

{% block aa_forum_header %}
    <br>

    {% include "aa_forum/partials/menu.html" %}
    {% include "aa_forum/partials/breadcrumb.html" with category=topic.board.category board=topic.board topic=topic %}
{% endblock %}

{% block aa_forum_body %}
    <div class="panel panel-default">
        <div class="panel-heading">
            <div class="panel-title clearfix">
                {{ topic.subject }}

                {% if can_modify_subject %}
                    <a
                        id="aa-forum-btn-modify-message-{{ message.pk }}"
                        href="{% url 'aa_forum:forum_topic_modify' topic.board.category.slug topic.board.slug topic.slug %}"
                        class="btn btn-aa-forum-topic-moderation btn-xs pull-right"
                        title="{% translate 'Modify Topic Subject' %}"
                    >
                        <i class="fas fa-pencil-alt"></i>
                    </a>

                {% endif %}
            </div>
        </div>
    </div>

    {% include "aa_forum/partials/forum/topic/pagination.html" %}

    {% for message in page_obj %}
        {% include "aa_forum/partials/forum/topic/message.html" %}
    {% endfor %}

    {% include "aa_forum/partials/forum/topic/pagination.html" %}

    {% if not topic.is_locked %}
        {% include "aa_forum/partials/forum/topic/reply.html" %}
    {% elif topic.is_locked and perms.aa_forum.manage_forum %}
        {% include "aa_forum/partials/forum/topic/reply.html" %}
    {% endif %}
{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" type="text/css" href="{% aa_forum_static 'aa_forum/css/aa-bootstrap-fix.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% aa_forum_static 'aa_forum/css/aa-forum.min.css' %}">
{% endblock %}

{% block extra_javascript %}
    <script type="application/javascript" src="{% static 'ckeditor/ckeditor-init.js' %}"></script>
    <script type="application/javascript" src="{% static 'ckeditor/ckeditor/ckeditor.js' %}"></script>
    <script type="application/javascript" src="{% aa_forum_static 'aa_forum/javascript/aa-forum-ckeditor.min.js' %}"></script>

    {% include 'bundles/clipboard-js.html' %}

    <script type="application/javascript">
        $(document).ready(function () {
            let clipboard = new ClipboardJS('.btn-aa-forum-copy-to-clipboard');

            clipboard.on('success', function (e) {
                e.clearSelection();
            });

            clipboard.on('error', function (e) {
                console.error('Action:', e.action);
                console.error('Trigger:', e.trigger);
            });
        });
    </script>
{% endblock %}
