macros.html

<!-- Note: this is a div, not a li -->
{% macro renderJoinStatus(status) %}
  {% if status %}
    <div class="join-status join-status-{{ status }}" style="display: inline-block;">
      <abbr title="{{ status | expandJoinStatus }}" data-toggle="tooltip">
        {{ status | capitalize }}
      </abbr>
    </div>
  {% endif %}
{% endmacro %}

{# minimal is optional boolean #}

{% macro onlineStatus(ctx, user, minimal = false, deghost = false) %}
  {% if user.is_ghost and not deghost and user.last_online_at and Date.now() - user.last_online_at.getTime() < 1000 * 60 * 60 * 24 %}
    <span class="text-muted" style="display: inline-block;">
      {% if not minimal %}Seen{% endif %}
       0-24 hrs ago
      <img src="/img/ghost.png" width="14" height="11" title="Ghost mode">
    </span>
  {% elif user.last_online_at %}
    {% if Date.now() - user.last_online_at.getTime() < 1000 * 60 * 15 %}
      <span style="color: #3BB878">Online</span>
    {% else %}
      <span class="text-muted">
        {% if not minimal %}Seen{% endif %}
        {{ timeago(user.last_online_at) }}
      </span>
    {% endif %}
  {% else %}
    <span style="color: #555">
      {% if minimal %}
        MIA
      {% else %}
        Offline since relaunch
      {% endif %}
    </span>
  {% endif %}
{% endmacro %}

{% macro renderPost(ctx, post) %}
  {% if post.html %}
    <div class="post-body-html post-content">{{ post.html | safe }}</div>
  {% elif post.legacy_html %}
    <div class="post-body-html post-content">{{ post.legacy_html | safe }}</div>
  {% else %}
    <div class="post-body post-content">{{ post.text }}</div>
  {% endif %}
{% endmacro %}

{% macro renderSig(ctx, user) %}
  {% if ctx.currUser and user.sig_html and not ctx.currUser.hide_sigs %}
    <div class="post-sig-legacy post-sig">{{ user.sig_html | safe }}</div>
  {% endif %}
{% endmacro %}

{% macro renderUserbitSmall(ctx, user) %}
    <div class="media">
      {% if user.avatar_url and not ctx.currUser.hide_avatars %}
        <a class="media-left" href="{{ user.url }}">
          <img class="avatar-img {% if ctx.currUser.is_grayscale %}desaturate{% endif %}"
               src="{{ user.avatar_url_sm }}"
               alt="Avatar of {{ user.uname }}"
               title="Avatar of {{ user.uname }}"
               >
        </a>
      {% endif %}
      <div class="media-body" style="text-align: left;">
        <h4 class="media-heading" style="margin-bottom: 0;">
          <a href="{{ user.url }}">
            {{ user.uname }}
          </a>
          {% if user.custom_title %}
            <small><span class="text-muted">{{ user.custom_title | replaceTitleNewlinesMobile | safe }}</span></small>
          {% endif %}
        </h4>
        <div class="pull-left">
          {{ user.role | presentUserRole }}
          {{ onlineStatus(ctx, user) }}
        </div>
      </div>
    </div>
{% endmacro %}

{% macro renderCyberpunkUserbitLarge(ctx, user) %}
  <fieldset class="cyberpunk">
    <legend>
      <a href="{{ user.url }}">
        {{ user.uname }}
      </a>
    </legend>
    {% if user.custom_title %}
      <span class="user-custom-title negate-bg">{{ user.custom_title | replaceTitleNewlines | safe }}</span><br>
    {% endif %}


    {% if user.avatar_url and not ctx.currUser.hide_avatars %}
      <div class="post-avatar"
           style="margin-top: 10px;">
        <img class="avatar-img {% if ctx.currUser.is_grayscale %}desaturate{% endif %}"
             style="max-width: 80%;"
             src="{{ user.avatar_url}}"
             alt="Avatar of {{ user.uname }}"
             title="Avatar of {{ user.uname }}">
      </div>
    {% endif %}

    <table style="width: 100%;">
      <tr>
        <td class="L">Role</td>
        <td class="R">{{ user.role | presentUserRole }}</td>
      </td>
      <tr>
        <td class="L">Posts</td>
        <td class="R">{{ user.posts_count }}</td>
      </td>
      <tr>
        <td class="L">Days</td>
        <td class="R"> {{ user.created_at | daysAgo}}</td>
      </td>
    </table>

    {% if user.is_ghost %}
      {% if can(ctx.currUser, 'READ_USER_ONLINE_STATUS', user) %}
        <span class="negate-bg" style="color: white;">INVISIBLE</span>
      {% endif %}
    {% else %}
      {% if Date.now() - user.last_online_at.getTime() < 1000 * 60 * 15 %}
        <span class="warn">ONLINE</span>
      {% else %}
        {% if user.last_online_at %}
          <span class="negate-bg" style="color: white;">
            LAST SEEN
            <span style="text-transform: uppercase; border: none; color: white;">
              {{ timeago(user.last_online_at) }}
            </span>
          </span>
        {% else %}
          <span class="negate-bg" style="color: #555">
            OFFLINE SINCE RELAUNCH
          </span>
        {% endif %}
      {% endif %}
    {% endif %}


  </fieldset>
{% endmacro %}

{% macro renderOriginalUserbitLarge(ctx, user) %}
  <div class="user-uname">
    <a href="{{ user.url }}">
      {{ user.uname }}
    </a>
  </div>

  {% if user.custom_title %}
    <div class="user-custom-title text-muted">
      {{ user.custom_title | replaceTitleNewlines | safe }}
    </div>
  {% endif %}

  {% if user.active_trophy_id == 2 %}
    <div style="color: #e67e22; font-weight: bold; font-family: Georgia,Times,'Times New Roman',serif;">
      Nemean Assassin
    </div>
  {% endif %}

  {% if user.active_trophy_id == 7 %}
    <div style="color: #9b59b6; font-weight: bold; font-family: Georgia,Times,'Times New Roman',serif;">
      Lernaean Exile
    </div>
  {% endif %}

  {% if user.active_trophy_id == 22 %}
    <div style="color: #2ecc71; font-weight: bold; font-family: Georgia,Times,'Times New Roman',serif;">
      Ceryneian Huntsman
    </div>
  {% endif %}

  {% if user.active_trophy_id == 38 %} {# FIXME: just copied this color from prev trophy #}
    <div style="color: #2ecc71; font-weight: bold; font-family: Georgia,Times,'Times New Roman',serif;">
      Pride of Augeas
    </div>
  {% endif %}

  {# TODO: set unique colors for these awards #}
  {# FIXME: just copied this color from prev trophies #}

  {% if user.active_trophy_id == 40 %}
    <div style="color: #2ecc71; font-weight: bold; font-family: Georgia,Times,'Times New Roman',serif;">
      Stymphalian Questor
    </div>
  {% endif %}

  {% if user.active_trophy_id == 42 %}
    <div style="color: #2ecc71; font-weight: bold; font-family: Georgia,Times,'Times New Roman',serif;">
      Audacious Cretan
    </div>
  {% endif %}

  {% if user.active_trophy_id == 44 %}
    <div style="color: #2ecc71; font-weight: bold; font-family: Georgia,Times,'Times New Roman',serif;">
      Thracian Slayer
    </div>
  {% endif %}

  {% if user.avatar_url and not ctx.currUser.hide_avatars %}
    <div class="post-avatar"
         style="margin-top: 10px;">
      <a href="{{ user.url }}">
        <img class="avatar-img {% if ctx.currUser.is_grayscale %}desaturate{% endif %}"
            src="{{ user.avatar_url}}"
            alt="Avatar of {{ user.uname }}"
            title="Avatar of {{ user.uname }}"
        >
      </a>
    </div>
  {% endif %}

  <div class="user-role" style="margin-top: 10px;">
    {% if user.id == 10 %}
      <img src="/bling/10-sora/legacy.gif">
      <img src="/bling/10-sora/member.gif">
      <br>
      <img src="/bling/10-sora/forever.gif">
    {% elif user.role == 'member' %}
    {% else %}
      {{ user.role | presentUserRole }}
    {% endif %}
  </div>

  <div class="user-stats">
    {{ user.posts_count }} posts
    <div style="display: inline-block;">in {{ user.created_at | daysAgo}} days</div>
  </div>

<!-- Online status -->

  {{ onlineStatus(ctx, user) }}
{% endmacro %}

{% macro renderUserbitLarge(ctx, user)  %}

  {% if user.active_trophy_id == 1 %}
    {{ renderCyberpunkUserbitLarge(ctx, user) }}
  {% else %}
    {{ renderOriginalUserbitLarge(ctx, user) }}
  {% endif %}

  <!-- User gylphs -->

  {% if user.has_bio or user.bio_markup or user.current_status %}
    <div class="user-glyphs">

      <!-- Bio -->

      {% if user.has_bio or user.bio_markup %}
        <a href="{{ user.url }}#bio" class="btn btn-default btn-xs">
          Bio
        </a>
      {% endif %}

      <!-- Status -->

      {% if user.current_status %}
        <a class="btn btn-xs btn-default status-btn"
           tabindex="0"
           role="button"
           data-container="body"
           data-toggle="popover"
           data-placement="right"
           data-title="Status"
           data-text="{{ user.current_status.html }}"
           data-iso-string="{{ user.current_status.created_at.toISOString()}}"
        >
          <span class="glyphicon glyphicon-comment"
                style="display: inline-block"></span>
          {# Show timeago only if created within 3 days #}

          {% if user.current_status.created_at|isNewerThan({ days: 3 }) %}
            {{ timeago(user.current_status.created_at) }}
          {% endif %}
        </a>
      {% endif %}

    </div>
  {% endif %}
{% endmacro %}

{% macro renderViewers(viewers, startHidden) %}
  {% set userCount = viewers.users.length %}
  {% set guestCount = viewers.guests.length %}
  {% if userCount > 0 or guestCount > 0 %}
    <div class="viewers">
      {% if userCount > 0 %}
        {{ userCount }} User{% if userCount > 1 %}s{% endif %}
      {% endif %}
      {% if userCount > 0 and guestCount > 0%}
        and
      {% endif %}
      {% if guestCount > 0 %}
        {{ guestCount }} Guest{% if guestCount > 1 %}s{% endif %}
      {% endif %}
      viewing this page

      {% if userCount > 0 %}
      <button type="button" class="viewers-list-btn btn btn-default btn-xs">
        {% if startHidden %}
          Show
        {% else %}
          Hide
        {% endif %}
      </button>
      {% endif %}

      <br>
      <ul class="list-inline viewers-list"
          {% if startHidden %}
            style="display: none;"
          {% endif %}
          >
        {% for viewer in viewers.users %}<li><a href="/users/{{ viewer.uname|slugifyUname }}">{{ viewer.uname }}</a>{% if not loop.last %},{% endif %}</li>{% endfor %}
      </ul>
    </div>
  {% endif %}
{% endmacro %}

{% macro renderTagInputs(tagGroups, selectedTagIds) %}
  {% set selectedTagIds = selectedTagIds or [] %}

  <input type="hidden" name="tag-ids[]" value="-1">
  {% for group in tagGroups %}
    <div class="row">
      <div class="col-sm-2 text-center">
        {{ group.title }}:
      </div><!--/col1-->

      <div class="col-sm-10">
        <div class="btn-group" data-toggle="buttons">
          {% for tag in group.tags %}
            <label class="btn btn-default btn-xs {% if tag.id|isIn(selectedTagIds) %}active{% endif %}"
                   data-toggle="tooltip" title="{{ tag.description }}">
              <input name="tag-ids[]" type="checkbox" autocomplete="off" value="{{ tag.id }}" {% if tag.id|isIn(selectedTagIds) %}checked="checked"{% endif %}>
              {{ tag.title }}
            </label>
          {% endfor %}
       </div><!--/btn-group-->
      </div><!--/col2-->
    </div><!--/row-->
  {% endfor %}
{% endmacro %}

{% macro renderSidebar(ctx, latestChecks, latestRoleplays, latestStatuses, currentContest, friendships, latest_rpgn_topic) %}

  <!-- Junk drawer links -->

  {#
  <a href="http://widget02.mibbit.com/?settings=c2129339a43d8c49d86c34fa8dff7610&server=irc.foonetic.net&channel=%23Roleplayerguild" class="btn btn-default btn-sm btn-block" target="_blank" style="position: relative;">
    <img src="/img/icon-irc.png" width="22" height="22" style="position: absolute; left: 5px; top: 3px;">
    <span style="color: #fff; display: inline-block; margin-left: 10px;">
      IRC Chat
    </span>
  </a>
  #}

  {% if config.RULES_POST_ID %}
    <a href="/rules" class="btn btn-default btn-sm btn-block" style="margin-bottom: 10px; position: relative;">
      <img src="/img/music.png" width="22" height="22" style="position: absolute; left: 5px; top: 3px;" alt="Scroll icon">
      <span style="color: #fff; display: inline-block; margin-left: 10px;">
        Rules of the Guild
      </span>
    </a>
  {% endif %}

  <a href="https://www.facebook.com/groups/343860060223/" class="btn btn-default btn-sm btn-block" style="margin-bottom: 10px; position: relative;" target="_blank">
    <img src="/img/fb_button.png" width="22" height="22" style="position: absolute; left: 5px; top: 3px;" alt="FB logo">
    <span style="color: #fff; display: inline-block; margin-left: 10px;">
      Our FB Group
    </span>
  </a>

  <a href="/campaigns" class="btn btn-default btn-sm btn-block"
     style="margin-bottom: 10px; position: relative;"
  >
    <img src="/img/dice/dice.png" width="22" height="22" style="position: absolute; left: 5px; top: 3px;" alt="Dice icon">
    <span style="color: #fff; display: inline-block; margin-left: 10px;">
      Dice
    </span>
  </a>

  <!-- Latest RPGN -->

  {% if latest_rpgn_topic %}
  <div class="panel panel-default" style="background: transparent;">
    <div class="panel-body">
      <h4 style="margin-bottom: 20px;" class="text-center">
        Latest Newsletter
      </h4>
      <div class="">
        {% if config.LATEST_RPGN_IMAGE_URL %}
          <a href="{{ latest_rpgn_topic.url }}">
            <img src="{{ config.LATEST_RPGN_IMAGE_URL }}" style="max-width: 100%;">
          </a>
        {% else %}
          <a href="{{ latest_rpgn_topic.url }}">
            {{ latest_rpgn_topic.title }}
          </a>
        {% endif %}

        <div class="text-center text-muted">
          Posted
          {{ timeago(latest_rpgn_topic.created_at) }}
          {% if latest_rpgn_topic.created_at|isNewerThan({ days: 4 }) %}
            <span style="color: #00a9a9; font-size: 75%;"><span style="border: 1px solid #51e0db; padding: 0px 3px;">FRESH</span></span>
          {% endif %}
        </div>

        <hr>

            Latest post:
            <a href="/users/{{ latest_rpgn_topic.latest_user.slug }}" style="color:white;text-decoration:underline;display:inline-block;">{{ latest_rpgn_topic.latest_user.uname }}</a>
                      <a href="/topics/{{ latest_rpgn_topic.latest_post.topic_id }}/ooc/first-unread" class="btn btn-default btn-xs">Go &rarr;</a>

            <br>
            {{ timeago(latest_rpgn_topic.lastest_post.created_at) }}
      </div>
    </div>
  </div>
  {% endif %}

  <!-- Current contest -->

  {% if ctx.currUser.role|isIn(['admin', 'conmod']) %}
    <a href="/current-sidebar-contest" class="text-muted text-center" style="display: block;">
      Manage Current Contest
    </a>
  {% endif %}

  {% if currentContest %}
    <div class="panel panel-default" style="background: transparent;">
      <div class="panel-body">
        <h4 style="margin-bottom: 20px;" class="text-center">
          <img src="/img/trophy.png" height="32" width="32"
              alt="Contests Icon"
              title="Contests Icon"> Current Contest
        </h4>
        <div class="text-center">
          <!-- Link to contest -->
          <a href="{{ currentContest.topic_url }}">{{ currentContest.title }}</a>
          <!-- Prompt -->

          <a href="{{ currentContest.topic_url }}">
            {% if currentContest.image_url %}
              <img style="max-width: 100%; border: 3px solid #333;" src="{{ currentContest.image_url }}" alt="Contest art">
            {% endif %}
          </a>

          <!-- Deadline -->
          <!-- <div style="margin-top: 15px;" class="text-muted text-left"><small>Submit entry by: <u>March 18th</u></small></div> -->
          <div style="margin-top: 15px;" class="text-muted text-left"><small>Submit entry by: <u>{{ currentContest.deadline }}</u></small></div>
          <!-- <hr> -->
          <!-- <p><small>The contest is now closed to submissions.<br>We need your help to determine the winner.</small></p> -->

          <!-- <a class="btn btn-primary btn-xs" href="http://www.roleplayerguild.com/topics/83022-rpgc-3-voting-and-discussion/ooc">Vote & Discuss</a> -->
          <!-- <a class="btn btn-primary btn-xs" href="http://www.roleplayerguild.com/topics/83022-rpgc-3-voting-and-discussion/ooc">Vote</a> -->
          <!-- <a class="btn btn-default btn-xs" href="http://www.roleplayerguild.com/topics/83022-rpgc-3-voting-and-discussion/ooc">Discuss</a> -->

        </div>
      </div>
    </div>
  {% endif %}

  <!-- Friends -->

  {% if ctx.currUser %}
  <div class="panel panel-default" style="background: transparent;">
    <div class="panel-body">
      <h4 style="margin-bottom: 20px;" class="text-center">
        Your Friends
        {% if friendships.count > 0 %}
          <br>
          <small>10 Most Recent</small>
        {% endif %}
      </h4>
      {% if friendships.count > 0 %}
        <div class="row small">
        {% for friendship in friendships.ghosts %}
          {% set friend = friendship.to_user %}
          <div class="col-md-6" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
            <a href="{{ friend.url }}" style="color: #999">
              {{ friend.uname }}
            </a>
          </div>
          <div class="col-ms-6 text-right">
            {{ onlineStatus(ctx, friend, true) }}
          </div>
        {% endfor %}

        {% if friendships.ghosts.length > 0 and friendships.nonghosts.length > 0 %}
          <hr>
        {% endif %}

        {% for friendship in friendships.nonghosts %}
          {% set friend = friendship.to_user %}
          <div class="col-md-6" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
            <a href="{{ friend.url }}" style="color: #999">
              {{ friend.uname }}
            </a>
          </div>
          <div class="col-md-6 text-right">
              {{ onlineStatus(ctx, friend, true, friendship.is_mutual) }}
          </div>
        {% endfor %}
        </div>
        {% set friend = undefined %}

        {% if friendships.count > 0 %}
          <a href="/me/friendships" style="display: block;" class="text-center text-muted">
            View All
          </a>
        {% endif %}
      {% else %}
        <div class="text-center">
          You have no friends<br>
          <small class="text-muted">
          To get started, go to anyone's profile, click "Add Friend", and then
          return to this box.
          </small>
        </div>
      {% endif %}

    </div><!-- /panel-body -->
  </div><!-- /panel -->
  {% endif %}


  <!-- Recent user statuses -->

  <div class="panel panel-default statuses-box" style="background: transparent; position: relative;">
    <div class="panel-body">
      <button type="button"
              class="btn btn-default btn-xs pull-right toggle-statuses"
              title="Hide/Show Statuses"
              style="position: absolute; top: 0; right: 0;"
              {% if ctx.cookies.get('collapse-statuses') %}
                data-is-collapsed="true"
              {% endif %}
      >
        {% if ctx.cookies.get('collapse-statuses') %}
          <span class="glyphicon glyphicon-plus"></span>
        {% else %}
          <span class="glyphicon glyphicon-minus"></span>
        {% endif %}
      </button>
      <h4 style="margin-bottom: 20px;" class="text-center">
        <span class="glyphicon glyphicon-comment"></span>
        Latest Statuses
      </h4>

      <div class="collapsible" style="{{ 'display: none;' if ctx.cookies.get('collapse-statuses') }}">

      {% if latestStatuses.length == 0 %}
        <div class="text-center">-- None --</div>
      {% endif %}

      {% for status in latestStatuses %}
        <div class="status-item status-{{ status.id }}" style="font-size: 90%;">
          <div class="media" style="margin-top: 0; margin-bottom: 10px;">
            {% if status.user.avatar_url %}
              <div class="media-left">
                <a href="{{ status.user.url }}">
                  <img height="32" src="{{ status.user.avatar_url_sm }}" class="media-object" alt="Avatar of {{ status.user.uname }}">
                </a>
              </div>
            {% endif %}
            <div class="media-body" style="vertical-align: middle;">
              <a href="{{ status.user.url }}" style="color: #999;">{{ status.user.uname }}</a>
              <span class="text-muted" style="display: inline-block;">
                {{ timeago(status.created_at) }}
              </span>
            </div>
          </div>

          <div style="word-wrap: break-word;">
            {{ status.html|safe }}
          </div>

          <!-- Like button -->
          <span class="like-status-action text-muted">
            {% if ctx.currUser.id|isIn(status.liked_user_ids) %}
              You liked this -
            {% endif %}
            {% if can(ctx.currUser, 'LIKE_STATUS', status) %}
                {% if not (ctx.currUser.id|isIn(status.liked_user_ids)) %}
                  <button type="button"
                          class="btn btn-default btn-xs like-status-btn"
                          data-status-id="{{ status.id }}">
                    Like
                  </button>
                {% endif %}
            {% endif %}
          </span>

          <!-- Like count -->
          <span class="text-muted">
            <span class="status-like-count">
              {% if status.liked_user_ids.length > 0 -%}
                {{ status.liked_user_ids.length }}
              {%- endif %}
            </span>
            <span class="status-like-count-suffix">
              {% if status.liked_user_ids.length > 0 %}
                like{% if status.liked_user_ids.length > 1 %}s{% endif %}
              {% endif %}
            </span>
          </span>

          {% if not loop.last %}<hr>{% endif %}
          {% if loop.last %}
            <hr>
            <a style="display: block;" class="text-center" href="/statuses">View More</a>
          {% endif %}
        </div><!-- /.status-item -->
      {% endfor %}

      </div><!-- /.collapsible -->
    </div><!-- /panel-body -->
  </div><!-- /panel-default -->

  <!-- Latest checks -->

  <div class="panel panel-default" style="background: transparent;">
    <a name="latest-checks"></a>
    <div class="panel-body">

      <h4 style="margin-bottom: 20px;" class="text-center">
        Latest Checks
        <a href="/refresh-homepage/latest-checks" class="text-muted" title="Refresh" rel="nofollow">
          <span class="glyphicon glyphicon-refresh"></span>
        </a>
      </h4>
      {% for topic in latestChecks %}
        <div>
          <a href="{{ topic.url }}">{{ topic.title }}</a>
          <div>
            by <a href="{{ topic.user.url }}" style="color: white;">{{ topic.user.uname }}</a>
            <span class="text-muted" style="display: inline-block;">
              &mdash;
              {{ timeago(topic.created_at) }}
            </span>
          </div>
          <div>
            {% for tag in topic.tags %}
              {{ tagLabel(tag) }}
            {% endfor %}
          </div>
        </div>
        {% if not loop.last %}<hr>{% endif %}
      {% endfor %}
    </div><!-- /panel-body -->
  </div><!-- /panel-default -->

  <!-- Latest Roleplays -->

  <div class="panel panel-default" style="background: transparent;">
    <a name="latest-roleplays"></a>
    <div class="panel-body">

      <h4 style="margin-bottom: 20px;" class="text-center">
        Latest Roleplays
        <a href="/refresh-homepage/latest-roleplays" class="text-muted" title="Refresh" rel="nofollow">
          <span class="glyphicon glyphicon-refresh"></span>
        </a>
      </h4>
      {% for topic in latestRoleplays %}
        <div>
          <a href="{{ topic.url }}">{{ topic.title }}</a>
          <div>
            by <a href="{{ topic.user.url }}" style="color: white;">{{ topic.user.uname }}</a>
            <span class="text-muted" style="display: inline-block;">
              &mdash;
              {{ timeago(topic.created_at) }}
            </span>
          </div>
          <div>
            {% if topic.join_status %}
              {{ renderJoinStatus(topic.join_status) }}
            {% endif %}
            {% for tag in topic.tags %}
              {{ tagLabel(tag) }}
            {% endfor %}
          </div>
        </div>
        {% if not loop.last %}<hr>{% endif %}
      {% endfor %}

    </div><!-- /panel-body -->
  </div><!-- /panel-default -->

{% endmacro %}

<!-- Item rendering -->

<!-- Roleplay items -->
{% macro renderRoleplayItemHeading(topic, forum) %}
  <div class="col-xs-1 hidden-xs"></div>
  <div class="col-xs-6 hidden-xs">Roleplays</div>
  <div class="col-xs-5 hidden-xs text-right">Latest Post</div>
  <div class="col-xs-6 visible-xs-block">Roleplays</div>
  <div class="col-xs-6 visible-xs-block text-right">Latest Post</div>
{% endmacro %}

{% macro renderRoleplayItem(topic, forum) %}
          <div class="list-group-item topic-item
                      {% if topic.has_posted %}
                        topic-item-current-user-posted
                      {% endif %}
                      "
               style="background-color: #3d3a3a; border: 1px solid #111; color: #fff;"
               {% if topic.has_posted %}
                title="You participated"
               {% endif %}
               >
            <div class="row">
              <div class="col-sm-1">
                {% if topic.join_status %}
                  <div class="join-status join-status-{{ topic.join_status }}">
                    <abbr title="{{ topic.join_status|expandJoinStatus }}" data-toggle="tooltip">
                      {{ topic.join_status|capitalize }}
                    </abbr>
                  </div>
                {% endif %}
              </div>
              <div class="col-sm-6">
                <h5 class="list-group-item-heading topic-panel-title">
                  {% if false and topic.moved_at and topic.moved_from_forum_id != forum.id %}
                    <span class="glyphicon glyphicon-share-alt" title="Moved" data-toggle="tooltip"></span>
                  {% endif %}
                  {% if topic.is_closed %}
                    <span class="glyphicon glyphicon-lock text-muted" title="Closed" data-toggle="tooltip"></span>
                  {% endif %}
                  {% if topic.is_hidden %}
                    <span class="label label-warning">Hidden</span>
                  {% endif %}
                  {% if topic.is_sticky %}
                    <span class="glyphicon glyphicon-pushpin" style="color: #2FAECE;" title="Sticky" data-toggle="tooltip"></span>
                  {% endif %}
                  <a href="{{ topic.url }}">{{ topic.title }}</a>
                </h5>
                <div class="list-group-item-text">
                  <div style="margin-top: 6px;">
                    by <a href="{{ topic.user.url }}" style="color: #fff">{{ topic.user.uname }}</a>,
                    {{ timeago(topic.created_at) }}
                  </div>
                  <!-- List topic tags -->
                  {% if topic.tags %}
                    <ul class="list-inline" style="margin: 0;">
                      {% for tag in topic.tags %}
                        <!-- Ignore tag if we're in the "tag's forum" -->
                        {% if tag.id != forum.tag_id %}
                          <li data-toggle="tooltip" title="{{ tag.description }}"
                              style="padding: 0;">
                            <span class="label label-default">{{ tag.title }}</span>
                          </li>
                        {% endif %}
                      {% endfor %}
                    </ul>
                  {% endif %}
                </div>
              </div> <!-- /col6 -->
              {% if false and topic.moved_at and topic.moved_from_forum_id != forum.id %}
                <div class="col-sm-6">
                  Moved to
                  <a href="/forums/{{ topic.forum_id }}">{{ topic.forum.title }}</a>
                  <div>
                    <span class="moved-at">
                      {{ timeago(topic.moved_at) }}
                    </span>
                  </div>
                </div> <!-- /col-6 -->
              {% else %}
                <div class="col-sm-2">
                  <div class="text-muted">{{ topic.posts_count|commafy }} Posts</div>
                </div>
                <!-- Latest post -->
                <div class="col-sm-3">
                  {% if topic.latest_post %}
                  <div class="latest-post text-right">
                    Latest:
                      by <a href="{{ topic.latest_user.url }}" style="color: #fff">{{ topic.latest_user.uname }}</a>
                    <a href="{{ topic.latest_post.url }}" class="btn btn-default btn-xs latest-post-btn">
                      &rarr;
                    </a>
                    <br>
                    {{ timeago(topic.latest_post.created_at) }}
                  </div>
                  {% else %}
                  <div class="text-right text-muted">
                    None
                  </div>
                  {% endif %}
                </div>
              {% endif %} <!-- /if moved -->
            </div> <!-- /.row -->
          </div> <!-- /.list-group-item -->
{% endmacro %}

<!-- Check items -->
{% macro renderCheckItemHeading(topic, forum) %}
  <div class="col-xs-7">
    {% if forum.is_roleplay %}
      Roleplays
    {% else %}
      Interest Checks
    {% endif %}
  </div>
  <div class="col-xs-5 text-right">Latest Post</div>
{% endmacro %}

{% macro renderCheckItem(topic, forum) %}
          <div class="list-group-item topic-item
                      {% if topic.has_posted %}
                        topic-item-current-user-posted
                      {% endif %}
                      {% if topic.is_sticky %}
                        topic-item-sticky
                      {% endif %}
                      "
                {% if topic.has_posted %}
                  title="You participated"
                {% endif %}
          >
            <div class="row">
              <div class="col-sm-6">
                <h5 class="list-group-item-heading topic-panel-title">
                  {% if false and topic.moved_at and topic.moved_from_forum_id != forum.id %}
                    <span class="glyphicon glyphicon-share-alt" title="Moved" data-toggle="tooltip"></span>
                  {% endif %}
                  {% if topic.is_closed %}
                    <span class="glyphicon glyphicon-lock text-muted" title="Closed" data-toggle="tooltip"></span>
                  {% endif %}
                  {% if topic.is_hidden %}
                    <span class="label label-warning">Hidden</span>
                  {% endif %}
                  {% if topic.is_sticky %}
                    <span class="glyphicon glyphicon-pushpin" style="color: #2FAECE;" title="Sticky" data-toggle="tooltip"></span>
                  {% endif %}
                  <a href="{{ topic.url }}"
                     class="topic-title-link
                            {% if topic.unread_posts %}
                              has-unread-posts
                            {% endif %}
                            "
                  >
                    {{ topic.title }}
                  </a>

                </h5>
                <div class="list-group-item-text">
                  <div style="margin-top: 6px;">
                    by <a href="{{ topic.user.url }}" style="color: #fff">{{ topic.user.uname }}</a>,
                    {{ timeago(topic.created_at) }}
                    {% if topic.created_at|isNewerThan({ days: 1 }) %}
                      <span style="color: #00a9a9; font-size: 75%;">&#x27F5; <span style="border: 1px solid #51e0db; padding: 0px 3px;" data-toggle="tooltip" title="Started less than 24 hours ago">FRESH</span></span>
                    {% endif %}
                  </div>
                  <!-- List topic tags -->
                  {% if topic.tags or topic.join_status %}
                    <ul class="list-inline" style="margin: 2px 0 0 0;">
                      {% if topic.join_status %}
                        <li class="join-status join-status-{{ topic.join_status }}" style="padding-left: 0;">
                          <abbr title="{{ topic.join_status|expandJoinStatus }}" data-toggle="tooltip">
                            {{ topic.join_status|capitalize }}
                          </abbr>
                        </li>
                      {% endif %}
                      {% for tag in topic.tags %}
                        <!-- Ignore tag if we're in the "tag's forum" -->
                        {% if tag.id != forum.tag_id %}
                          <li data-toggle="tooltip" title="{{ tag.description }}"
                              style="padding: 0;">
                            <span class="label label-default">{{ tag.title }}</span>
                          </li>
                        {% endif %}
                      {% endfor %}
                    </ul>
                  {% endif %}
                </div>
              </div> <!-- /col6 -->
              {% if false and topic.moved_at and topic.moved_from_forum_id != forum.id %}
                <div class="col-sm-6">
                  Moved to
                  <a href="/forums/{{ topic.forum_id }}">{{ topic.forum.title }}</a>
                  <div>
                    {{ timeago(topic.moved_at) }}
                  </div>
                </div> <!-- /col-6 -->
              {% else %}
                <div class="col-sm-2">
                  <span class="text-muted">
                    {{ topic.posts_count|commafy }} Posts
                  </span>
                  {% if topic.unread_posts %}
                    <span class="unread-posts-tag" title="Unread posts">!</span>
                  {% endif %}
                </div>
                <!-- Latest post -->
                <div class="col-sm-4">
                  {% if topic.latest_post %}
                  <div class="latest-post text-right">
                    Latest:
                      <span class="by-line">
                        <a href="{{ topic.latest_user.url }}" style="color: #fff">{{ topic.latest_user.uname }}</a>
                      </span>
                    <a href="{{ topic.latest_post.url }}" class="btn btn-default btn-xs latest-post-btn" style="margin-left: 5px;">
                      &rarr;
                    </a>
                    <br>
                    {{ timeago(topic.latest_post.created_at) }}
                  </div>
                  {% else %}
                  <div class="text-right text-muted">
                    None
                  </div>
                  {% endif %}
                </div>
              {% endif %} <!-- /if moved -->
            </div> <!-- /.row -->
          </div> <!-- /.list-group-item -->
{% endmacro %}


<!-- Regular topics -->
{% macro renderTopicItemHeading(topic, forum) %}
  <div class="col-xs-6">Topics</div>
  <div class="col-xs-6 text-right">Latest Post</div>
{% endmacro %}

{% macro renderTopicItem(topic, forum) %}
          <div class="list-group-item topic-item
                      {% if topic.has_posted %}
                        topic-item-current-user-posted
                      {% endif %}
                      {% if topic.is_sticky %}
                        topic-item-sticky
                      {% endif %}
                      "
              {% if topic.has_posted %}
                title="You participated"
              {% endif %}
          >
            <div class="row">
              <div class="col-sm-6">
                <h5 class="list-group-item-heading topic-panel-title">
                  {% if false and topic.moved_at and topic.moved_from_forum_id != forum.id %}
                    <span class="glyphicon glyphicon-share-alt" title="Moved" data-toggle="tooltip"></span>
                  {% endif %}
                  {% if topic.is_closed %}
                    <span class="glyphicon glyphicon-lock text-muted" title="Closed" data-toggle="tooltip"></span>
                  {% endif %}
                  {% if topic.is_hidden %}
                    <span class="label label-warning">Hidden</span>
                  {% endif %}
                  {% if topic.is_sticky %}
                    <span class="glyphicon glyphicon-pushpin" style="color: #2FAECE;" title="Sticky" data-toggle="tooltip"></span>
                  {% endif %}
                  <a href="{{ topic.url }}">{{ topic.title }}</a>
                </h5>
                <div class="list-group-item-text">
                  <div style="margin-top: 6px;">
                    by <a href="{{ topic.user.url }}" style="color: #fff">{{ topic.user.uname }}</a>,
                    {{ timeago(topic.created_at) }}
                  </div>
                </div>
              </div> <!-- /col6 -->
              {% if false and topic.moved_at and topic.moved_from_forum_id != forum.id %}
                <div class="col-sm-6">
                  Moved to
                  <a href="/forums/{{ topic.forum_id }}">{{ topic.forum.title }}</a>
                  <div>
                    {{ timeago(topic.moved_at) }}
                  </div>
                </div> <!-- /col-6 -->
              {% else %}
                <div class="col-sm-2">
                  <span class="text-muted">{{ topic.posts_count|commafy }} Posts</span>
                  {% if topic.unread_posts %}
                    <span class="unread-posts-tag" title="Unread posts">!</span>
                  {% endif %}
                </div>
                <!-- Latest post -->
                <div class="col-sm-4">
                  {% if topic.latest_post %}
                  <div class="latest-post text-right">
                    Latest:
                      <span class="by-line">
                        <a href="{{ topic.latest_user.url }}" style="color: #fff">{{ topic.latest_user.uname }}</a>
                      </span>
                    <a href="{{ topic.latest_post.url }}" class="btn btn-default btn-xs latest-post-btn" style="margin-left: 5px;">
                      &rarr;
                    </a>
                    <br>
                    {{ timeago(topic.latest_post.created_at) }}
                  </div>
                  {% else %}
                  <div class="text-right text-muted">
                    None
                  </div>
                  {% endif %}
                </div>
              {% endif %} <!-- /if moved -->
            </div> <!-- /.row -->
          </div> <!-- /.list-group-item -->
{% endmacro %}


<!-- USER BAR -->


{% macro renderUserBar(ctx, showUname, clss) %}
  <div class="btn-group btn-group-sm {{ clss }}">
    <a href="/me/convos"
       class="btn btn-default navbar-btn">
      <span class="glyphicon glyphicon-envelope"></span>
      PMs
      {# Doing !==0 instead of >0 so user can see any bugs where
         notification count goes negative #}
      {% if ctx.currUser.convo_notifications_count > 0 %}
        <div class="badge">
          {{ ctx.currUser.convo_notifications_count | commafy }}
        </div>
      {% endif %}
    </a>
    <a href="/me/subscriptions"
       class="btn btn-default navbar-btn">
      <span class="glyphicon glyphicon-list"></span>
      Subs
      {% if ctx.currUser.sub_notifications_count > 0 %}
        <div class="badge">
          {{ ctx.currUser.sub_notifications_count | commafy }}
        </div>
      {% endif %}
    </a>
    {% if can(ctx.currUser, 'LEXUS_LOUNGE') %}
      <a href="/lexus-lounge"
         class="btn btn-default navbar-btn">
        <span class="glyphicon glyphicon-eye-open"></span>
        Mod
      </a>
    {% endif %}

    <a href="/me/notifications" class="btn btn-default navbar-btn">
      <span class="glyphicon glyphicon-bell"></span>
      {% if ctx.currUser.notifications_count > 0 %}
        <div class="badge">
          {{ ctx.currUser.notifications_count | commafy }}
        </div>
      {% endif %}
    </a>

    <a href="{{ ctx.currUser.url }}"
       class="btn btn-default navbar-btn">
      <span class="glyphicon glyphicon-user"></span>
      {% if showUname %}
        {{ ctx.currUser.uname }}
      {% else %}
        You
      {% endif %}
    </a>

  {% if ctx.currUser.alts.length %}
    <button style="width: 35px" name="accounts" onclick='this.querySelector("#accountsElement").classList.toggle("show")' class="btn btn-default navbar-btn dropdown">▼
      <div class="dropdown-content" id="accountsElement">
        {% for account in ctx.currUser.alts %}
          <a href="#" class="btn-default" onclick='fetch("/swapAccount", {method:"POST", headers:{"Content-Type":"application/json"}, body:JSON.stringify({uname:"{{ account.uname }}"})}).then(response => {location.reload()})'>{{ account.uname }}</a>
        {% endfor %}
      </div>
    </button>
  {% endif %}
  </div>

{% endmacro %}


{% macro renderVm(ctx, vm, profileUser) %}
    <a name="vm-{{ vm.id }}"></a>
    <div class="media" style="position:relative;overflow:hidden;" id="vm-{{ vm.id }}">
      <!-- ribbon if VM writer is also the profile owner -->
      {% if vm.from_user_id == vm.to_user_id %}
        <div class="corner-ribbon top-right">&nbsp;</div>
      {% endif %}
      <div class="media-left">
        <a href="{{ vm.from_user.url }}">
          {% if vm.from_user.avatar_url %}
            <img src="{{ vm.from_user.avatar_url }}" width="50" alt="Avatar of {{ vs.from_user.uname }}">
          {% else %}
            <img src="https://placehold.co/50x50" width="50" alt="Default avatar">
          {% endif %}
        </a>
      </div>
      <div class="media-body">
        <!-- meta row -->
        <div>
          <a href="{{ vm.from_user.url }}">{{ vm.from_user.uname }}</a>
          {{ timeago(vm.created_at) }}
        </div>

        <!-- content row -->
        {{ vm.html|safe }}

        <!-- controls row -->
          <div>
            {% if not vm.parent_vm_id and can(ctx.currUser, 'CREATE_VM') %}
            <button type="button" class="btn-link vm-reply-btn"
                    style="display: inline-block;"
                    data-vm-id={{ vm.id }}>
              Reply
            </button>
            {% endif %}

            {% if can(ctx.currUser, 'DELETE_VM', vm) %}
              <form method="POST" action="{{ vm.url }}"
                    style="display:inline-block;">
                <input type="hidden" name="_method" value="DELETE">
                <button type="submit" class="btn-link vm-delete-btn" style="color:#e74c3c">
                  Delete
                </button>
              </form>
            {% endif %}
          </div>

      </div><!-- /media-body -->

      {% if not vm.parent_vm_id %}
        <ul class="child-vms list-unstyled" style="margin-left: 60px;">
          {% for childVm in vm.child_vms%}
            <li>{{ renderVm(ctx, childVm, profileUser) }}</li>
          {% endfor %}
        </ul>
      {% endif %}
    </div>
{% endmacro %}



{# Created this for /roleplays. Didn't want to generalize the existing
   renderTagInputs yet.
#}
{% macro renderTagInputs2(tagGroups, selectedTagIds = []) %}
  {% for group in tagGroups %}
    <div class="row">
      <div class="col-sm-2 text-center">
        {{ group.title }}:
      </div>

      <div class="col-sm-10">
        <div class="btn-group" data-toggle="buttons">
          {% for tag in group.tags %}
            <label class="btn btn-default btn-xs {% if tag.id|isIn(selectedTagIds) %}active{% endif %}"
                   data-toggle="tooltip" title="{{ tag.description }}">
              <input name="tags" type="checkbox" autocomplete="off" value="{{ tag.id }}" {% if tag.id|isIn(selectedTagIds) %}checked="checked"{% endif %}>
              {{ tag.title }}
            </label>
          {% endfor %}
       </div>
      </div>
    </div>
  {% endfor %}
{% endmacro %}


{#
  a static replacement for timeago
#}
{% macro timeago (date, fresh = false) %}
  <abbr class="ago{% if fresh %} fresh{% endif %}" title="{{ date | formatDate }}">
    {{ ago(date) }}
  </abbr>
{% endmacro %}


{% macro tagLabel (tag) %}
  <span class="label label-default tag tag-{{ tag.slug }}"
        data-toggle="tooltip" title="{{ tag.description }}">
    {{ tag.title }}
  </span>
{% endmacro %}