<%! from django.utils.translation import ugettext as _ %>
<%! from django_comment_client.permissions import has_permission %>

<script type="text/template" id="thread-template">
    <article class="discussion-article" data-id="${'<%- id %>'}">
        <div class="thread-content-wrapper"></div>
        
        <ol class="responses">
            <li class="loading"><div class="loading-animation"><span class="sr">Loading content</span></div></li>
        </ol>
        <div class="post-status-closed bottom-post-status" style="display: none">
          ${_("This thread is closed.")}
        </div>
        % if course is UNDEFINED or has_permission(user, 'create_comment', course.id):
        <form class="discussion-reply-new" data-id="${'<%- id %>'}">
            <h4>${_("Post a response:")}</h4>
            <ul class="discussion-errors"></ul>
            <div class="reply-body" data-id="${'<%- id %>'}"></div>
            <div class="reply-post-control">
                <a class="discussion-submit-post control-button" href="#">${_("Submit")}</a>
            </div>
        </form>
        % endif
    </article>
</script>

<script type="text/template" id="thread-show-template">
  <div class="discussion-post">
      <div><a href="javascript:void(0)" class="dogear action-follow" data-tooltip="follow"></a></div>
      <header>
      ${"<% if (obj.group_id) { %>"}
      <div class="group-visibility-label">${"<%- obj.group_string%>"}</div>
              ${"<% }  %>"}      
      
          <a href="#" class="vote-btn discussion-vote discussion-vote-up" data-role="discussion-vote" data-tooltip="vote">
          <span class="plus-icon">+</span> <span class='votes-count-number'>${'<%- votes["up_count"] %>'}<span class="sr">votes (click to vote)</span></span></a>
          <h1>${'<%- title %>'}</h1>
          <p class="posted-details">
              ${"<% if (obj.username) { %>"}
              <a href="${'<%- user_url %>'}" class="username">${'<%- username %>'}</a>
              ${"<% } else {print('anonymous');} %>"}
              <span class="timeago" title="${'<%- created_at %>'}">${'<%- created_at %>'}</span>

              <span class="post-status-closed top-post-status" style="display: none">
                ${_("&bull; This thread is closed.")}
              </span>
          </p>
      </header>

      <div class="post-body">${'<%- body %>'}</div>
      <div class="discussion-flag-abuse notflagged" data-role="thread-flag" role="button" aria-pressed="false" tabindex="0">
      <i class="icon icon-flag"></i><span class="flag-label">${_("Report Misuse")}</span></div>
        
        
      % if course and has_permission(user, 'openclose_thread', course.id):
      <div class="admin-pin discussion-pin notpinned" data-role="thread-pin" data-tooltip="pin this thread">
      <i class="icon icon-pushpin"></i><span class="pin-label">${_("Pin Thread")}</span></div>

      %else:
      ${"<% if (pinned) { %>"}
      <div class="discussion-pin notpinned" data-role="thread-pin" data-tooltip="pin this thread">
      <i class="icon icon-pushpin"></i><span class="pin-label">${_("Pin Thread")}</span></div>
      ${"<% }  %>"}  
      % endif
      
      
      ${'<% if (obj.courseware_url) { %>'}
      <div class="post-context">
          (this post is about <a href="${'<%- courseware_url%>'}">${'<%- courseware_title %>'}</a>)
      </div>
      ${'<% } %>'}

      <ul class="moderator-actions">
          <li style="display: none"><a class="action-edit" href="javascript:void(0)"><span class="edit-icon"></span> ${_("Edit")}</a></li>
          <li style="display: none"><a class="action-delete" href="javascript:void(0)"><span class="delete-icon"></span> ${_("Delete")}</a></li>
          <li style="display: none"><a class="action-openclose" href="javascript:void(0)"><span class="edit-icon"></span> ${_("Close")}</a></li>
      </ul>
  </div>
</script>

