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

<%namespace name='static' file='../static_content.html'/>

## IMPORTANT: In order to keep js tests valid and relevant, please be sure to update the appropriate HTML in
## common/static/coffee/spec/discussion_spec_helper.coffee is changed and regenerated, whenever this one changes.
<script aria-hidden="true" type="text/template" id="thread-template">
    <article class="discussion-article" data-id="${'<%- id %>'}">
        <div class="thread-wrapper">
            <div class="forum-thread-main-wrapper">
                <div class="thread-content-wrapper"></div>
                <div class="post-extended-content">
                    <ol class="responses js-marked-answer-list"></ol>
                </div>
            </div>
            <div class="post-extended-content">
                <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 js-response-list"/>
                <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
            </div>
        </div>
        <div class="post-tools">
            <a href="javascript:void(0)" class="forum-thread-expand"><span class="icon icon-plus"/> ${_("Expand discussion")}</a>
            <a href="javascript:void(0)" class="forum-thread-collapse"><span class="icon icon-minus"/> ${_("Collapse discussion")}</a>
        </div>
    </article>
</script>

% for template_name in ['thread-show']:
<script aria-hidden="true" type="text/template" id="${template_name}-template">
    <%static:include path="js/discussion/${template_name}.underscore" />
</script>
% endfor

<script aria-hidden="true" type="text/template" id="thread-edit-template">
    <h1>${_("Editing post")}</h1>
    <ul class="post-errors"></ul>
    <div class="forum-edit-post-form-wrapper"></div>
    <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>
</script>

<script aria-hidden="true" type="text/template" id="thread-response-template">
    <div class="discussion-response"></div>
    <a href="#" class="action-show-comments">
        ${u"<%- interpolate('{}', {{num_comments: comments.length}}, true) %>".format(escapejs(_("Show Comments (%(num_comments)s)")))}
        <i class="icon icon-caret-down"></i>
    </a>
    <ol class="comments">
        <li class="new-comment">
            % 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>
      <div class="response-header-content">
        ${'<%= author_display %>'}
        <p class="posted-details">
            <span class="timeago" title="${'<%= created_at %>'}">${'<%= created_at %>'}</span>
            <%
            js_block = u"""
                interpolate(
                    thread.get("thread_type") == "question" ?
                      (endorsement.username ? "{question_user_fmt_str}" : "{question_anon_fmt_str}") :
                      (endorsement.username ? "{discussion_user_fmt_str}" : "{discussion_anon_fmt_str}"),
                    {{
                        'time_ago': '<span class="timeago" title="' + endorsement.time + '">' + endorsement.time + '</span>',
                        'user': endorser_display
                    }},
                    true
                )""".format(
                    ## Translators: time_ago is a placeholder for a fuzzy, relative timestamp
                    ## like "4 hours ago" or "about a month ago"
                    question_user_fmt_str=escapejs(_("marked as answer %(time_ago)s by %(user)s")),
                    ## Translators: time_ago is a placeholder for a fuzzy, relative timestamp
                    ## like "4 hours ago" or "about a month ago"
                    question_anon_fmt_str=escapejs(_("marked as answer %(time_ago)s")),
                    ## Translators: time_ago is a placeholder for a fuzzy, relative timestamp
                    ## like "4 hours ago" or "about a month ago"
                    discussion_user_fmt_str=escapejs(_("endorsed %(time_ago)s by %(user)s")),
                    ## Translators: time_ago is a placeholder for a fuzzy, relative timestamp
                    ## like "4 hours ago" or "about a month ago"
                    discussion_anon_fmt_str=escapejs(_("endorsed %(time_ago)s")),
                )
            %>
              ${"<% if (obj.endorsement) { %> - <%="}${js_block}${"%><% } %>"}
          </p>
          <div class="post-labels">
              <span class="post-label-reported"><i class="icon icon-flag"></i>${_("Reported")}</span>
          </div>
          </div>
          <div class="response-header-actions">
            ${"""<%=
                _.template(
                    $('#forum-actions').html(),
                    {
                        contentId: cid,
                        contentType: 'response',
                        primaryActions: ['vote', thread.get('thread_type') == 'question' ? 'answer' : 'endorse'],
                        secondaryActions: ['edit', 'delete', 'report']
                    }
                )
            %>"""}
          </div>
    </header>

    <div class="response-body">${"<%- body %>"}</div>
