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

<script aria-hidden="true" type="text/template" id="thread-template">
    <article class="discussion-article" data-id="${'<%- id %>'}">
        <div class="thread-content-wrapper"></div>
        <div class="response-count"/>
        <div class="add-response">
            <button class="button add-response-btn">
                <i class="icon icon-reply"></i>
                <span class="add-response-btn-text">${_('Add A Response')}</span>
            </button>
        </div>
        <ol class="responses"/>
        <div class="response-pagination"/>
        <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 aria-hidden="true" type="text/template" id="thread-show-template">
  <div class="discussion-post">
      <header>
      ${"<% if (obj.group_id) { %>"}
      <div class="group-visibility-label">${"<%- obj.group_string%>"}</div>
              ${"<% }  %>"}

          <a href="#" class="vote-btn" role="button" aria-pressed="false"><!-- DiscussionContentView.renderVote populates this --></a>
          <h1>${'<%- title %>'}</h1>
          <p class="posted-details">
              ${"<% if (obj.username) { %>"}
              <a href="${'<%- user_url %>'}" class="username">${'<%- username %>'}</a>
              ${"<% } else { %>"}
              ${_('anonymous') | h}
              ${"<% } %>"}
              <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>
          <a href="javascript:void(0)" class="dogear action-follow" data-tooltip="${_('follow') | h}" role="checkbox" aria-checked="false">
            <span class="sr">${_("Follow this post")}</span>
          </a>
      </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" role="button" aria-pressed="false" tabindex="0">
      <i class="icon icon-pushpin"></i><span class="pin-label">${_("Pin Thread")}</span></div>

      %else:
      ${"<% if (pinned) { %>"}
      <div class="discussion-pin notpinned">
      <i class="icon icon-pushpin"></i><span class="pin-label">${_("Pinned")}</span></div>
      ${"<% }  %>"}
      % endif

      <%  js_block = u"""
          var courseware_link = interpolate('<a href="%s">%s</a>', [courseware_url, _.escape(courseware_title)]);
          print(interpolate('{}', {{'courseware_title_linked': courseware_link}}, true));
          """.format(
                  ## Translators: 'courseware_title_linked' is a placeholder for the title of the courseware unit referenced by this discussion thread.
                  escapejs(_("(this post is about %(courseware_title_linked)s)"))
              )
      %>
      ${'<% if (obj.courseware_url) { %>'}
          <div class="post-context">${'<%'}${js_block}${'%>'}</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 aria-hidden="true" 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') | h}">
    </div>
    <div class="form-row">
      <div class="edit-post-body" name="body">${"<%- body %>"}</div>
    </div>
    <input type="submit" id="edit-post-submit" class="post-update" value="${_("Update post") | h}">
    <a href="#" class="post-cancel">${_("Cancel")}</a>
  </div>
</script>

<script aria-hidden="true" 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...') | h}"></div>
                <div class="comment-post-control">
                    <a class="discussion-submit-comment control-button" href="#">${_("Submit")}</a>
                </div>
            </form>
            % endif
        </li>
    </ol>
</script>

<script aria-hidden="true" type="text/template" id="thread-response-show-template">
    <header class="response-local">
        <a href="#" class="vote-btn" role="button" aria-pressed="false"><!-- DiscussionContentView.renderVote() populates this --></a>
        <a href="javascript:void(0)" class="endorse-btn action-endorse" style="cursor: default; display: none;" data-tooltip="${_('endorse') | h}"><span class="check-icon" style="pointer-events: none; "></span></a>
        ${"<% if (obj.username) { %>"}
        <a href="${'<%- user_url %>'}" class="posted-by">${'<%- username %>'}</a>
        ${"<% } else { %>"}
        <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 aria-hidden="true" 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" data-id="${'<%- id %>'}">${"<%- body %>"}</div>
    </div>
    <input type="submit" id="edit-response-submit"class="post-update" value="${_("Update response") | h}">
    <a href="#" class="post-cancel">${_("Cancel")}</a>
  </div>