<script type="text/template" id="thread-edit-template">
  <div class="discussion-post edit-post-form">
    <h1>${_("Editing post")}</h1>
    <ul class="edit-post-form-errors"></ul>
    <div class="form-row">
      <label class="sr" for="edit-post-title">${_("Edit post title")}</label>
      <input type="text" id="edit-post-title" class="edit-post-title" name="title" value="${"<%-title %>"}" placeholder="Title">
    </div>
    <div class="form-row">
      <div class="edit-post-body" name="body">${"<%- body %>"}</div>
    </div>
    ## TODO tags
    ## Until we decide what to do with tags, commenting them out.
    ##<div class="form-row">
    ##  <label class="sr" for="edit-post-tags">${_("Edit post tags")}</label>
    ##  <input type="text" id="edit-post-tags" class="edit-post-tags" name="tags" placeholder="Tags" value="${"<%- tags %>"}">
    ##</div>
    <input type="submit" id="edit-post-submit" class="post-update" value="${_("Update post")}">
    <a href="#" class="post-cancel">${_("Cancel")}</a>
  </div>
</script>

<script type="text/template" id="thread-response-template">
    <div class="discussion-response"></div>
    <ol class="comments">
        <li class="new-comment response-local">
            % if course is UNDEFINED or has_permission(user, 'create_sub_comment', course.id):
            <form class="comment-form" data-id="${'<%- wmdId %>'}">
                <ul class="discussion-errors"></ul>
                <label class="sr" for="add-new-comment">${_("Add a comment")}</label>
                <div class="comment-body" id="add-new-comment" data-id="${'<%- wmdId %>'}"
                data-placeholder="Add a comment..."></div>
                <div class="comment-post-control">
                    <a class="discussion-submit-comment control-button" href="#">${_("Submit")}</a>
                </div>
            </form>
            % endif
        </li>
    </ol>
</script>

<script type="text/template" id="thread-response-show-template">
    <header class="response-local">
        <a href="javascript:void(0)" class="vote-btn" data-tooltip="vote"><span class="plus-icon"></span><span class="votes-count-number">${"<%- votes['up_count'] %>"}<span class="sr">votes (click to vote)</span></span></a>
        <a href="javascript:void(0)" class="endorse-btn${'<% if (endorsed) { %> is-endorsed<% } %>'} action-endorse" style="cursor: default; display: none;" data-tooltip="endorse"><span class="check-icon" style="pointer-events: none; "></span></a>
        ${"<% if (obj.username) { %>"}
        <a href="${'<%- user_url %>'}" class="posted-by">${'<%- username %>'}</a>
        ${"<% } else {print('<span class=\"anonymous\"><em>anonymous</em></span>');} %>"}
        <p class="posted-details" title="${'<%- created_at %>'}">${'<%- created_at %>'}</p>
    </header>
    <div class="response-local"><div class="response-body">${"<%- body %>"}</div>
    <div class="discussion-flag-abuse notflagged" data-role="thread-flag" role="button" aria-pressed="false" tabindex="0">
      <i class="icon icon-flag"></i><span class="flag-label">${_("Report Misuse")}</span></div>
    </div>
    <ul class="moderator-actions response-local">
        <li style="display: none"><a class="action-edit" href="javascript:void(0)"><span class="edit-icon"></span> ${_("Edit")}</a></li>
        <li style="display: none"><a class="action-delete" href="javascript:void(0)"><span class="delete-icon"></span> ${_("Delete")}</a></li>
        <li style="display: none"><a class="action-openclose" href="javascript:void(0)"><span class="edit-icon"></span> ${_("Close")}</a></li>
    </ul>
</script>

<script type="text/template" id="thread-response-edit-template">
  <div class="edit-post-form">
    <h1>${_("Editing response")}</h1>
    <ul class="edit-post-form-errors"></ul>
    <div class="form-row">
      <div class="edit-post-body" name="body">${"<%- body %>"}</div>
    </div>
    <input type="submit" id="edit-response-submit"class="post-update" value="${_("Update response")}">
    <a href="#" class="post-cancel">${_("Cancel")}</a>
  </div>
