{% if not embedded %}{% extends 'base/base.html' %}{% endif %}

{% macro generate_forums(forums_data, level=0) %}
  <div class="forum-list">
    {% for forum in forums_data %}
      <div class="forum-item mb-4">
        {% if forum.forum_type == "main_category" %}

          {# Main Categories #}
          <div class="forum-category box has-background-primary">
          <div class="media {% if level == 0 %}is-aligned-center{% else %}is-aligned-left{% endif %}">
            <div class="media-left">
            <span class="icon {% if level == 0 %}is-large{% else %}is-medium{% endif %} has-text-white">
              <i class="fas fa-layer-group {% if level == 0 %}fa-2x{% endif %}"></i>
            </span>
            </div>
            <div class="media-content">
              {% if 'http_url' in forum %}
                <a href="{{ forum.http_url }}" class="has-text-white">
                {% endif %}
              <h3 class="title {% if level == 0 %}is-3{% else %}is-4{% endif %} has-text-white">
                {{ forum.title }}
              </h3>
              {% if forum.description %}
                <p class="subtitle is-5 has-text-white-bis">{{ forum.description }}</p>
              {% endif %}
              {% if 'http_url' in forum %}
                  </a>
                {% endif %}
            </div>
            {% if level == 0 %}
              <div class="media-right">
                <span class="tag is-light is-medium">
                  <span class="icon"><i class="fas fa-folder"></i></span>
                  <span>{{ forum.children|length }} Forums</span>
                </span>
              </div>
            {% endif %}
          </div>
          </div>

          {% if forum.children %}
            <div class="forum-children pl-5 pr-3 mt-2">
              {{ generate_forums(forum.children, level+1) }}
            </div>
          {% endif %}

        {% else %}

          {# Subcategories #}
          <a {% if 'http_url' in forum %}href="{{ forum.http_url }}"{% endif %}
                 class="forum-subcategory box is-hoverable">
            <div class="media">
              <div class="media-left">
                <span class="icon is-medium has-text-primary">
                  <i class="fas fa-folder fa-2x"></i>
                </span>
              </div>
              <div class="media-content">
                <div class="content">
                  <strong class="title is-4 mb-1">{{ forum.title }}</strong>
                  {% if forum.description %}
                    <p class="subtitle is-6 has-text-grey">{{ forum.description }}</p>
                  {% endif %}
                </div>
                <div class="forum-stats">
                  {% if 'nb_items' in forum %}
                    <span class="tag is-light is-rounded">
                      <span class="icon"><i class="fas fa-comment"></i></span>
                      <span>{{ forum.nb_items }} Topics</span>
                    </span>
                  {% endif %}
                  {% if forum.last_activity %}
                    <span class="tag is-light is-rounded ml-2">
                      <span class="icon"><i class="fas fa-clock"></i></span>
                      <span>{{ forum.last_activity|date_fmt('short', tz_name=tz_name)}}</span>
                    </span>
                  {% endif %}
                </div>
              </div>
              <div class="media-right">
                {% if 'http_url' in forum %}
                  <span class="icon has-text-info">
                    <i class="fas fa-chevron-right"></i>
                  </span>
                {% endif %}
              </div>
            </div>
          </a>
        {% endif %}
      </div>
    {% endfor %}
  </div>
{% endmacro %}

{% block body %}
  <div class="container forums px-4 py-2">
    {% if not forums %}
      <div class="message is-info">
        <div class="message-body has-text-centered">
          <span class="icon is-large mb-3">
            <i class="fas fa-comments fa-2x"></i>
          </span>
          <h3 class="title is-4">{% trans %}No forums found{% endtrans %}</h3>
          <p class="subtitle is-6">{% trans %}You may ask your service administrator to create some.{% endtrans %}</p>
        </div>
      </div>
    {% else %}
      {{ generate_forums(forums) }}
    {% endif %}
  </div>
{% endblock body %}