</script>

<script aria-hidden="true" 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') | h}" role="button" aria-pressed="false" tabindex="0">
      <i class="icon icon-flag"></i><span class="sr flag-label">${_("Report Misuse")}</span></div>
    <div style="display: none" class="discussion-delete-comment action-delete" data-tooltip="${_('Delete Comment') | h}" role="button" tabindex="0">
      <i class="icon icon-remove"></i><span class="sr">${_("Delete Comment")}</span></div>
    <div class="discussion-edit-comment action-edit" data-tooltip="${_('Edit') | h}" role="button" tabindex="0">
      <i class="icon icon-pencil"></i><span class="sr">${_("Edit")}</span></div>
      <%
      js_block = u"""
        interpolate(
          '{}',
          {{'time_ago': '<span class=\"timeago\" title=\"' + created_at + '\">' + created_at + '</span>'}},
          true
          )""".format(
                 ## Translators: 'timeago' is a placeholder for a fuzzy, relative timestamp (see: https://github.com/rmm5t/jquery-timeago)
                 escapejs(_('-posted %(time_ago)s by'))
               )
             %>
      <p class="posted-details">
      ${'<%='}${js_block}${'%>'}
      ${"<% if (obj.username) { %>"}
      <a href="${'<%- user_url %>'}" class="profile-link">${'<%- username %>'}</a>
      ${"<% } else { %>"}
      ${_('anonymous')}
      ${"<% } %>"}
    </p>
  </div>
</script>

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

<script aria-hidden="true" type="text/template" id="thread-list-item-template">
  <li data-id="${'<%- id %>'}" class="forum-nav-thread${'<% if (typeof(read) != "undefined" && !read) { %> is-unread<% } %>'}">
    <a href="#" class="forum-nav-thread-link">
      <div class="forum-nav-thread-wrapper-1">
        <span class="forum-nav-thread-title">${"<%- title %>"}</span>
        <%
        js_block = u"""
        var labels = "";
        if (pinned) {{
            labels += '<li class="forum-nav-thread-label-pinned"><i class="icon icon-pushpin"></i>{pinned_text}</li> ';
        }}
        if (typeof(subscribed) != "undefined" && subscribed) {{
            labels += '<li class="forum-nav-thread-label-following"><i class="icon icon-star"></i>{following_text}</li> ';
        }}
        if (staff_authored) {{
            labels += '<li class="forum-nav-thread-label-staff"><i class="icon icon-user"></i>{staff_text}</li> ';
        }}
        if (community_ta_authored) {{
            labels += '<li class="forum-nav-thread-label-community-ta"><i class="icon icon-user"></i>{community_ta_text}</li> ';
        }}
        if (labels != "") {{
            print('<ul class="forum-nav-thread-labels">' + labels + '</ul>');
        }}
        """.format(
            ## Translators: This is a label for a forum thread that has been pinned
            pinned_text=escapejs(_("Pinned")),
            ## Translators: This is a label for a forum thread that the user is subscribed to
            following_text=escapejs(_("Following")),
            ## Translators: This is a label for a forum thread that was authored by a member of the course staff
            staff_text=escapejs(_("By: Staff")),
            ## Translators: This is a label for a forum thread that was authored by a community TA
            community_ta_text=escapejs(_("By: Community TA"))
        )
         %>
        ${"<%"}${js_block}${"%>"}
      </div><div class="forum-nav-thread-wrapper-2">
        ${"<% if (endorsed) { %>"}
          ## Translators: This is a label for a forum thread with a response that was endorsed by the course staff
          <span class="forum-nav-thread-endorsed"><i class="icon icon-ok"></i><span class="sr">${_("Endorsed response")}</span></span>
        ${"<% } %>"}
        <%
        js_block = u"""
            interpolate(
                '{}',
                {{'span_sr_open': '<span class=\"sr\">', 'span_close': '</span>', 'votes_up_count': votes['up_count']}},
                true
                )
        """.format(
                ## Translators: 'votes_up_count' is a numerical placeholder for a specific discussion thread; 'span_*' placeholders refer to HTML markup.  Please translate the word 'votes'.
                escapejs( _('%(votes_up_count)s%(span_sr_open)s votes %(span_close)s'))
            )
        %>
        <span class="forum-nav-thread-votes-count">+${'<%='}${js_block}${'%>'}</span>
        <% 
        js_block =  u"""
        var fmt;
        // Counts in data do not include the post itself, but the UI should
        var data = {{
            'span_sr_open': '<span class=\"sr\">',
            'span_close': '</span>',
            'unread_comments_count': unread_comments_count + (read ? 0 : 1),
            'comments_count': comments_count + 1
            }};
        if (unread_comments_count > 0) {{
            fmt = '{markup_with_unread}';
        }} else {{
            fmt = '{markup_none_unread}';
        }}
        print(interpolate(fmt, data, true));
        """.format(
                ## Translators: 'comments_count' and 'unread_comments_count' are numerical placeholders for a specific discussion thread; 'span_*' placeholders refer to HTML markup.  Please translate the word 'comments'.
                markup_with_unread=escapejs(_('%(comments_count)s %(span_sr_open)scomments (%(unread_comments_count)s unread comments)%(span_close)s')),
                ## Translators: 'comments_count' is a numerical placeholder for a specific discussion thread; 'span_*' placeholders refer to HTML markup.  Please translate the word 'comments'.
                markup_none_unread=escapejs(_('%(comments_count)s %(span_sr_open)scomments %(span_close)s'))
            )
        %>
        <span class="forum-nav-thread-comments-count ${'<% if (unread_comments_count > 0) { %>is-unread<% } %>'}">
            ${'<%'}${js_block}${'%>'}
        </span>
      </div>
    </a>
  </li>
