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

{% load spirit_tags i18n %}

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

{% block content %}

  <ul class="nav">
    <li><a href="{% url "spirit:topic:private:index" %}">{% trans "Private topics" %}</a></li>
  </ul>

  <h1 class="headline">{{ topic.title }}</h1>

  <div class="container">
    <div class="private-participants js-tabs-container">
      <a class="dropdown-button js-tab"
        href="#"
        data-related=".js-participants-content"
      >{% trans "Participants" %} <i class="fa fa-chevron-down"></i></a>

      <div class="tab-content js-tab-content js-participants-content">
        <ul class="participants-menu">
          {% spaceless %}
            {% for tp in topic.topics_private.all %}
              <li class="menu-item">
                <span class="menu-username">{{ tp.user.st.nickname }}</span>
                {% ifequal user.pk topic.user.pk %}
                  <a class="menu-icon" href="{% url "spirit:topic:private:access-remove" tp.pk %}">
                    <i class="fa fa-times"></i>
                  </a>
                {% endifequal %}
              </li>
            {% endfor %}
          {% endspaceless %}
        </ul>

        {% ifequal user.pk topic.user.pk %}
          {% render_invite_form topic %}
        {% endifequal %}
      </div>
    </div>

    <div class="private-leave">
      <a class="button"
        href="{% url "spirit:topic:private:access-remove" topic_private.pk %}"
      ><i class="fa fa-times"></i>{% trans "Leave topic" %}</a>
    </div>
  </div>

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

  {# this can be *included* here and in topic_detail #}
  <div class="container">
    {% render_paginator comments %}

    <div class="notify">
      {% render_notification_form user=user topic=topic %}
    </div>
  </div>

  <div id="reply" class="reply">

    <div class="comment-media">
      <div class="comment-img">
        <img class="comment-avatar" src="{% get_gravatar_url user=user size=50 %}" />
      </div>

      <div class="comment-body">
        {% render_comments_form topic=topic %}
      </div>
    </div>

  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function(){
      stModules.bookmark(document.querySelectorAll('.comment'), {
        csrfToken: "{{ csrf_token }}",
        target: "{% url "spirit:comment:bookmark:create" topic.pk %}"
      });
    });
  </script>

{% endblock %}