</script>

<script type="text/template" id="response-comment-show-template">
  <div id="comment_${'<%- id %>'}">
    <div class="response-body">${'<%- body %>'}</div>
    <div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="${_('Report Misuse')}" role="button" aria-pressed="false" tabindex="0">
      <i class="icon icon-flag"></i><span class="sr flag-label">${_("Report Misuse")}</span></div>
    <p class="posted-details">&ndash;posted <span class="timeago" title="${'<%- created_at %>'}">${'<%- created_at %>'}</span> by
        ${"<% if (obj.username) { %>"}
        <a href="${'<%- user_url %>'}" class="profile-link">${'<%- username %>'}</a>
        ${"<% } else {print('anonymous');} %>"}
    </p>
  </div>
</script>

<script type="text/template" id="thread-list-item-template">
    <a href="${'<%- id %>'}" data-id="${'<%- id %>'}">
        <span class="title">${"<%- title %>"}</span>
        ${"<% if (unread_comments_count > 0) { %>"}
            <span class="comments-count unread" data-tooltip="${"<%- unread_comments_count %>"} new comment${"<%- unread_comments_count > 1 ? 's' : '' %>"}">${"<%- comments_count %>"} <span class="sr">comments (${"<%- unread_comments_count %>"} unread comments)</span></span>
        ${"<% } else { %>"}
            <span class="comments-count">${"<%- comments_count %>"}<span class="sr">comments</span></span>
        ${"<% } %>"}
        <span class="votes-count">+${"<%- votes['up_count'] %>"}<span class="sr">votes</span></span>
    </a>
</script>
<script type="text/template" id="discussion-home">
  <div class="discussion-article blank-slate">
  <section class="home-header">
  <span class="label">DISCUSSION HOME:</span>
  % if course and course.display_name_with_default:
  <h1 class="home-title">${course.display_name_with_default}</h1>
  </section>
  
  % if settings.MITX_FEATURES.get('ENABLE_DISCUSSION_HOME_PANEL'):
  <span class="label label-settings">HOW TO USE EDX DISCUSSIONS</span>
  <table class="home-helpgrid">
  <tr class="helpgrid-row helpgrid-row-navigation">
  <td class="row-title">Find discussions</td>
  <td class="row-item">
  <i class="icon icon-reorder"></i>
  <span class="row-description">Focus in on specific topics</span>
  </td>
  <td class="row-item">
  <i class="icon icon-search"></i>
  <span class="row-description">Search for specific posts </span>
  </td>
  <td class="row-item">
  <i class="icon icon-sort"></i>
  <span class="row-description">Sort by date, vote, or comments </span>
  </td>
  </tr>
  <tr class="helpgrid-row helpgrid-row-participation">
  <td class="row-title">Engage with posts</td>
  <td class="row-item">
  <i class="icon icon-plus"></i>
  <span class="row-description">Upvote posts and good responses</span>
  </td>
  <td class="row-item">
  <i class="icon icon-flag"></i>
  <span class="row-description">Report Forum Misuse</span>
  </td>
  <td class="row-item">
  <i class="icon icon-star"></i>
  <span class="row-description">Follow posts for updates</span>
  </td>
  </tr>
  <tr class="helpgrid-row helpgrid-row-notification">
  <td class="row-title">Receive updates</td>
  <td class="row-item-full" colspan="3">
  <label class="sr" for="email-setting-checkbox">${_("Toggle Notifications Setting")}</label>
  <input type="checkbox" id="email-setting-checkbox" class="email-setting" name="email-notification"/>
  <i class="icon icon-envelope"></i>
  <span class="row-description"> If enabled, you will receive an email digest once a day notifying you about new, unread activity from posts you are following. </span>
  </td>
  </tr>
  </table>
  % endif
  % endif

  </div>    
</script>
