{% extends 'punkweb_bb/base.html' %}
{% load static humanize_int can_post styled_username %}

{% block title_prefix %}{{subcategory.name}} | {% endblock%}
{% block og_title_prefix %}{{subcategory.name}} | {% endblock %}

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

{% block content %}

<nav>
  <ul class="pw-breadcrumb">
    <li class="pw-breadcrumb-item">
      <a href="{% url 'punkweb_bb:index' %}">Home</a>
    </li>
    <li class="pw-breadcrumb-item">
      <a href="{{subcategory.category.get_absolute_url}}">{{subcategory.category.name}}</a>
    </li>
    <li class="pw-breadcrumb-item active">
      {{subcategory.name}}
    </li>
  </ul>
</nav>

<div class="subcategory__header">
  <div class="subcategory__header__name">
    <h1>{{subcategory.name}}</h1>
    {% if perms.punkweb_bb.change_subcategory or perms.punkweb_bb.delete_subcategory %}
    <div class="subcategory__header__actions">
      {% if perms.punkweb_bb.change_subcategory %}
      <a
        class="pw-icon-button default rounded"
        href="{% url 'punkweb_bb:subcategory_update' subcategory.slug %}"
        title="Edit subcategory"
      >
        <span class="material-symbols-outlined">edit</span>
      </a>
      {% endif %}
      {% if perms.punkweb_bb.delete_subcategory %}
      <a
        class="pw-icon-button default rounded danger"
        title="Delete subcategory"
        hx-get="{% url 'punkweb_bb:subcategory_delete' subcategory.slug %}"
        hx-target="#modal-portal"
      >
        <span class="material-symbols-outlined">delete</span>
      </a>
      {% endif %}
    </div>
    {% endif %}
  </div>

  {% if subcategory|can_post:request.user %}
  <a class="pw-button ghost primary" href="{% url 'punkweb_bb:thread_create' subcategory.slug %}">Create Thread</a>
  {% else %}
  <button
    class="pw-button ghost primary"
    disabled
    href="{% url 'punkweb_bb:thread_create' subcategory.slug %}"
    title="You do not have permission to create a thread in this subcategory."
  >
    Create Thread
  </button>
  {% endif %}
</div>

<div class="pw-card fluid margin">
  <div class="pw-table-container">
    <table class="pw-table">
      <colgroup>
        <col>
        <col width="96px">
        <col width="96px">
        <col width="192px">
      </colgroup>
      <thead>
        <tr>
          <th>Title</th>
          <th>Posts</th>
          <th>Views</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for thread in threads %}
        <tr>
          <td>
            <div class="thread__title">
              <a href="{{thread.get_absolute_url}}">{{thread.title}}</a>
              {% if thread.is_pinned %}
              <span class="material-symbols-outlined" title="Pinned">keep</span>
              {% endif %}
              {% if thread.is_closed %}
              <span class="material-symbols-outlined" title="Closed">lock</span>
              {% endif %}
            </div>
            <div>
              <a href="{% url 'punkweb_bb:profile' thread.user.id %}">
                {{thread.user|styled_username}}
              </a>
              •
              <time datetime="{{thread.created_at|date:'c'}}">{{thread.created_at | date:'M j, Y'}}</time>
          </td>
          <td>{{thread.post_count}}</td>
          <td>{{thread.view_count | humanize_int}}</td>
          <td>
            {% if thread.latest_post %}
            <div class="thread__latestPost">
              <div class="thread__latestPost__info">
                <a class="thread__latestPost__info__title" href="{{ thread.latest_post.get_absolute_url }}"
                  title="{{thread.latest_post.title}}">
                  <time datetime="{{thread.latest_post.created_at|date:'c'}}">
                    {{thread.latest_post.created_at|date:'M j, Y'}}
                  </time>
                </a>
                <div>
                  <a href="{% url 'punkweb_bb:profile' thread.latest_post.user.id %}">
                    {{thread.latest_post.user|styled_username}}
                  </a>
                </div>
              </div>
              {% if thread.latest_post.user.profile.image %}
              <img class="pw-avatar xs" src="{{thread.latest_post.user.profile.image.url}}" />
              {% else %}
              <img class="pw-avatar xs" src="{% static 'punkweb_bb/img/default-profile-image.png' %}" />
              {% endif %}
            </div>
            {% else %}
            No posts
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>


{% if threads.has_other_pages %}
<nav>
  <ul class="pw-pagination">
    {% if threads.has_previous %}
    <li class="pw-pagination-item">
      <a class="pw-pagination-link" href="{{ subcategory.get_absolute_url }}?page={{threads.previous_page_number}}">
        Prev
      </a>
    </li>
    {% else %}
    <li class="pw-pagination-item disabled">
      <a class="pw-pagination-link" href="#">
        Prev
      </a>
    </li>
    {% endif %}
    {% for i in threads.paginator.page_range %}
    {% if threads.number == i %}
    <li class="pw-pagination-item active">
      <a class="pw-pagination-link" href="#">
        {{i}}
      </a>
    </li>
    {% else %}
    <li class="pw-pagination-item">
      <a class="pw-pagination-link" href="{{ subcategory.get_absolute_url }}?page={{i}}">
        {{i}}
      </a>
    </li>
    {% endif %}
    {% endfor %}
    {% if threads.has_next %}
    <li class="pw-pagination-item">
      <a class="pw-pagination-link" href="{{ subcategory.get_absolute_url }}?page={{threads.next_page_number}}">
        Next
      </a>
    </li>
    {% else %}
    <li class="pw-pagination-item disabled">
      <a class="pw-pagination-link" href="#">Next</a>
    </li>
    {% endif %}
  </ul>
</nav>
{% endif %}

{% endblock %}