{% extends 'punkweb_bb/base.html' %}
{% load static render styled_username can_delete can_edit can_post %}

{% block title_prefix %}{{thread.title}} | {% endblock %}
{% block og_title_prefix %}{{thread.title}} | {% endblock %}

{% block extra_head %}
<meta name="description" content="{{thread.content|render|striptags|truncatechars:120}}" />
<meta property="og:description" content="{{thread.content|render|striptags|truncatechars:120}}" />
<link rel="stylesheet" href="{% static 'punkweb_bb/css/post-form.css' %}" />
<link rel="stylesheet" href="{% static 'punkweb_bb/css/thread.css' %}" />
<link rel="stylesheet" href="{% static 'punkweb_bb/css/thread-form.css' %}" />
{{post_form.media.css}}
{% endblock %}

{% block extra_script %}
{{post_form.media.js}}
{% 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="{{thread.subcategory.category.get_absolute_url}}">{{thread.subcategory.category.name}}</a>
    </li>
    <li class="pw-breadcrumb-item">
      <a href="{{thread.subcategory.get_absolute_url}}">{{thread.subcategory.name}}</a>
    </li>
    <li class="pw-breadcrumb-item active">
      {{thread.title}}
    </li>
  </ul>
</nav>

{% if posts.number == 1 %}
<h1>{{thread.title}}</h1>

<div class="pw-card fluid margin">
  <div class="pw-card-header">
    <div class="thread__date">
      <time datetime="{{thread.created_at|date:'c'}}">{{thread.created_at | date:'M j, Y'}}</time>
    </div>
  </div>
  <div class="thread">
    <div class="thread__user">
      <div class="thread__user__info">
        <div class="thread__user__image">
          {% if thread.user.profile.image %}
          <img class="pw-avatar" src="{{thread.user.profile.image.url}}" alt="{{thread.user.username}}" />
          {% else %}
          <img class="pw-avatar" src="{% static 'punkweb_bb/img/default-profile-image.png' %}" alt="{{thread.user.username}}" />
          {% endif %}
        </div>
        <div class="thread__user__username">
          {% if thread.user.profile.is_online %}
          <div class="onlineIndicator"></div>
          {% endif %}
          <a href="{% url 'punkweb_bb:profile' thread.user.id %}">
            {{thread.user|styled_username}}
          </a>
        </div>
        <div class="thread__user__group">
          {% if thread.user.profile.priority_group %}
          {{thread.user.profile.priority_group.name}}
          {% else %}
          Member
          {% endif %}
        </div>
      </div>
      <div class="thread__user__details">
        <div class="thread__user__details__row">
          <div class="thread__user__details__label">Joined:</div>
          <div class="thread__user__details__value">
            <time datetime="{{thread.user.date_joined|date:'c'}}">{{thread.user.date_joined | date:'M j, Y'}}</time>
          </div>
        </div>
        <div class="thread__user__details__row">
          <div class="thread__user__details__label">Posts:</div>
          <div class="thread__user__details__value">{{thread.user.profile.post_count}}</div>
        </div>
      </div>
    </div>
    <div class="thread__main">
      <div class="thread__content">
        {{thread.content|render}}
      </div>
      {% if thread|can_delete:request.user or thread|can_edit:request.user or perms.punkweb_bb.pin_thread or perms.punkweb_bb.close_thread or perms.punkweb_bb.move_thread %}
      <div class="thread__actions">
        {% if perms.punkweb_bb.move_thread %}
        <a 
          class="pw-icon-button default rounded"
          title="Move"
          hx-get="{% url 'punkweb_bb:thread_move' thread.id %}"
          hx-target="#modal-portal"
        >
          <span class="material-symbols-outlined">move_item</span>
        </a>
        {% endif %}
        {% if perms.punkweb_bb.pin_thread %}
        <a 
          class="pw-icon-button default rounded"
          title="{% if thread.is_pinned %}Unpin{% else %}Pin{% endif %}"
          hx-get="{% url 'punkweb_bb:thread_pin' thread.id %}"
          hx-swap="none"
        >
          {% if thread.is_pinned %}
          <span class="material-symbols-outlined">keep_off</span>
          {% else %}
          <span class="material-symbols-outlined">keep</span>
          {% endif %}
        </a>
        {% endif %}
        {% if perms.punkweb_bb.close_thread %}
        <a
          class="pw-icon-button default rounded"
          title="{% if thread.is_closed %}Reopen{% else %}Close{% endif %}"
          hx-get="{% url 'punkweb_bb:thread_close' thread.id %}"
          hx-swap="none"
        >
          {% if thread.is_closed %}
          <span class="material-symbols-outlined">lock_open</span>
          {% else %}
          <span class="material-symbols-outlined">lock</span>
          {% endif %}
        </a>
        {% endif %}
        {% if thread|can_edit:request.user %}
        <a
          class="pw-icon-button default rounded"
          href="{% url 'punkweb_bb:thread_update' thread.id %}"
          title="Edit"
        >
          <span class="material-symbols-outlined">edit</span>
        </a>
        {% endif %}
        {% if thread|can_delete:request.user %}
        <a
          class="pw-icon-button default rounded danger"
          title="Delete"
          hx-get="{% url 'punkweb_bb:thread_delete' thread.id %}"
          hx-target="#modal-portal"
        >
          <span class="material-symbols-outlined">delete</span>
        </a>
        {% endif %}
      </div>
      {% endif %}
      {% if thread.user.profile.signature|render %}
      <div class="thread__signature">
        {{thread.user.profile.signature|render}}
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endif %}