</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>
    ${"""<%=
        _.template(
            $('#forum-actions').html(),
            {
                contentId: cid,
                contentType: 'comment',
                primaryActions: [],
                secondaryActions: ['edit', 'delete', 'report']
            }
        )
    %>"""}
    <%
    js_block = u"""
      interpolate(
        '{}',
        {{'time_ago': '<span class=\"timeago\" title=\"' + created_at + '\">' + created_at + '</span>', 'author': author_display}},
        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 %(author)s'))
      )
    %>
    <p class="posted-details">
    ${'<%='}${js_block}${'%>'}
    </p>
    <div class="post-labels">
      <span class="post-label-reported"><i class="icon icon-flag"></i>${_("Reported")}</span>
    </div>
  </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-0">
        ${u"""<%
        var icon_class, sr_text;
        if (thread_type == "discussion") {{
            icon_class = "icon-comments";
            sr_text = "{discussion}";
        }} else if (endorsed) {{
            icon_class = "icon-ok";
            sr_text = "{answered_question}";
        }} else {{
            icon_class = "icon-question";
            sr_text = "{unanswered_question}";
        }}
        %>""".format(
            ## Translators: This is a label for a Discussion forum thread
            discussion=escapejs(_("discussion")),
            ## Translators: This is a label for a Question forum thread with a marked answer
            answered_question=escapejs(_("answered question")),
            ## Translators: This is a label for a Question forum thread without a marked answer
            unanswered_question=escapejs(_("unanswered question"))
        )}
        <span class="sr">${"<%= sr_text %>"}</span>
        <i class="icon ${"<%= icon_class %>"}"></i>
      </div><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="post-label-pinned"><i class="icon icon-pushpin"></i>{pinned_text}</li> ';
        }}
        if (typeof(subscribed) != "undefined" && subscribed) {{
            labels += '<li class="post-label-following"><i class="icon icon-star"></i>{following_text}</li> ';
        }}
        if (staff_authored) {{
            labels += '<li class="post-label-by-staff"><i class="icon icon-user"></i>{staff_text}</li> ';
        }}
        if (community_ta_authored) {{
            labels += '<li class="post-label-by-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">
        <%
        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-template">
    <form class="forum-new-post-form">
        <ul class="post-errors" style="display: none"></ul>
        <div class="forum-new-post-form-wrapper"></div>
        ${'<% if (cohort_options) { %>'}
        <div class="post-field">
            <label class="field-label">
                <span class="field-label-text">
                    ## Translators: This labels the selector for which group of students can view a post
                    ${_("Visible To:")}
                </span><select class="field-input js-group-select" 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>
            </label><div class="field-help">
                ${_("Discussion admins, moderators, and TAs can make their posts visible to all students or specify a single cohort group.")}
            </div>
        </div>
        ${'<% } %>'}
        <div class="post-field">
            <label class="field-label">
                <span class="sr">${_("Title:")}</span>
                <input type="text" class="field-input js-post-title" name="title" placeholder="${_('Title')}">
            </label><span class="field-help">
                ${_("Add a clear and descriptive title to encourage participation.")}
            </span>
        </div>
        <div class="post-field js-post-body editor" name="body" data-placeholder="${_(u'Enter your question or comment…')}"></div>
        <div class="post-options">
            <label class="post-option is-enabled">
                <input type="checkbox" name="follow" class="post-option-input js-follow" checked>
                <i class="icon icon-star"></i>${_("follow this post")}
            </label>
            ${'<% if (allow_anonymous) { %>'}
            <label class="post-option">
                <input type="checkbox" name="anonymous" class="post-option-input js-anon">
                ${_("post anonymously")}
            </label>
            ${'<% } %>'}
            ${'<% if (allow_anonymous_to_peers) { %>'}
            <label class="post-option">
                <input type="checkbox" name="anonymous_to_peers" class="post-option-input js-anon-peers">
                ${_("post anonymously to classmates")}
            </label>
            ${'<% } %>'}
        </div>
        <div>
            <input type="submit" class="submit" value="${_('Add Post')}">
            <a href="#" class="cancel">${_('Cancel')}</a>
        </div>
    </form>
</script>

<script aria-hidden="true" type="text/template" id="thread-type-template">
    <div class="post-field">
        <div class="field-label">
            <span class="field-label-text">
                ## Translators: This is the label for a control to
                ## select a forum post type
                ${_("Post type:")}
            </span><fieldset class="field-input">
                <input type="radio" name="${"<%= form_id %>"}-post-type" class="post-type-input" id="${"<%= form_id %>"}-post-type-question" value="question">
                <label for="${"<%= form_id %>"}-post-type-question" class="post-type-label">
                    <i class="icon icon-question"></i>
                    ## Translators: This is a forum post type
                    ${_("Question")}
                </label>
                <input type="radio" name="${"<%= form_id %>"}-post-type" class="post-type-input" id="${"<%= form_id %>"}-post-type-discussion" value="discussion" checked>
                <label for="${"<%= form_id %>"}-post-type-discussion" class="post-type-label">
                    <i class="icon icon-comments"></i>
                    ## Translators: This is a forum post type
                    ${_("Discussion")}
                </label>
            </fieldset>
        </div><span class="field-help">
            ${_("Questions raise issues that need answers. Discussions share ideas and start conversations.")}
        </span>
    </div>
</script>

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

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

<script aria-hidden="true" type="text/template" id="topic-template">
    ## Using div here instead of label because we are using a non-native control
    <div class="field-label">
        <span class="field-label-text">${_("Topic Area:")}</span><div class="field-input post-topic">
            <a href="#" class="post-topic-button">
                <span class="sr">${_("Discussion topics; current selection is: ")}</span>
                <span class="js-selected-topic"></span>
                <span class="drop-arrow" aria-hidden="true">▾</span>
            </a>
            <div class="topic-menu-wrapper">
                <label class="topic-filter-label">
                    <span class="sr">${_("Filter topics")}</span>
                    <input type="text" class="topic-filter-input" placeholder="${_('Filter topics')}">
                </label>
                <ul class="topic-menu" role="menu">${'<%= topics_html %>'}</ul>
           </div>
       </div>
    </div><span class="field-help">
        ${_("Add your post to a relevant topic to help others find it.")}
    </span>
</script>

<%def name="primaryAction(action_class, icon, sr_label, unchecked_label, checked_label)">
    <script type="text/template" id="forum-action-${action_class}">
        <li class="actions-item">
            <a href="javascript:void(0)" class="action-button action-${action_class}" role="checkbox" aria-checked="false">
                <span class="sr">${sr_label}</span>
                <span class="action-label" aria-hidden="true">
                    <span class="label-unchecked">${unchecked_label}</span>
                    <span class="label-checked">${checked_label}</span>
                </span>
                <span class="action-icon"><i class="icon icon-${icon}"></i></span>
            </a>
        </li>
    </script>
</%def>

${primaryAction("endorse", "ok", _("Endorse"), _("Endorse"), _("Unendorse"))}
${primaryAction("answer", "ok", _("Mark as Answer"), _("Mark as Answer"), _("Unmark as Answer"))}
${primaryAction("follow", "star", _("Follow"), _("Follow"), _("Unfollow"))}

<script type="text/template" id="forum-action-vote">
    <li class="actions-item">
        <a href="#" class="action-button action-vote" role="checkbox" aria-checked="false">
            ## Vote counts are populated by JS
            <span class="sr">${_("Vote")}</span>
            <span class="sr js-sr-vote-count"></span>

            <span class="action-label" aria-hidden="true">
              <span class="js-visual-vote-count"></span>
            </span>

            <span class="action-icon" aria-hidden="true">
                <i class="icon icon-plus"></i>
            </span>
        </a>
    </li>
</script>

<%def name="secondaryStateAction(action_class, icon, sr_label, unchecked_label, checked_label)">
    <script type="text/template" id="forum-action-${action_class}">
        <li class="actions-item">
            <a href="javascript:void(0)" class="action-list-item action-${action_class}" role="checkbox" aria-checked="false">
                <span class="sr">${sr_label}</span>
                <span class="action-label" aria-hidden="true">
                    <span class="label-unchecked">${unchecked_label}</span>
                    <span class="label-checked">${checked_label}</span>
                </span>
                <span class="action-icon">
                  <i class="icon icon-${icon}"></i>
                </span>
            </a>
        </li>
    </script>
</%def>

${secondaryStateAction("report", "flag", _("Report abuse"), _("Report"), _("Unreport"))}
${secondaryStateAction("pin", "pushpin", _("Pin"), _("Pin"), _("Unpin"))}
${secondaryStateAction("close", "lock", _("Close"), _("Close"), _("Open"))}

<%def name="secondaryAction(action_class, icon, label)">
    <script type="text/template" id="forum-action-${action_class}">
        <li class="actions-item">
            <a href="javascript:void(0)" class="action-list-item action-${action_class}" role="button">
                <span class="action-label">${label}</span>
                <span class="action-icon"><i class="icon icon-${icon}"></i></span>
            </a>
        </li>
    </script>
</%def>

${secondaryAction("edit", "pencil", _("Edit"))}
${secondaryAction("delete", "remove", _("Delete"))}

<script type="text/template" id="forum-actions">
    <ul class="${"<%= contentType %>"}-actions-list">
        ${"<% _.each(primaryActions, function(action) { print(_.template($('#forum-action-' + action).html(), {})) }) %>"}
        <li class="actions-item is-visible">
            <div class="more-wrapper">
                <a href="javascript:void(0)" class="action-button action-more" role="button" aria-haspopup="true" aria-controls="action-menu-${"<%= contentId %>"}">
                    <span class="action-label">${_("More")}</span>
                    <span class="action-icon"><i class="icon icon-ellipsis-horizontal"></i></span>
                </a>
                <div class="actions-dropdown" id="action-menu-${"<%= contentType %>"}" aria-expanded="false">
                  <ul class="actions-dropdown-list">
                    ${"<% _.each(secondaryActions, function(action) { print(_.template($('#forum-action-' + action).html(), {})) }) %>"}
                  </ul>
                </div>
            </div>
        </li>
    </ul>
</script>

<script aria-hidden="true" type="text/template" id="post-user-display-template">
    ${"<% if (username) { %>"}
    <a href="${'<%- user_url %>'}" class="username">${'<%- username %>'}</a>
        ${"<% if (is_community_ta) { %>"}
        <span class="user-label-community-ta">${_("Community TA")}</span>
        ${"<% } else if (is_staff) { %>"}
        <span class="user-label-staff">${_("Staff")}</span>
        ${"<% } %>"}
    ${"<% } else { %>"}
    ${_('anonymous') | h}
    ${"<% } %>"}
</script>
