<%! import django_comment_client.helpers as helpers %>
<%! from django.template.defaultfilters import escapejs %>
<%inherit file="../main.html" />
<%namespace name='static' file='../static_content.html'/>
<%block name="bodyclass">discussion</%block>
<%block name="title"><title>Discussion – ${course.number}</title></%block>

<%block name="headextra">
<%static:css group='course'/>
<%include file="_js_head_dependencies.html" />
</%block>

<%block name="js_extra">
<%include file="_js_body_dependencies.html" />
<%static:js group='discussion'/>
<script type="text/javascript" src="${static.url('js/discussions-temp.js')}"></script>
<script>
    $$contents = {};
    $$discussions = {};
    $$course_id = "${course_id}";
    DiscussionApp = {
      start: function() {
        window.user = new DiscussionUser(JSON.parse("${user_info | escapejs}"));
        var discussion = new Discussion(JSON.parse("${threads | escapejs}"));

        new DiscussionRouter({discussion: discussion});
        Backbone.history.start({pushState: true, root: "/courses/${course_id}/discussion/forum/"});
       }
    }
    $(document).ready(function() {
        DiscussionApp.start();
    });
</script>
</%block>

<%! from django.core.urlresolvers import reverse %>
<%! from courseware.access import has_access %>

<nav class="course-material">
  <div class="inner-wrapper">
    <ol class="course-tabs">
      <li class="courseware"><a href="${reverse('courseware', args=[course.id])}">Courseware</a></li>
      <li class="info"><a href="${reverse('info', args=[course.id])}">Course Info</a></li>
% if hasattr(course,'syllabus_present') and course.syllabus_present:
      <li class="syllabus"><a href="${reverse('syllabus', args=[course.id])}">Syllabus</a></li>
% endif
% if user.is_authenticated():
  % if settings.MITX_FEATURES.get('ENABLE_TEXTBOOK'):
        % for index, textbook in enumerate(course.textbooks):
            <li class="book"><a href="${reverse('book', args=[course.id, index])}">${textbook.title}</a></li>
        % endfor
  % endif
  % if settings.MITX_FEATURES.get('ENABLE_DISCUSSION_SERVICE'):
        <li class="discussion"><a href="${reverse('django_comment_client.forum.views.forum_form_discussion', args=[course.id])}" class="active">Discussion</a></li>
  % endif
% endif
% if settings.WIKI_ENABLED:
      <li class="wiki"><a href="${reverse('course_wiki', args=[course.id])}">Wiki</a></li>
% endif
% if user.is_authenticated():
      <li class="profile"><a href="${reverse('progress', args=[course.id])}">Progress</a></li>
% endif
% if staff_access:
      <li class="instructor"><a href="${reverse('instructor_dashboard', args=[course.id])}">Instructor</a></li>
% endif
      <li class="right"><a href="#" class="new-post-btn"><span class="new-post-icon"></span>New Post</a></li>
    </ol>

  </div>
</nav>

<article class="new-post-article">
  <div class="inner-wrapper">
    <form class="new-post-form">
      <div class="left-column">
        <label>Create new post in:</label>
        <div class="topic-drop">
          <a href="#" class="topic-drop-btn">Homework / Week 1 <span class="drop-arrow">▾</span></a>
          <ul class="topic-drop-menu">
            <li><a href="#">All</a></li>
            <li><a href="#">Following</a></li>
            <li><a href="#">General</a></li>
            <li>
              <a href="#">Homework</a>
              <ul>
                <li><a href="#">Week 1</a></li>
                <li>
                  <a href="#">Week 2</a>
                  <ul>
                    <li><a href="#">Problem 1</a></li>
                    <li><a href="#">Problem 2</a></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="options">
          <input type="checkbox" name="follow" id="new-post-follow" checked><label for="new-post-follow">follow this post</label>
          <br>
          <input type="checkbox" name="follow" id="new-post-anonymous" checked><label for="new-post-anonymous">post anonymously</label>
        </div>
      </div>
      <div class="right-column">
        <div class="form-row">
          <input type="text" class="new-post-title" name="title" placeholder="Title">
        </div>
        <div class="form-row">
          <textarea class="new-post-body" name="body" placeholder="Enter your question or comment…"></textarea>
          <div class="new-post-preview"><span class="new-post-preview-label">Preview</span></div>
        </div>
        <div class="form-row">
          <input type="text" class="new-post-tags" name="tags" placeholder="Tags">
        </div>
        <input type="submit" class="submit" value="Add post">
        <a href="#" class="new-post-cancel">Cancel</a>
      </div>
    </form>
  </div>
