{% extends 'base.html' %}
{% block content %}
<section class="detail-layout detail-layout--wide page-breakout">
  <div class="stack">
    <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;">Forum topic</p>
          <h2 style="margin-top:0; margin-bottom:.35rem;">{{ topic.name }}</h2>
          <p class="muted" style="margin-bottom:0;">{{ topic.description or 'Forum topic discussion.' }}</p>
        </div>
        <a href="{{ url_for('forum_index') }}" role="button" class="secondary">Back to topics</a>
      </div>
      <form method="get" class="toolbar-form" style="margin-top:1rem;">
        <div class="toolbar-controls">
          <label>
            Search
            <input type="search" name="q" value="{{ search_query }}" placeholder="thread titles, authors, post text">
          </label>
          <label>
            Sort by
            <select name="sort">
              <option value="activity" {% if sort_by == 'activity' %}selected{% endif %}>Recent activity</option>
              <option value="newest" {% if sort_by == 'newest' %}selected{% endif %}>Newest threads</option>
              <option value="oldest" {% if sort_by == 'oldest' %}selected{% endif %}>Oldest threads</option>
              <option value="title" {% if sort_by == 'title' %}selected{% endif %}>Title A → Z</option>
            </select>
          </label>
          <button type="submit">Browse topic</button>
        </div>
      </form>
    </article>

    <article class="action-card">
      <h3 style="margin-top:0;">Thread list</h3>
      <div class="table-scroll">
        <table>
          <thead>
            <tr>
              <th>Thread</th>
              <th>Started by</th>
              <th>Posts</th>
              <th>Last activity</th>
            </tr>
          </thead>
          <tbody>
            {% for thread in threads %}
              <tr>
                <td>
                  <a href="{{ url_for('forum_thread_detail', topic_slug=topic.slug, thread_id=thread.id) }}">{{ thread.title }}</a>
                  {% if thread.is_pinned %}<small> · pinned</small>{% endif %}
                  {% if thread.is_locked %}<small> · locked</small>{% endif %}
                </td>
                <td>{{ thread.created_by_name }}</td>
                <td>{{ thread.post_count }}</td>
                <td>
                  {% if thread.last_post_at %}
                    <small>{{ thread.last_post_at }}{% if thread.last_post_by %} · {{ thread.last_post_by }}{% endif %}</small>
                  {% else %}
                    <small>No replies yet</small>
                  {% endif %}
                </td>
              </tr>
            {% else %}
              <tr>
                <td colspan="4">No threads matched your filters in this topic.</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </article>
  </div>

  <aside class="right-rail">
    <article class="action-card">
      <h3 style="margin-top:0;">Start a Thread</h3>
      {% if topic.can_create_thread %}
      <form method="post">
        <label>
          Title
          <input type="text" name="title" maxlength="140" required placeholder="What do you want to discuss?">
        </label>
        <label>
          Opening post
          <textarea name="message" rows="7" required placeholder="Share details, ask for advice, or post a buying request."></textarea>
        </label>
        <button type="submit">Create thread in {{ topic.name }}</button>
      </form>
      {% else %}
      <p class="muted" style="margin-bottom:0;">Your account can read this topic, but it cannot start new threads here.</p>
      {% endif %}
    </article>
  </aside>
</section>
{% endblock %}