{% extends 'base.html' %}
{% block content %}
<section class="stack page-breakout">
  <article class="action-card">
    <div style="display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:start;">
      <div>
        <p class="muted" style="margin-bottom:.35rem;">{{ thread.topic_name }}</p>
        <h2 style="margin-top:0; margin-bottom:.35rem;">{{ thread.title }}</h2>
        <p class="muted" style="margin-bottom:.35rem;">{{ thread.topic_description or 'Forum topic discussion.' }}</p>
        <p class="muted" style="margin-bottom:0;">Started by {{ thread.created_by_name }} · {{ thread.created_at }}{% if thread.is_pinned %} · Pinned{% endif %}{% if thread.is_locked %} · Locked{% endif %}</p>
      </div>
      <div style="display:flex; gap:.5rem; flex-wrap:wrap;">
        <a href="{{ url_for('forum_topic_detail', topic_slug=thread.topic_slug) }}" role="button" class="secondary">Back to topic</a>
        {% if can_moderate %}
          <form method="post" style="margin:0;">
            <input type="hidden" name="toggle_lock" value="1">
            <button type="submit" class="secondary">{% if thread.is_locked %}Unlock thread{% else %}Lock thread{% endif %}</button>
          </form>
          <form method="post" style="margin:0;">
            <input type="hidden" name="toggle_pin" value="1">
            <button type="submit" class="secondary">{% if thread.is_pinned %}Unpin thread{% else %}Pin thread{% endif %}</button>
          </form>
        {% endif %}
      </div>
    </div>
    {% if can_manage_forum %}
    <form method="post" style="margin-top:1rem;">
      <label>Move thread to topic
        <select name="move_topic_id">
          {% for topic in topic_options %}
            <option value="{{ topic.id }}" {% if topic.id == thread.topic_id %}selected{% endif %}>{{ topic.name }}</option>
          {% endfor %}
        </select>
      </label>
      <button type="submit" class="secondary">Move thread</button>
    </form>
    {% endif %}
  </article>

  {% for post in posts %}
    <article class="action-card">
      <div style="display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:center;">
        <strong>{{ post.username }}</strong>
        <small class="muted">{{ post.created_at }}</small>
      </div>
      {% if post.is_hidden %}
      <p class="muted" style="margin-bottom:.35rem;">This post is hidden by moderation{% if post.moderated_by_name %} · {{ post.moderated_by_name }}{% endif %}{% if post.moderated_at %} · {{ post.moderated_at }}{% endif %}</p>
      {% if can_manage_forum %}
      <p style="white-space:pre-wrap;">{{ post.message }}</p>
      {% endif %}
      {% else %}
      <p style="white-space:pre-wrap; margin-bottom:0;">{{ post.message }}</p>
      {% endif %}
      {% if can_manage_forum %}
      <form method="post" action="{{ url_for('forum_moderate_post', post_id=post.id) }}" style="margin-top:.75rem;">
        <input type="hidden" name="action" value="{% if post.is_hidden %}show{% else %}hide{% endif %}">
        <button type="submit" class="secondary">{% if post.is_hidden %}Restore post{% else %}Hide post{% endif %}</button>
      </form>
      {% endif %}
    </article>
  {% endfor %}

  <article class="action-card">
    <h3 style="margin-top:0;">Reply</h3>
    {% if thread.is_locked %}
      <p class="muted">This thread is locked. Only reading is available right now.</p>
    {% elif not can_reply %}
      <p class="muted">You can read this topic, but your account cannot reply here.</p>
    {% else %}
      <form method="post">
        <label>
          Message
          <textarea name="message" rows="6" required placeholder="Write your reply."></textarea>
        </label>
        <button type="submit">Post reply</button>
      </form>
    {% endif %}
  </article>
</section>
{% endblock %}