{% load i18n %}
{% load forum_conversation_tags %}
{% load forum_member_tags %}
{% load forum_tracking_tags %}

{% if topics or not hide_if_empty %}
<div class="flex my-9">
  <div class="w-full">
    <div class="break-words rounded border card topiclist bg-charcoal border-1 border-slate">
      <div class="p-0 border-b border-slate">
        <div class="flex py-2 px-3 m-0">
          <div class="pl-0 w-2/3 text-sm uppercase topic-name-col">{% trans topic_list_title %}</div>
          <div class="w-1/6 text-sm text-center uppercase d-none d-md-block text-nowrap topic-count-col">{% trans "Replies" %}</div>
          <div class="w-1/6 text-sm text-center uppercase d-none d-md-block text-nowrap topic-count-col">{% trans "Views" %}</div>
          <div class="pr-0 w-1/6 text-sm uppercase d-none d-sm-block text-nowrap topic-last-post-col">{% trans "Last post" %}</div>
        </div>
      </div>
      <div class="p-0 card-body">{% if not force_all_unread and unread_topics == None %}{% get_unread_topics topics request.user as unread_topics %}{% endif %}
      {% for topic in topics %}
      <div class="flex py-2 px-3 m-0 border-b border-slate">
        <div class="pl-0 w-2/3 col-md-8 col-sm-9 col-xs-11 topic-name">
          <div class="float-right topic-inline-pagination d-none d-sm-block">{% topic_pages_inline_list topic %}</div>
          <table class="topic-data-table">
            <tr>
              <td class="pt-1 pr-3 align-top topic-icon {% if topic in unread_topics or force_all_unread %}unread{% endif %}">
                <i class="fas {% if topic.is_sticky %}fa-lightbulb{% elif topic.is_announce %}fa-info{% else %}fa-dot-circle{% endif %} fa-2x"></i>
              </td>
              <td class="align-top topic-name">
                <a href="{% url 'forum_conversation:topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}" class="text-xl topic-name-link">{{ topic.subject }}</a>{% if topic.is_locked %}&nbsp;<i class="fas fa-times-circle locked-indicator" title="{% trans 'This topic is locked' %}"></i>{% endif %}
                <div>
                  <div class="topic-created">
                  {% if topic.poster %}
                    {% url 'forum_member:profile' topic.poster_id as poster_url %}
                    {% blocktrans trimmed with poster_url=poster_url username=topic.poster|forum_member_display_name creation_date=topic.created %}
                      <span class="text-sm">By: <a href="{{ poster_url }}" class="text-orange">{{ username }}</a> on {{ creation_date }}</span>
                    {% endblocktrans %}
                  {% else %}
                    {% blocktrans trimmed with poster_username=topic.first_post.username creation_date=topic.created %}
                      <span class="text-sm">By: {{ poster_username }} on {{ creation_date }}</span>
                    {% endblocktrans %}
                  {% endif %}
                  </div>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <div class="py-2 w-1/6 text-center d-none d-md-block topic-count">{{ topic.posts_count|add:"-1" }}</div>
        <div class="py-2 w-1/6 text-center col-md-1 d-none d-md-block topic-count">{{ topic.views_count }}</div>
        <div class="py-2 w-1/6 col-md-2 col-sm-3 d-none d-sm-block topic-last-post">
        {% with last_post=topic.last_post %}
          {% if last_post.poster %}
            {% url 'forum_member:profile' last_post.poster_id as poster_url %}
            {% blocktrans trimmed with poster_url=poster_url username=last_post.poster|forum_member_display_name %}
              <span class="text-sm">By: <a href="{{ poster_url }}" class="text-orange">{{ username }}</a></span>
            {% endblocktrans %}
          {% else %}
            {% blocktrans trimmed with poster_username=last_post.username %}
              <span class="text-sm">By: {{ poster_username }}</span>
            {% endblocktrans %}
          {% endif %}
          &nbsp;<a href="{% url 'forum_conversation:topic' topic.forum.slug topic.forum.pk topic.slug topic.pk %}?post={{ last_post.pk }}#{{ last_post.pk }}"><i class="fas fa-arrow-circle-right"></i></a>
          <br />
          <small>{{ last_post.created }}</small>
        {% endwith %}
        </div>
      </div>
      {% empty %}
      <div class="py-2 px-3 m-0 row">
        <div class="p-0 col-12">
        {% if empty_message %}
          {{ empty_message }}
        {% else %}
          {% trans "There are no topics in this forum." %}
        {% endif %}
        </div>
      </div>
      {% endfor %}
      </div>
    </div>
  </div>
</div>
{% endif %}
