{% extends "templates/base.html" %}
{% block title %}{{ 'Discussions' }}{% endblock %}
{% block head_include %}
<style>
</style>
{% endblock %}

{% block content %}
<div class="common-page-style">
  <div class="container">
    <div class="courses-header">
      <span>{{_('Discussions')}}</span>
      <div id="new-topic" class="button is-primary pull-right">
        <img src="/assets/community/icons/small-add.svg">
        Start a Discussion</div>
    </div>
    <div class="card-divider-dark"></div>
    {% if threads | length %}
    <div class="cards-parent">
      {% for thread in threads %}
      <div class="common-card-style thread-card">
        <div class="course-card-title">{{ thread.title }}</div>
        <div class="card-divider"></div>
        <div>
          <span class="course-student-count">
            <span class="mr-4">
              <img class="icon-background" src="/assets/community/icons/message.svg" />
              {{ thread.message_count }}
            </span>
            <span class="mr-4">
              <img class="icon-background" src="/assets/community/icons/user.svg" />
              {{ thread.member_count }}
            </span>
          </span>
        </div>
        <a class="stretched-link" href="/discussions/{{ thread.name }}"></a>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div class="text-center font-weight-bold mt-5">
      No discussions yet.
    </div>
    {% endif %}
  </div>
</div>

<!-- New Topic Modal -->
<div class="modal fade discussion-modal" id="discussion-modal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div class="course-home-headings modal-headings">Start a Discussion</div>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        {{ widgets.DiscussionComment() }}
      </div>
    </div>
  </div>
</div>

{% endblock %}