</script>

<script aria-hidden="true" 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>
      % endif
    </section>

      % if settings.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 for="email-setting-checkbox">
                <span class="sr">${_("Toggle Notifications Setting")}</span>
                <span class="notification-checkbox">
                  <input type="checkbox" id="email-setting-checkbox" class="email-setting" name="email-notification"/>
                  <i class="icon icon-envelope"></i>
                </span>
              </label>
              <span class="row-description">${_("Check this box to receive an email digest once a day notifying you about new, unread activity from posts you are following.")}</span>
            </td>
          </tr>
        </table>
      % endif

  </div>
</script>

<script aria-hidden="true" type="text/template" id="search-alert-template">
    <div class="search-alert" id="search-alert-${'<%- cid %>'}">
        <div class="search-alert-content">
          <p class="message">${'<%= message %>'}</p>
        </div>

        <div class="search-alert-controls">
          <a href="#" class="dismiss control control-dismiss"><i class="icon icon-remove"></i></a>
        </div>
    </div>
</script>

<script aria-hidden="true" type="text/template" id="new-post-tab-template">
    <div class="inner-wrapper">
        <form class="new-post-form">
            <div class="left-column">
                <!-- BEGIN topic dropdown -->
                ${'<%= topic_dropdown_html %>'}
                <!-- END topic dropdown -->
                <!-- BEGIN options -->
                ${'<%= options_html %>'}
                <!-- END options -->
            </div>
            <div class="right-column">
                <!-- BEGIN errors display -->
                <ul class="new-post-form-errors"></ul>
                <!-- END errors display -->
                <!-- BEGIN content editor -->
                ${'<%= editor_html %>'}
                <!-- END content editor -->
            </div>
        </form>
    </div>
</script>

