{% extends "base.html" %}

{% block bodyclass %}forum container{% endblock %}

{% block title %} Forum {% if thread %} - {{ thread["title"] }} {% endif %} {% endblock %}

{% block body %}

<section class="discussion discussion-board page-content-container" id="discussion-container" data-course-id="{{ mooc.course_id }}">
  <div class="page-content" lang="en">
    <div class="discussion-body">
      <aside class="forum-nav" role="complementary" aria-label="Liste des discussions" {% if display_on_mobile %} style="display:block" {% endif %}>
        <div class="forum-nav-browse-menu-wrapper" aria-label="Discussion topics list">
          <ul class="forum-nav-browse-menu" role="listbox" id="discussion_topics_listbox">
          {% for cat in category %}
              <li class="forum-nav-browse-menu-item" data-discussion-id='{{ cat }}'>
		{% if not "catego_with_sub_catego" in category[cat] %}
                <a onclick="show_forum('{{ cat }}')" > <!--href="{{ cat }}/index.html"-->
		{% endif %}
                  <span class="forum-nav-browse-title">
                    {{ category[cat]["title"] }}
                  </span>
		{% if not "catego_with_sub_catego" in category[cat] %}
                </a>
                <!--- threads -->
                  <div class="discussion-thread-list-container" id="{{ cat }}" {% if thread and cat == thread["commentable_id"] %} style="display:block;" {% else %} style="display:none;" {% endif %}>
                    <div class="forum-nav-thread-list-wrapper" id="sort-filter-wrapper" tabindex="-1">
		      {% if thread_by_category[cat] | length == 0 %}
		      <div class="zero-message">
		        <p> 0 <i class="fa fa-comment"></i> </p>
		      </div>
		      {% else %}
                      <ul class="forum-nav-thread-list">
                      {% for thread in thread_by_category[cat] %}
                        <li data-id="{{ thread["id"] }}" class="forum-nav-thread">
                          <a href="{{ rooturl }}forum/{{ thread["id"] }}/index.html" class="forum-nav-thread-link">
                            <div class="forum-nav-thread-wrapper-0">
                            
                              <span class="sr">Discussion</span>
                              {% if thread["data_thread"]["content"]["endorsed_responses"] %}
                                  <span class="icon fa fa-check-square-o" aria-hidden="true"></span>
                              {% else %}
                                {% if thread["thread_type"] == "discussion" %}
                                  <span class="icon fa fa-comments" aria-hidden="true"></span>
                                {% else %}
                                  <span class="icon fa fa-question" aria-hidden="true"></span>
                                {% endif %}
                              {% endif %}
                            </div>
                            <div class="forum-nav-thread-wrapper-1">
                              <span class="forum-nav-thread-title">{{ thread["title"] }}</span>
                              <div class="thread-preview-body">{{ thread["body"] | first_word }} ... </div>
                              {% if thread["pinned"] or thread["user_id"] in staff_user %}
			      <ul class="forum-nav-thread-labels">
				{% if thread["pinned"] %}
					<li class="post-label-pinned">
					    <i class="icon fa fa-thumb-tack"></i>
					    Pinned
					</li>
				{% endif %}
				{% if thread["user_id"] in staff_user %}
					<li class="post-label-by-staff">
					    <i class="icon fa fa-user"></i>
					    By: Staff
					</li>
				{% endif %}
			    </ul>
		            {% endif %}
                            </div>
                            <div class="forum-nav-thread-wrapper-2">
                              <span class="forum-nav-thread-votes-count" style="display: none;">
                                +0
                                <span class="sr"> votes </span>
                              </span>
                              <span class="forum-nav-thread-comments-count" style="display: inline-block;">
                                  {{ thread["comments_count"] + 1 }}
                                  <span class="sr" data-l10n-id="comments">comments </span> 
                              </span>
                            </div>
                          </a>
                        </li>
                      {% endfor %}
                      </ul>
		      {% endif %}
                    </div>
                  </div>
		{% endif %}
              </li>
          {% endfor %}
          </ul>
        </div>
      </aside>
      {% if thread %}
      <main id="main" class="discussion-column" aria-label="Content" tabindex="-1">
          <div class="forum-content">
          {% include "forum_article.html" %}
          </div>
      </main>
      {% endif %}
    <div>
  </div>
</section>



{#
  <div class="row">
    <h3> Topics : </h3>
    <div class="col-md-8">
  {% for cat in category %}
    {% if "sub_cat" in category[cat] %}
      <h4> {{ category[cat]["name"] }} : </h4>
          {% for sub_cat in category[cat]["sub_cat"] %}
            <p class="question">    <a href="{{ sub_cat["data-discussion-id"] }}/index.html">{{ sub_cat["title"] }}</a></p>
          {% endfor %}
    {% else %}
        <p class="question"><a href="{{ cat }}/index.html">{{ category[cat]["title"] }}</a></p>
    {% endif %}
  {% endfor %}
  </div>
</div>
#}
{% endblock %}