</article>

<div class="discussion container">
  <div class="discussion-body">
    <div class="sidebar"></div>
    <div class="discussion-column"></div>
  </div>
</div>

<script type="text/template" id="thread-list-template">
  <div class="browse-search">
    <div class="browse is-open">
      <a href="#" class="board-drop-icon"></a>
      <a href="#" class="board-drop-btn"><span class="current-board">Homework / Week 1</span> <span class="drop-arrow">▾</span></a>
    </div>
    <ul class="board-drop-menu">
      <li><a href="#"><span class="board-name">All</span> <span class="unread">1,248</span></a></li>
      <li><a href="#"><span class="board-name">Following</span></a></li>
      <li><a href="#"><span class="board-name">General</span> <span class="unread">124</span></a></li>
      <li>
        <a href="#"><span class="board-name">Homework</span> <span class="unread">27</span></a>
        <ul>
          <li><a href="#"><span class="board-name">Week 1</span> <span class="unread">24</span></a></li>
          <li>
            <a href="#"><span class="board-name">Week 2</span> <span class="unread">27</span></a>
            <ul>
              <li><a href="#"><span class="board-name">Problem 1</span> <span class="unread">14</span></a></li>
              <li><a href="#"><span class="board-name">Problem 2</span> <span class="unread">13</span></a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <div class="search">
      <form class="post-search">
        <input type="text" placeholder="Search all discussions" class="post-search-field">
      </form>
    </div>
  </div>
  <div class="sort-bar">
    <span class="sort-label">Sort by:</span>
    <ul>
      <li><a href="#" class="active" data-sort="date">date</a></li>
      <li><a href="#" data-sort="votes">votes</a></li>
      <li><a href="#" data-sort="comments">comments</a></li>
    </ul>
  </div>
  <div class="post-list-wrapper">
    <ul class="post-list">
    </ul>
  </div>
</script>

<script type="text/template" id="thread-template">
  <article class="discussion-article" data-id="${'<%= id %>'}">
    <a href="#" class="dogear"></a>
    <div class="discussion-post">
      <header>
        <a href="#" class="vote-btn discussion-vote discussion-vote-up"><span class="plus-icon">+</span> <span class='votes-count-number'>${'<%= votes["up_count"] %>'}</span></a>
        <h1>${'<%= title %>'}</h1>
        <p class="posted-details">
          <span class="timeago" title="${'<%= created_at %>'}">sometime</span> by
          <a href="${'<%= user_id %>'}">${'<%= username %>'}</a>
        </p>
      </header>
      <div class="post-body">
        ${'<%= body %>'}
      </div>
    </div>
    <ol class="responses">
      <li class="loading"><div class="loading-animation"></div></li>
    </ol>
    <form class="discussion-reply-new">
      <h4>Post a response:</h4>
      <ul class="discussion-errors"></ul>
      <div class="reply-body"></div>
      <div class="reply-post-control">
        <a class="discussion-submit-post control-button" href="#">Submit</a>
      </div>
    </form>
  </article>
</script>

<script type="text/template" id="thread-response-template">
  <header>
  <a href="#" class="vote-btn" data-tooltip="vote"><span class="plus-icon"></span><span class="votes-count-number">${"<%= votes['up_count'] %>"}</span></a>
    <a href="#" class="posted-by">${"<%= username %>"}</a>
    <p class="posted-details" title="${'<%= created_at %>'}">Sometime</p>
  </header>
  <div class="response-body">${"<%= body %>"}</div>
  <ol class="comments">
    <li>
      <form class="comment-form">
        <input type="text" placeholder="Comment…" class="comment-form-input">
      </form>
    </li>
  </ol>
</script>

<script type="text/template" id="response-comment-template">
    <p>${'<%= body %>'}<span class="posted-details">–posted <span class="timeago" title="${'<%= created_at %>'}">sometime</span> by <a href="#">${'<%= username %>'}</a></span></p>
</script>

<script type="text/template" id="thread-list-item-template">
    <a href="${'<%= id %>'}" data-id="${'<%= id %>'}"><span class="title">${"<%= title %>"}</span> <span class="comments-count">${"<%= comments_count %>"}</span><span class="votes-count">+${"<%= votes['up_count'] %>"}</span></a>
</script>