<script aria-hidden="true" type="text/template" id="new-post-inline-template">
    <div class="inner-wrapper">
        <!-- BEGIN errors display -->
        <div class="new-post-form-errors">
        </div>
        <!-- END errors display -->
        <form class="new-post-form">
            <!-- BEGIN content editor -->
            ${'<%= editor_html %>'}
            <!-- END content editor -->
            <!-- BEGIN options -->
            ${'<%= options_html %>'}
            <!-- END options -->
        </form>
    </div>
</script>

<script aria-hidden="true" type="text/template" id="new-post-menu-entry-template">
    <li role="menuitem"><a href="#" class="topic" data-discussion_id="${'<%- id %>'}" aria-describedby="topic-name-span-${'<%- id %>'}" cohorted="${'<%- is_cohorted %>'}">${'<%- text %>'}</a></li>
</script>

<script aria-hidden="true" type="text/template" id="new-post-menu-category-template">
    <li role="menuitem">
        <a href="#"><span class="category-menu-span">${'<%- text %>'}</span></a>
        <ul role="menu">${'<%= entries %>'}</ul>
    </li>
</script>

<script aria-hidden="true" type="text/template" id="new-post-topic-dropdown-template">
    <span class="topic-dropdown-label" id="topic-dropdown-label">${_("Create new post about:")}</span>
    <div class="form-topic-drop">
        <a href="#" aria-labelledby="topic-dropdown-label" class="topic_dropdown_button">${_("Show All Discussions")}<span class="drop-arrow" aria-hidden="true">▾</span></a>
        <div class="topic_menu_wrapper">
            <div class="topic_menu_search" role="menu">
                <label class="sr" for="browse-topic-newpost">${_("Filter List")}</label>
                <input type="text" id="browse-topic-newpost" class="form-topic-drop-search-input" placeholder="${_('Filter discussion areas')}">
            </div>
            <ul class="topic_menu" role="menu">${'<%= topics_html %>'}</ul>
        </div>
    </div>
</script>

<script aria-hidden="true" type="text/template" id="new-post-options-template">
    <div class="options">
        <input type="checkbox" name="follow" class="discussion-follow" id="new-post-follow" checked><label for="new-post-follow">${_("follow this post")}</label>
        ${'<% if (allow_anonymous) { %>'}
        <br>
        <input type="checkbox" name="anonymous" class="discussion-anonymous" id="new-post-anonymous">
        <label for="new-post-anonymous">${_("post anonymously")}</label>
        ${'<% } %>'}
        ${'<% if (allow_anonymous_to_peers) { %>'}
        <br>
        <input type="checkbox" name="anonymous_to_peers" class="discussion-anonymous-to-peers" id="new-post-anonymous-to-peers">
        <label for="new-post-anonymous-to-peers">${_("post anonymously to classmates")}</label>
        ${'<% } %>'}
        ${'<% if (cohort_options) { %>'}
        <div class="form-group-label choose-cohort">
            ## Translators: This labels the selector for which group of students can view a post
            ${_("Make visible to:")}
            <select class="group-filter-select new-post-group" name="group_id">
                <option value="">${_("All Groups")}</option>
                ${'<% _.each(cohort_options, function(opt) { %>'}
                    <option value="${'<%= opt.value %>'}" ${'<% if (opt.selected) { %>selected<% } %>'}>${'<%- opt.text %>'}</option>
                ${'<% }); %>'}
            </select>
        </div>
        ${'<% } %>'}
    </div>
</script>

<script aria-hidden="true" type="text/template" id="new-post-editor-template">
    <div class="form-row">
        <label class="sr" for="new-post-title">${_("new post title")}</label>
        <input type="text" id="new-post-title" class="new-post-title" name="title" placeholder="${_('Title')}">
    </div>
    <div class="form-row">
        <div class="new-post-body" name="body" placeholder="${_(u'Enter your question or comment…')}"></div>
    </div>
    <input type="submit" id="new-post-submit" class="submit" value="${_('Add post')}">
    <a href="#" class="new-post-cancel">${_('Cancel')}</a>
</script>
