{% extends 'punkweb_bb/base.html' %}

{% load static render styled_username %}

{% block extra_head %}
<link rel="stylesheet" href="{% static 'punkweb_bb/css/index.css' %}" />
<link rel="stylesheet" href="{% static 'punkweb_bb/css/shoutbox.css' %}" />
{% endblock %}

{% block extra_script %}
<script src="{% static 'punkweb_bb/js/shoutbox.js' %}"></script>
{% endblock %}

{% block content %}

<div class="index">
  <div class="index__main">
    <div class="index__categories">
      {% if punkweb_bb.settings.SHOUTBOX_ENABLED|default:True %}
      {% include 'punkweb_bb/shoutbox/shoutbox.html' %}
      {% endif %}
      {% for category in categories %}
      <div id="{{category.slug}}.{{category.order}}" class="pw-card fluid margin">
        <div class="pw-table-container">
          <table class="pw-table">
            <colgroup>
              <col span="1">
              <col span="1" width="96px">
              <col span="1" width="96px">
              <col span="1" width="320px">
            </colgroup>
            <thead>
              <tr>
                <th>
                  <div class="index__category__title">
                    <a href="{{category.get_absolute_url}}">{{category.name}}</a>
                    {% if perms.punkweb_bb.add_subcategory %}
                    <a
                      class="pw-icon-button default rounded sm"
                      href="{% url 'punkweb_bb:subcategory_create' category.slug %}"
                      title="Create subcategory"
                    >
                      <span class="material-symbols-outlined">add</span>
                    </a>
                    {% endif %}
                    {% if perms.punkweb_bb.change_category %}
                    <a
                      class="pw-icon-button default rounded sm"
                      href="{% url 'punkweb_bb:category_update' category.slug %}"
                      title="Edit category"
                    >
                      <span class="material-symbols-outlined">edit</span>
                    </a>
                    {% endif %}
                    {% if perms.punkweb_bb.delete_category %}
                    <a
                      class="pw-icon-button default danger rounded sm"
                      title="Delete category"
                      hx-get="{% url 'punkweb_bb:category_delete' category.slug %}"
                      hx-target="#modal-portal"
                    >
                    <span class="material-symbols-outlined">delete</span>
                    </a>
                    {% endif %}
                  </div>
                </th>
                <th>Threads</th>
                <th>Posts</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {% for subcategory in category.subcategories.all %}
              <tr>
                <td>
                  <a href="{{subcategory.get_absolute_url}}" title="{{subcategory.name}}">{{subcategory.name}}</a>
                  <div>
                    {{subcategory.description|render}}
                  </div>
                </td>
                <td>{{subcategory.thread_count}}</td>
                <td>{{subcategory.post_count}}</td>
                <td>
                  {% if subcategory.latest_thread %}
                  {% if subcategory.latest_thread.latest_post %}
                  <div class="subcategory__latestThread">
                    {% if subcategory.latest_thread.latest_post.user.profile.image %}
                    <img class="pw-avatar xs" src="{{subcategory.latest_thread.latest_post.user.profile.image.url}}" />
                    {% else%}
                    <img class="pw-avatar xs" src="{% static 'punkweb_bb/img/default-profile-image.png' %}" />
                    {% endif %}
                    <div class="subcategory__latestThread__info">
                      <a class="subcategory__latestThread__info__title"
                        href="{{subcategory.latest_thread.get_absolute_url}}" title="{{subcategory.latest_thread.title}}">
                        {{subcategory.latest_thread.title}}
                      </a>
                      <div>
                        <time datetime="{{subcategory.latest_thread.latest_post.created_at|date:'c'}}">
                          {{subcategory.latest_thread.latest_post.created_at|date:'M j, Y'}} at
                          {{subcategory.latest_thread.latest_post.created_at|date:'g:i A'}}
                        </time>
                        •
                        <a href="{% url 'punkweb_bb:profile' subcategory.latest_thread.latest_post.user.id %}">
                          {{subcategory.latest_thread.latest_post.user|styled_username}}
                        </a>
                      </div>
                    </div>
                  </div>
                  {% else %}
                  <div class="subcategory__latestThread">
                    {% if subcategory.latest_thread.user.profile.image %}
                    <img class="pw-avatar xs" src="{{subcategory.latest_thread.user.profile.image.url}}" />
                    {% else%}
                    <img class="pw-avatar xs" src="{% static 'punkweb_bb/img/default-profile-image.png' %}" />
                    {% endif %}
                    <div class="subcategory__latestThread__info">
                      <a class="subcategory__latestThread__info__title"
                        href="{{subcategory.latest_thread.get_absolute_url}}" title="{{subcategory.latest_thread.title}}">
                        {{subcategory.latest_thread.title}}
                      </a>
                      <div>
                        <time datetime="{{subcategory.latest_thread.created_at|date:'c'}}">
                          {{subcategory.latest_thread.created_at|date:'M j, Y'}} at
                          {{subcategory.latest_thread.created_at|date:'g:i A'}}
                        </time>
                        •
                        <a href="{% url 'punkweb_bb:profile' subcategory.latest_thread.user.id %}">
                          {{subcategory.latest_thread.user|styled_username}}
                        </a>
                      </div>
                    </div>
                  </div>
                  {% endif %}
                  {% else %}
                  No threads
                  {% endif %}
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
      {% endfor %}
      {% if perms.punkweb_bb.add_category %}
      <a
        class="pw-icon-button raised primary rounded"
        href="{% url 'punkweb_bb:category_create' %}"
        title="Create category"
      >
        <span class="material-symbols-outlined">add</span>
      </a>
      {% endif %}
    </div>
    <div class="index__sidebar">
      <div class="pw-card fluid">
        <div class="pw-card-header">Recent threads</div>
        <div class="index__recentThreads__content">
          {% for thread in recent_threads %}
          <div class="index__recentThreads__thread">
            {% if thread.user.profile.image %}
            <img class="pw-avatar xs" src="{{thread.user.profile.image.url}}" />
            {% else%}
            <img class="pw-avatar xs" src="{% static 'punkweb_bb/img/default-profile-image.png' %}" />
            {% endif %}
            <div class="index__recentThreads__thread__info">
              <a class="index__recentThreads__thread__info__title" href="{{thread.get_absolute_url}}"
                title="{{thread.title}}">
                {{thread.title}}
              </a>
              <div>
                <time datetime="{{thread.created_at|date:'c'}}">
                  {{thread.created_at|date:'M j, Y'}} at
                  {{thread.created_at|date:'g:i A'}}
                </time>
                •
                <a href="{% url 'punkweb_bb:profile' thread.user.id %}">
                  {{thread.user|styled_username}}
                </a>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
      <div class="pw-card fluid margin">
        <div class="pw-card-header">Statistics</div>
        <div class="index__statistics__content">
          <div class="index__statistics__list">
            <div class="index__statistics__row">
              <div class="index__statistics__label">Total threads:</div>
              <div class="index__statistics__value">
                {{thread_count}}
              </div>
            </div>
            <div class="index__statistics__row">
              <div class="index__statistics__label">Total posts:</div>
              <div class="index__statistics__value">{{post_count}}</div>
            </div>
            <div class="index__statistics__row">
              <div class="index__statistics__label">Total members:</div>
              <div class="index__statistics__value">{{users|length}}</div>
            </div>
            {% if newest_user %}
            <div class="index__statistics__row">
              <div class="index__statistics__label">Newest member:</div>
              <div class="index__statistics__value">
                <a href="{% url 'punkweb_bb:profile' newest_user.id %}">
                  {{newest_user|styled_username}}
                </a>
              </div>
            </div>
            {% endif %}
            <div class="index__statistics__row">
              <div class="index__statistics__label">Users online:</div>
              <div class="index__statistics__value">{{total_online}} ({{members_online|length}} members, {{staff_online|length}} staff, {{guests_online}} guests)</div>
            </div>
          </div>
        </div>
      </div>
      {% if punkweb_bb.settings.DISCORD_WIDGET_ENABLED %}
      {% if punkweb_bb.settings.DISCORD_SERVER_ID %}
      <iframe
        src="https://discord.com/widget?id={{ punkweb_bb.settings.DISCORD_SERVER_ID }}&theme={{ punkweb_bb.settings.DISCORD_WIDGET_THEME|default:'dark' }}"
        width="100%"
        height="384"
        allowtransparency="true"
        frameborder="0"
        sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts">
      </iframe>
      {% else %}
      <div class="pw-callout danger">
        <h4>Discord Widget Error</h4>
        <p><code>DISCORD_SERVER_ID</code> not configured in settings module.</p>
      </div>
      {% endif %}
      {% endif %}
    </div>
  </div>
</div>

{% endblock %}