{% load i18n static %}
{% load mptt_tags %}
{% load forum_tags %}
{% load forum_conversation_tags %}
{% load forum_member_tags %}
{% load forum_tracking_tags %}

<div class="flex flex-wrap">
  <div class="w-full">
    {% if forum_contents.nodes %}
    {% recurseforumcontents forum_contents %}
    {% if node.level == root_level %}
    {% if node.obj.is_category %}
    <div class="flex relative flex-col mt-3 min-w-0 break-words rounded border bg-charcoal border-1 border-slate forumlist">
      <div class="p-0 py-3 px-6 mb-0 border-gray-300 border-b-1">
        <div class="flex py-2 px-3 m-0 border-b border-slate">
          <div class="pr-4 pl-0 pl-4 w-full sm:w-3/4 forum-name-col">
            <h3 class="m-0 mb-3 h5"><a href="{% url 'forum:forum' node.obj.slug node.obj.id %}">{{ node.obj.name }}</a></h3>
          </div>
          <div class="hidden pr-4 pl-4 text-center md:block whitespace-no-wrap forum-count-col">{% trans "Topics" %}</div>
          <div class="hidden pr-4 pl-4 text-center md:block whitespace-no-wrap forum-count-col">{% trans "Posts" %}</div>
          <div class="hidden pr-0 pr-4 pl-4 sm:block sm:w-1/4 whitespace-no-wrap forum-last-post-col">{% trans "Last post" %}</div>
        </div>
      </div>
      <div class="flex-auto p-0 p-6">
        {{ children }}
      </div>
    </div>
    {% else %}
    {% with node.previous_sibling.obj as previous_sibling %}
    {% if previous_sibling and previous_sibling.is_category or not previous_sibling in forum_contents.visible_forums or not previous_sibling %}
    <div class="flex relative flex-col mt-3 min-w-0 break-words rounded border bg-charcoal border-1 border-slate forumlist">
      <div class="p-0 py-3 px-6 mb-0 border-b-1 border-slate">
        <div class="flex py-2 px-3 m-0 border-b border-slate">
          <div class="pl-0 w-3/4 forum-name-col">
            <h3 class="m-0 mb-3 h5">{% trans "Forums" %}</h3>
          </div>
          <div class="hidden pr-4 pl-4 text-center md:block whitespace-no-wrap forum-count-col w-25">{% trans "Topics" %}</div>
          <div class="hidden pr-4 pl-4 text-center md:block whitespace-no-wrap forum-count-col w-25">{% trans "Posts" %}</div>
          <div class="hidden pr-0 pr-4 pl-4 sm:block sm:w-1/4 whitespace-no-wrap forum-last-post-col">{% trans "Last post" %}</div>
        </div>
      </div>
      <div class="flex-auto p-0 p-6">
    {% endif %}
    {% endwith %}
    <div class="flex py-2 px-3 m-0 border-b border-slate">
      {% if not node.obj.is_link %}
      <div class="pl-0 w-3/4 forum-name">
        <table class="forum-data-table">
          <tr>
            <td class="pt-1 pr-3 align-top forum-icon {% if node.obj in unread_forums %}unread{% endif %}">
              <i class="far fa-circle fa-2x"></i>
            </td>
            <td>
            {% if node.obj.image %}
            <td>
              <div class="hidden pr-2 md:block forum-image">
                <img src="{{ node.obj.image.url }}" alt="{{ node.obj.name }}" />
              </div>
            </td>
            {% endif %}
            <td class="align-top">
              <a href="{% url 'forum:forum' node.obj.slug node.obj.id %}" class="forum-name-link">{{ node.obj.name }}</a>
              <div class="forum-description">{{ node.obj.description.rendered }}</div>
              <div class="sub-forums"><small>{{ children }}</small></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="hidden py-2 pr-4 pl-4 md:block forum-syndication"><a href="{% url 'forum_feeds:forum_latest_topics_with_descendants' node.obj.slug node.obj.pk %}" title="{% trans 'RSS feed' %}"><img src="{% static 'img/icons/icon_signal.svg' %}" /></a></div>
      <div class="hidden py-2 pr-4 pl-4 text-center md:block forum-count">{{ node.topics_count }}</div>
      <div class="hidden py-2 pr-4 pl-4 text-center md:block forum-count">{{ node.posts_count }}</div>
      <div class="hidden py-2 pr-4 pl-4 sm:block sm:w-1/4 forum-last-post">
        {% if node.last_post %}
        {% if node.last_post.poster %}
        {% url 'forum_member:profile' node.last_post.poster_id as poster_url %}
        {% blocktrans trimmed with poster_url=poster_url username=node.last_post.poster|forum_member_display_name %}
        By: <a href="{{ poster_url }}" class="text-orange">{{ username }}</a>
        {% endblocktrans %}
        {% else %}
        {% blocktrans trimmed with poster_username=node.last_post.username %}
        By: {{ poster_username }}
        {% endblocktrans %}
        {% endif %}
        &nbsp;<a href="{% url 'forum_conversation:topic' node.obj.slug node.obj.pk node.last_post.topic.slug node.last_post.topic.pk %}?post={{ node.last_post.pk }}#{{ node.last_post.pk }}"><i class="fas fa-arrow-circle-right"></i></a>
        <br />
        <small>{{ node.last_post.created }}</small>
        {% else %}
        {% trans "No posts" %}
        {% endif %}
      </div>
      {% else %}
      <div class="pr-4 pl-0 pl-4 w-5/6 sm:w-3/4 md:w-2/3 forum-name" colspan="2">
        <table class="forum-data-table">
          <tr>
            <td class="pt-1 pr-3 align-top forum-icon link"><i class="fas fa-link fa-2x"></i></td>
            <td class="align-top">
              <a href="{% url 'forum:forum' node.obj.slug node.obj.id %}" class="forum-name-link">{{ node.obj.name }}</a>
              <div class="forum-description">{{ node.obj.description.rendered }}</div>
            </td>
          </tr>
        </table>
      </div>
      <div class="hidden pr-4 pl-4 md:block md:w-1/6 forum-count"></div>
      <div class="hidden pr-4 pl-4 md:block md:w-1/6 forum-count"></div>
      <div class="hidden py-2 pr-4 pl-4 sm:block sm:w-1/4 md:w-1/5 forum-link-redirects">
        {% if node.obj.link_redirects %}
        {% trans "Total redirects:" %}&nbsp;{{ node.obj.link_redirects_count|default:"0" }}
        {% endif %}
      </div>
    {% endif %}
    </div>
    {% with node.next_sibling.obj as next_sibling %}
    {% if next_sibling and next_sibling.is_category or not next_sibling in forum_contents.visible_forums or not next_sibling %}
      </div>
    </div>
    {% endif %}
    {% endwith %}
    {% endif %}
    {% elif node.level == root_level_middle %}
    {% if node.parent.obj.is_category %}
    <div class="flex flex-wrap py-2 px-3 m-0 border-b">
      {% if not node.obj.is_link %}
      <div class="pr-4 pl-0 pl-4 w-5/6 sm:w-3/4 md:w-3/5 forum-name">
        <table class="forum-data-table">
          <tr>
            <td class="pt-1 pr-3 align-top forum-icon {% if node.obj in unread_forums %}unread{% endif %}"><i class="far fa-circle fa-2x"></i></td>
            {% if node.obj.image %}
            <td>
              <div class="hidden pr-2 md:block forum-image">
                <img src="{{ node.obj.image.url }}" alt="{{ node.obj.name }}" />
              </div>
            </td>
            {% endif %}
            <td class="align-top">
              <a href="{% url 'forum:forum' node.obj.slug node.obj.id %}" class="forum-name-link">{{ node.obj.name }}</a>
              <div class="forum-description">{{ node.obj.description.rendered }}</div>
              <div class="sub-forums"><small>{{ children }}</small></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="hidden py-2 pr-4 pl-4 md:block md:w-1/6 forum-syndication"><a href="{% url 'forum_feeds:forum_latest_topics_with_descendants' node.obj.slug node.obj.pk %}" title="{% trans 'RSS feed' %}"><i class="fas fa-rss-square"></i></a></div>
      <div class="hidden py-2 pr-4 pl-4 text-center md:block md:w-1/6 forum-count">{{ node.topics_count }}</div>
      <div class="hidden py-2 pr-4 pl-4 text-center md:block md:w-1/6 forum-count">{{ node.posts_count }}</div>
      <div class="hidden py-2 pr-4 pl-4 sm:block sm:w-1/4 md:w-1/5 forum-last-post">
        {% if node.last_post %}
        {% if node.last_post.poster_id %}
        {% url 'forum_member:profile' node.last_post.poster_id as poster_url %}
        {% blocktrans trimmed with poster_url=poster_url username=node.last_post.poster|forum_member_display_name %}
        By: <a href="{{ poster_url }}">{{ username }}</a>
        {% endblocktrans %}
        {% else %}
        {% blocktrans trimmed with poster_username=node.last_post.username %}
        By: {{ poster_username }}
        {% endblocktrans %}
        {% endif %}
        &nbsp;<a href="{% url 'forum_conversation:topic' node.obj.slug node.obj.pk node.last_post.topic.slug node.last_post.topic.pk %}?post={{ node.last_post.pk }}#{{ node.last_post.pk }}"><i class="fas fa-arrow-circle-right"></i></a>
        <br />
        <small>{{ node.last_post.created }}</small>
        {% else %}
        {% trans "No posts" %}
        {% endif %}
      </div>
      {% else %}
      <div class="pr-4 pl-0 pl-4 w-5/6 sm:w-3/4 md:w-2/3 forum-name" colspan="2">
        <table class="forum-data-table">
          <tr>
            <td class="pt-1 pr-3 align-top forum-icon link"><i class="fas fa-link fa-2x"></i></td>
            <td class="align-top">
              <a href="{% url 'forum:forum' node.obj.slug node.obj.id %}" class="forum-name-link">{{ node.obj.name }}</a>
              <div class="forum-description">{{ node.obj.description.rendered }}</div>
            </td>
          </tr>
        </table>
      </div>
      <div class="hidden pr-4 pl-4 md:block md:w-1/6 forum-count"></div>
      <div class="hidden pr-4 pl-4 md:block md:w-1/6 forum-count"></div>
      <div class="hidden py-2 pr-4 pl-4 sm:block sm:w-1/4 md:w-1/5 forum-last-post forum-link-redirects">
        {% if node.obj.link_redirects %}
        {% trans "Total redirects:" %}&nbsp;{{ node.obj.link_redirects_count|default:"0" }}
        {% endif %}
      </div>
      {% endif %}
    </div>
    {% else %}
    {% if not node.previous_sibling %}
    <b>{% trans "Subforums:" %}</b>&nbsp;
    {% endif %}
    <i class="fas fa-file"></i>&nbsp;<a href="{% url 'forum:forum' node.obj.slug node.obj.id %}">{{ node.obj.name }}</a>&nbsp;&nbsp;
    {% endif %}
    {% elif node.level == root_level_sub %}
    {% if not node.previous_sibling %}
    <b>{% trans "Subforums:" %}</b>&nbsp;
    {% endif %}
    <i class="fas fa-file"></i>&nbsp;<a href="{% url 'forum:forum' node.obj.slug node.obj.id %}">{{ node.obj.name }}</a>&nbsp;&nbsp;
    {% endif %}
    {% endrecurseforumcontents %}
    {% else %}
    <div class="flex relative flex-col mt-3 min-w-0 break-words rounded border border-gray-300 border-1 forumlist">
      <div class="p-0 py-3 px-6 mb-0 border-gray-300 border-b-1">
        <div class="flex flex-wrap py-2 px-3 m-0">
          <div class="pr-4 pl-0 pl-4 w-3/4 sm:w-3/4 md:w-2/3 forum-name-col">
            <h3 class="m-0 mb-3 h5">{% trans "Forums" %}</h3>
          </div>
          <div class="hidden pr-4 pl-4 text-center md:block md:w-1/6 whitespace-no-wrap forum-count-col">{% trans "Topics" %}</div>
          <div class="hidden pr-4 pl-4 text-center md:block md:w-1/6 whitespace-no-wrap forum-count-col">{% trans "Posts" %}</div>
          <div class="hidden pr-0 pr-4 pl-4 sm:block sm:w-1/4 md:w-1/5 whitespace-no-wrap forum-last-post-col">{% trans "Last post" %}</div>
        </div>
      </div>
      <div class="flex-auto p-0 p-6">
        <div class="flex flex-wrap py-2 px-3 m-0">
          <div class="p-0 pr-4 pl-4 md:w-full">{% trans "No forums." %}</div>
        </div>
      </div>
    </div>
    {% endif %}
  </div>
</div>