{% for post in posts %}
<div id="post-{{post.id}}" class="pw-card fluid margin">
  <div class="pw-card-header thread__header">
    <div class="thread__date">
      <time datetime="{{post.created_at|date:'c'}}">{{post.created_at | date:'M j, Y'}}</time>
    </div>
    <a class="thread__index" href="{{post.get_absolute_url}}">#{{post.index}}</a>
  </div>
  <div class="thread">
    <div class="thread__user">
      <div class="thread__user__info">
        <div class="thread__user__image">
          {% if post.user.profile.image %}
          <div class="thread__user__image">
            <img class="pw-avatar" src="{{post.user.profile.image.url}}" alt="{{post.user.username}}" />
          </div>
          {% else %}
          <div class="thread__user__image">
            <img class="pw-avatar" src="{% static 'punkweb_bb/img/default-profile-image.png' %}" alt="{{post.user.username}}" />
          </div>
          {% endif %}
        </div>
        <div class="thread__user__username">
          {% if post.user.profile.is_online %}
          <div class="onlineIndicator"></div>
          {% endif %}
          <a href="{% url 'punkweb_bb:profile' post.user.id %}">
            {{post.user|styled_username}}
          </a>
        </div>
        <div class="thread__user__group">
          {% if post.user.profile.priority_group %}
          {{post.user.profile.priority_group.name}}
          {% else %}
          Member
          {% endif %}
        </div>
      </div>
      <div class="thread__user__details">
        <div class="thread__user__details__row">
          <div class="thread__user__details__label">Joined:</div>
          <div class="thread__user__details__value">
            <time datetime="{{post.user.date_joined|date:'c'}}">{{post.user.date_joined | date:'M j, Y'}}</time>
          </div>
        </div>
        <div class="thread__user__details__row">
          <div class="thread__user__details__label">Posts:</div>
          <div class="thread__user__details__value">{{post.user.profile.post_count}}</div>
        </div>
      </div>
    </div>
    <div class="thread__main">
      <div class="thread__content">
        {{post.content|render}}
      </div>
      {% if post|can_delete:request.user or post|can_edit:request.user %}
      <div class="thread__actions">
        {% if post|can_edit:request.user %}
        <a
          class="pw-icon-button default rounded"
          title="Edit"
          hx-get="{% url 'punkweb_bb:post_update' post.id %}"
          hx-target="#modal-portal"
        >
          <span class="material-symbols-outlined">edit</span>
        </a>
        {% endif %}
        {% if post|can_delete:request.user %}
        <a
          class="pw-icon-button default rounded danger"
          title="Delete"
          hx-get="{% url 'punkweb_bb:post_delete' post.id %}"
          hx-target="#modal-portal"
        >
          <span class="material-symbols-outlined">delete</span>
        </a>
        {% endif %}
      </div>
      {% endif %}
      {% if post.user.profile.signature|render %}
      <div class="thread__signature">
        {{post.user.profile.signature|render}}
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endfor %}

{% if posts.has_other_pages %}
<nav>
  <ul class="pw-pagination">
    {% if posts.has_previous %}
    <li class="pw-pagination-item">
      <a class="pw-pagination-link" href="{{ post.thread.get_absolute_url }}?page={{posts.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 posts.paginator.page_range %}
    {% if posts.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="{{ post.thread.get_absolute_url }}?page={{i}}">
        {{i}}
      </a>
    </li>
    {% endif %}
    {% endfor %}
    {% if posts.has_next %}
    <li class="pw-pagination-item">
      <a class="pw-pagination-link" href="{{ post.thread.get_absolute_url }}?page={{posts.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 %}

{% if thread|can_post:request.user %}
<div class="pw-card fluid margin">
  <div class="pw-card-header">Reply to thread</div>
  <div class="pw-card-content">
    <div class="thread__reply__content">
      <form class="postForm" action="{% url 'punkweb_bb:post_create' thread.id %}" method="post">
        {% csrf_token %}
        {% for field in post_form %}
        <div class="postForm__field">
          {{ field }}
        </div>
        {% endfor %}
        {% if post_form.non_field_errors %}
        {{ post_form.non_field_errors }}
        {% endif %}
        <div class="postForm__actions">
          <button class="pw-button raised primary" type="submit">Post reply</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% else %}
<div class="pw-card fluid margin">
  <div class="pw-card-header">Thread closed</div>
  <div class="pw-card-content">
    <p>This thread is closed and you cannot reply to it.</p>
  </div>
</div>
{% endif %}

{% endblock %}