{% extends "base.html" %}
{% block title %}Forum — {{ project.name }} — Fossilrepo{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-gray-100 mb-2">{{ project.name }}</h1>
{% include "fossil/_project_nav.html" %}

<div class="flex items-center justify-between mb-6">
  <h2 class="text-lg font-semibold text-gray-200">Forum</h2>
  <div class="flex items-center gap-3">
    <input type="search"
           name="search"
           value="{{ search }}"
           placeholder="Search forum..."
           class="rounded-md border-gray-700 bg-gray-800 text-gray-100 shadow-sm focus:border-brand focus:ring-brand text-sm px-3 py-1.5"
           hx-get="{% url 'fossil:forum' slug=project.slug %}"
           hx-trigger="input changed delay:300ms, search"
           hx-target="#forum-content"
           hx-swap="innerHTML"
           hx-push-url="true" />
    {% if has_write %}
    <a href="{% url 'fossil:forum_create' slug=project.slug %}"
       class="inline-flex items-center rounded-md bg-brand px-3 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-brand-hover">
      New Thread
    </a>
    {% endif %}
  </div>
</div>

<div id="forum-content">
<div class="space-y-3">
  {% for post in posts %}
  <div class="rounded-lg bg-gray-800 border border-gray-700 hover:border-gray-600 transition-colors">
    <div class="px-5 py-4">
      {% if post.source == "django" %}
      <a href="{% url 'fossil:forum_thread' slug=project.slug thread_uuid=post.uuid %}"
         class="text-base font-medium text-brand-light hover:text-brand">
        {{ post.title|default:"(untitled)" }}
      </a>
      {% else %}
      <a href="{% url 'fossil:forum_thread' slug=project.slug thread_uuid=post.uuid %}"
         class="text-base font-medium text-brand-light hover:text-brand">
        {{ post.title|default:"(untitled)" }}
      </a>
      {% endif %}
      {% if post.body %}
      <p class="mt-1 text-sm text-gray-400 line-clamp-2">{{ post.body|truncatechars:200 }}</p>
      {% endif %}
      <div class="mt-2 flex items-center gap-3 text-xs text-gray-500">
        {% if post.source == "fossil" %}
        <a href="{% url 'fossil:user_activity' slug=project.slug username=post.user %}" class="font-medium text-gray-400 hover:text-brand-light">{{ post.user }}</a>
        {% else %}
        <span class="font-medium text-gray-400">{{ post.user }}</span>
        {% endif %}
        <span>{{ post.timestamp|timesince }} ago</span>
        {% if post.source == "django" %}
        <span class="inline-flex rounded-full bg-brand/20 px-2 py-0.5 text-xs text-brand-light">local</span>
        {% endif %}
      </div>
    </div>
  </div>
  {% empty %}
  <div class="rounded-lg bg-gray-800 border border-gray-700 p-8 text-center">
    <p class="text-sm text-gray-500">{% if search %}No forum posts matching "{{ search }}".{% else %}No forum posts.{% endif %}</p>
    {% if has_write and not search %}
    <a href="{% url 'fossil:forum_create' slug=project.slug %}"
       class="mt-3 inline-flex items-center rounded-md bg-brand px-3 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-brand-hover">
      Start the first thread
    </a>
    {% endif %}
  </div>
  {% endfor %}
</div>
{% include "includes/_pagination_manual.html" %}
</div>
{% endblock %}