{% load spirit_tags i18n %}

<div class="layout__topics">
  {% for t in topics %}
    <div class="layout__topics__topic js-clickable-area">
      <div class="topic__title">
        {% if t.is_pinned or t.is_globally_pinned %}
          <i class="fa fa-thumb-tack"></i>
        {% endif %}
        {% if t.is_closed %}
          <i class="fa fa-lock"></i>
        {% endif %}
        <a
          class="topic__link{% if t.is_visited %} is-visited{% endif %} js-clickable-area-target"
          href="{{ t.get_bookmark_url }}"
        >{{ t.title }}</a>
      </div>
      <div class="topic__category">
        {% if show_subcategory %}
          <a
            {% if t.category.color %}style="color: {{ t.category.color }};"{% endif %}
            href="{{ t.category.get_absolute_url }}"
          >{{ t.category.title }}</a>
        {% else %}
          {% if t.category.parent %}
            <a
              {% if t.category.parent.color %}style="color: {{ t.category.parent.color }};"{% endif %}
              href="{{ t.category.parent.get_absolute_url }}"
            >{{ t.category.parent.title }}</a>
          {% else %}
            <a
              {% if t.category.color %}style="color: {{ t.category.color }};"{% endif %}
              href="{{ t.category.get_absolute_url }}"
            >{{ t.category.title }}</a>
          {% endif %}
        {% endif %}
      </div>
      <div class="topic__comments">
        <i class="fa fa-comment{% if t.has_new_comments %} js-comment-is-new{% endif %}"
        ></i> {{ t.comment_count }}
      </div>
      <div class="topic__date" title="{{ t.last_active }}">
        <i class="fa fa-clock-o"
        ></i> {{ t.last_active|shortnaturaltime }}
      </div>
    </div>
    {% empty %}
    <p>{% trans "There are no topics here, yet" %}</p>
  {% endfor %}
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // .is_new depends on js (bookmarks)
    document.querySelectorAll('.js-comment-is-new')
      .forEach(function(elm) {
        elm.classList.add('is-new');
      });
  });
</script>
