{% extends "spirit/_base.html" %}

{% load spirit_tags i18n %}

{% block title %}{{ topic.title }}{% endblock %}

{% block content %}
  <div class="layout__article">
    {% spaceless %}
      <ul class="breadcrumb_nav">
        <li><a href="{% url "spirit:index" %}"
        >{% trans "Main" %}</a><i class="fa fa-chevron-right"></i></li>
        {% if topic.category.parent_id %}
          <li><a href="{{ topic.category.parent.get_absolute_url }}"
          >{{ topic.category.parent.title }}</a
          ><i class="fa fa-chevron-right"></i></li>
        {% endif %}
        <li><a href="{{ topic.category.get_absolute_url }}"
        >{{ topic.category.title }}</a></li>
      </ul>
    {% endspaceless %}

    <h1 class="headline">
      {% if topic.is_pinned or topic.is_globally_pinned %}
        <i class="fa fa-thumb-tack"></i>
      {% endif %}
      {% if topic.is_closed %}
        <i class="fa fa-lock"></i>
      {% endif %}

      {{ topic.title }}

      {% if user.st.is_moderator %}
        <a class="topic_edit_link"
           href="{% url "spirit:topic:update" topic.pk %}"
        ><i class="fa fa-pencil"></i> {% trans "edit" %}</a>
        {% elif user.pk == topic.user.pk and not topic.is_closed %}
        <a class="topic_edit_link"
           href="{% url "spirit:topic:update" topic.pk %}"
        ><i class="fa fa-pencil"></i> {% trans "edit" %}</a>
      {% endif %}
    </h1>
    {% if user.st.is_moderator %}
    <div class="layout__menu">
      <div class="menu__dropdown js-tabs-container">
        <div class="menu__dropdown_button">
          <a class="dropdown_button js-tab" href="#" data-related=".js-mod-content"
          >{% trans "Moderate" %} <i class="fa fa-chevron-down"></i></a>
        </div>
        <div class="menu_list_wrapper js-tab-content js-mod-content" style="display: none;">
          {% spaceless %}
          <ul class="menu_list">
            <li><a class="menu_list__link js-show-move-comments" href="#"
            ><i class="fa fa-comments"></i> {% trans "Select comments to move" %}</a></li>
            {% if topic.is_removed %}
              <li><a class="menu_list__link js-post" href="{% url "spirit:topic:moderate:undelete" topic.pk %}"
              ><i class="fa fa-trash-o"></i> {% trans "Undelete topic" %}</a></li>
            {% else %}
              <li><a class="menu_list__link js-post" href="{% url "spirit:topic:moderate:delete" topic.pk %}"
              ><i class="fa fa-trash-o"></i> {% trans "Delete topic" %}</a></li>
            {% endif %}
            {% if topic.is_closed %}
              <li><a class="menu_list__link js-post" href="{% url "spirit:topic:moderate:unlock" topic.pk %}"
              ><i class="fa fa-unlock"></i> {% trans "Open topic" %}</a></li>
            {% else %}
              <li><a class="menu_list__link js-post" href="{% url "spirit:topic:moderate:lock" topic.pk %}"
              ><i class="fa fa-lock"></i> {% trans "Close topic" %}</a></li>
            {% endif %}
            {% if topic.is_pinned %}
              <li><a class="menu_list__link js-post" href="{% url "spirit:topic:moderate:unpin" topic.pk %}"
              ><i class="fa fa-thumb-tack"></i> {% trans "Unpin topic" %}</a></li>
            {% else %}
              <li><a class="menu_list__link js-post" href="{% url "spirit:topic:moderate:pin" topic.pk %}"
              ><i class="fa fa-thumb-tack"></i> {% trans "Pin topic" %}</a></li>
            {% endif %}
            {% if topic.is_globally_pinned %}
              <li><a class="menu_list__link js-post" href="{% url "spirit:topic:moderate:global-unpin" topic.pk %}"
              ><i class="fa fa-thumb-tack"></i> {% trans "Unpin topic globally" %}</a></li>
            {% else %}
              <li><a class="menu_list__link js-post" href="{% url "spirit:topic:moderate:global-pin" topic.pk %}"
              ><i class="fa fa-thumb-tack"></i> {% trans "Pin topic globally" %}</a></li>
            {% endif %}
          </ul>
          {% endspaceless %}
        </div>
      </div>
    </div>
    {% endif %}

    {% include "spirit/comment/_render_list.html" %}

    <div class="comments__footer_menu">
      <div class="comments__footer_menu__paginator">
        {% render_paginator page=comments %}
      </div>
      <div class="comments__footer_menu__notify">
        {% if user.is_authenticated %}
          {% render_notification_form user=user topic=topic %}
        {% elif not topic.is_closed %}
          <a
            class="button"
            href="{% url "spirit:comment:publish" topic_id=topic.pk %}"
          >{% trans "Reply" %}</a>
        {% endif %}
      </div>
    </div>

    {% if user.st.is_moderator %}
      <div class="comments__move js-move-comments-form" style="display:none;">
        <div class="field">
          <label for="id_move_comments_topic">{% trans "Move selected comments to" %}:</label>
          <input id="id_move_comments_topic" name="topic" type="text" value="" placeholder="Topic ID" />
        </div>
        <input
          class="button js-move-comments-button"
          type="submit"
          value="{% trans "Move" %}">
      </div>
    {% endif %}

    {% if user.is_authenticated %}
      {% if not topic.is_closed %}
        <div id="reply" class="comments__reply">
          <div class="comments__reply__img">
            <img
              alt=""
              class="comment__img__avatar"
              src="{% get_gravatar_url user=user size=50 %}" />
          </div>
          <div class="comment__reply__info">
            <a
              class="comment__reply__info__link"
              href="{{ user.st.get_absolute_url }}"
            >{{ user.st.nickname }}</a>
            <div class="comment__reply__info__realname">
              {{ user.get_full_name }}
            </div>
          </div>
          <div class="comment__reply__text">
            {% render_comments_form topic=topic %}
          </div>
        </div>
      {% endif %}

      <script>
        document.addEventListener('DOMContentLoaded', function() {

          stModules.bookmark(document.querySelectorAll('.js-comment'), {
            csrfToken: "{{ csrf_token }}",
            target: "{% url "spirit:comment:bookmark:create" topic.pk %}"
          });

          {% if user.st.is_moderator %}
            stModules.moveComments(document.querySelectorAll('.js-show-move-comments'), {
              csrfToken: "{{ csrf_token }}",
              target: "{% url "spirit:comment:move" topic.pk %}"
            } );
          {% endif %}

        });
      </script>
    {% endif %}

  </div>
{% endblock %}
