{% 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/thread.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 mb-4">
      <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">

              {% include 'punkweb_bb/components/profile_image.html' with user=thread.user size="md" %}

            </div>
            <div class="thread__user__username">
              <a href="{% url 'punkweb_bb:profile' thread.user.id %}">{{ thread.user|styled_username }}</a>
              {% if thread.user.profile.is_online %}<div class="onlineIndicator"></div>{% endif %}
            </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="#dialog-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 red"
                   title="Delete"
                   hx-get="{% url 'punkweb_bb:thread_delete' thread.id %}"
                   hx-target="#dialog-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 mb-4">
      <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">

              {% include 'punkweb_bb/components/profile_image.html' with user=post.user size="md" %}

            </div>
            <div class="thread__user__username">
              <a href="{% url 'punkweb_bb:profile' post.user.id %}">{{ post.user|styled_username }}</a>
              {% if post.user.profile.is_online %}<div class="onlineIndicator"></div>{% endif %}
            </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="#dialog-portal">
                  <span class="material-symbols-outlined">edit</span>
                </a>
              {% endif %}
              {% if post|can_delete:request.user %}
                <a class="pw-icon-button default rounded red"
                   title="Delete"
                   hx-get="{% url 'punkweb_bb:post_delete' post.id %}"
                   hx-target="#dialog-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 %}

  {% include 'punkweb_bb/components/pagination_controls.html' with paginator=posts %}

  {% if request.user.is_authenticated %}
    {% if thread|can_post:request.user %}
      <div class="pw-card fluid mt-4">
        <div class="pw-card-header">Reply to thread</div>
        <div class="pw-card-content">
          <div class="thread__reply__content">
            <form class="pw-form"
                  action="{% url 'punkweb_bb:post_create' thread.id %}"
                  method="post">
              {% csrf_token %}
              {{ post_form }}
              <div class="pw-form-actions end">
                <button class="pw-button raised primary" type="submit">Post reply</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    {% else %}
      <div class="pw-card fluid mt-4">
        <div class="pw-card-header">Thread closed</div>
        <div class="pw-card-content">
          <div>This thread is closed and you cannot reply to it.</div>
        </div>
      </div>
    {% endif %}
  {% endif %}
{% endblock %}