{% extends 'musette/base_musette.html' %}

{% load i18n %}
{% load static %}
{% load forum_tags %}
{% load hitcount_tags %}

{% block extra_js %}
    {{form_comment.media.js}}
    <script type="text/javascript">
        $('[data-toggle="tooltip"]').tooltip();
    </script>
{% endblock %}

{% block content %}

<div class="container" ng-controller="TopicController">

  {% get_hit_count for topic as total_hits %}

  <div>
    <div class="col-md-12">
        <div class="row">
          <ul class="breadcrumb">
              <li><a href="/forums/">{% trans "Forums" %}</a></li>
              <li><a href="/forum/{{topic.forum.name}}/">{{topic.forum.name}}</a></li>
              <li class="active">{{ topic.title }}</li>
          </ul>
        </div>

        <article class="row">
          <div class="col-md-12 col-sm-12">
            <div class="panel panel-default arrow left">
              <div class="panel-body">

                <div class="pull-left" style="margin-right: 1em">
                  <figure class="thumbnail">
                        <img src="{{ photo }}" class="img-responsive" width="150" hegiht="150" />
                      <figcaption class="text-center">{{topic.user|get_path_profile|safe}}</figcaption>
                  </figure>
                  <div style="text-align: center">
                      {% if topic.user.id == user.id %}
                      <a href="/edit_topic/{{topic.forum.name}}/{{topic.idtopic}}/" class="btn btn-inverse btn-xs">
                        <i class="glyphicon glyphicon-hand-up"></i> {% trans "Edit" %}</a>
                      <a style="cursor: pointer;" data-toggle="modal" data-target="#myModal" class="btn btn-danger btn-xs">
                        <i class="glyphicon glyphicon-trash"></i> {% trans "Delete" %}</a>
                      {% endif %}
                  </div>
                </div>

                <div>
                  <header>
                    <h3> {{topic.title}}
                    {% if topic.is_top %}
                    <i class="glyphicon glyphicon-star"></i>
                    {% endif %}
                    </h3>
                    <hr>
                  </header>
                  <div class="comment-post">
                    <p>
                      {{topic.description|safe}}
                      {% if topic.attachment %}
                        <img src="{{MEDIA_URL}}{{topic.attachment}}" class="img-responsive" />
                      {% endif %}
                    </p>
                    <hr>
                  </div>
                  <div class="pull-left">
                    {% if total_hits|add:"0" > 1 %}
                      <p style="margin-top: 5px;">{% trans "This topic has" %} {{ total_hits }} {% trans "views" %}</p>
                    {% else %}
                      <p style="margin-top: 5px;">{% trans "This topic has" %} {{ total_hits }} {% trans "view" %}</p>
                    {% endif %}
                    <p><b><u>{% trans "Users" %}</u></b> {{topic|get_tot_users_comments|safe}} </p>
                  </div>
                  <p class="pull-right">{{topic.date}}</p>
                </div>
              </div>

            </div>
          </div>
        </article>

    </div>
  </div>

  <br>

  <div id="data-template" class="endless_page_template" endless-pagination="{'paginateOnScroll': true}">
      {% include "musette/topic.html" %}
  </div>

  {% comment %} Real time comment with angular {% endcomment %}
  <input type="hidden" ng-model="topic_id_ws" name="topic_id_ws" id="topic_musette" value="{{topic.idtopic}}" />

  {% verbatim %}
    <div ng-repeat="comment in comments_socket">
      <article class="row">
          <div class="col-md-1 col-sm-1 hidden-xs">
            <figure class="thumbnail">
              <a href="/profile/{{ comment.username }}">
                  <img ng-src="{{ comment.photo }}" class="img-responsive">
              </a>
            </figure>
          </div>
          <div class="col-md-11 col-sm-11">
            <div class="panel panel-default arrow left">
              <div class="panel-body">
                <header class="text-left">
                  <time class="comment-date"><i class="glyphicon glyphicon-time"></i> {% endverbatim %} {% trans "Now" %} {% verbatim %}</time>
                </header>
                <div class="comment-post">
                  <div class="well" style="margin-top: 5px">
                    {{comment.description | htmlToPlaintext }}
                  </div>
                  <span><a href="{{ comment.url_profile_param }}">{{ comment.username }}</a></span>
                </div>
              </div>
            </div>
          </div>
      </article>
    </div>
  {% endverbatim %}

  {% if comments.count > 0 %}
  <hr>
  {% endif %}

  <!-- New comment-->
  {% if user.id != None %}
    <div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
      {% for message in messages %}
        {% if message.tags != "error" %}
          <div class="alert alert-success" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
            {{ message }}
          </div>
        {% else %}
          <div class="alert alert-danger" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
            {{ message }}
          </div>
        {% endif %}
      {% endfor %}
      <form action="/newcomment/{{topic.forum.name}}/{{topic.slug}}/{{topic.idtopic}}/" name="formComment" method="POST" class="well">{% csrf_token%}
        <center>
        {% for field in form_comment %}
          {% if field.name == "description" %}
              <div class="form-group" ng-class="{ 'has-error' : formComment.description.$invalid && !formComment.description.$pristine }">
                <div class="in_div_textarea">
                  {{ field }}
                </div>
                {% if form_comment.description.errors %}
                  <div style="color: red">{{ form_comment.description.errors }}</div>
                {% endif %}
              </div>
          {% endif %}
        {% endfor %}
        </center>
        <button type="submit" class="btn btn-inverse btn-sm" ng-disabled="formComment.$invalid" ng-click="loading()">
            <i class="glyphicon glyphicon-plus"></i> {% trans "New comment" %}
        </button> <img src="{% static 'img/ajax.gif' %}" class="hide" />
      </form>
    </div>
    <div class="col-md-2"></div>
    </div>
  {% endif %}


</div>

{% if topic.user.id == user.id %}

    <!-- Modal remove topic-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">{% trans "Delete topic" %}</h4>
          </div>
          <div class="modal-body">
            {% trans "Do you want to remove the topic?" %}
          </div>
          <div class="modal-footer">
            <form accept-charset="UTF-8" action="/delete_topic/{{topic.forum.name}}/{{topic.idtopic}}/" method="GET">
              <button type="submit" class="btn btn-danger">
                  <i class="glyphicon glyphicon-trash"></i> {% trans "Delete" %}
              </button>
          </form>
          </div>
        </div>
      </div>
    </div>

{% endif %}

{% endblock %}

{% block hitcount_javascript %}
{% insert_hit_count_js_variables for topic %}
{% endblock %}