{% extends "base.html" %}
{% block title %}Wiki — {{ 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-4">
  <div>
    <input type="search"
           name="search"
           value="{{ search }}"
           placeholder="Search wiki pages..."
           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:wiki' slug=project.slug %}"
           hx-trigger="input changed delay:300ms, search"
           hx-target="#wiki-content"
           hx-swap="innerHTML"
           hx-push-url="true" />
  </div>
  {% if perms.projects.change_project %}
  <a href="{% url 'fossil:wiki_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 Page</a>
  {% endif %}
</div>

<div id="wiki-content">
<div class="flex gap-6">
  <!-- Main content: home page or page index -->
  <div class="flex-1 min-w-0">
    {% if home_page and not search %}
    <div class="overflow-hidden rounded-lg bg-gray-800 shadow border border-gray-700">
      <div class="px-6 py-4 border-b border-gray-700">
        <h2 class="text-lg font-semibold text-gray-100">{{ home_page.name }}</h2>
      </div>
      <div class="px-6 py-6">
        <div class="prose prose-invert prose-gray max-w-none">
          {{ home_content_html }}
        </div>
      </div>
    </div>
    {% elif not pages %}
    <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 wiki pages matching "{{ search }}".{% else %}No wiki pages yet. Create a "Home" page to get started.{% endif %}</p>
    </div>
    {% endif %}
  </div>

  <!-- Right sidebar: all pages -->
  <aside class="hidden lg:block w-52 flex-shrink-0">
    <div class="sticky top-6">
      <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-500 mb-3">Wiki Pages</h3>
      <nav class="space-y-0.5">
        {% for p in pages %}
        <a href="{% url 'fossil:wiki_page' slug=project.slug page_name=p.name %}"
           class="block rounded-md px-3 py-1.5 text-sm text-gray-400 hover:text-gray-200 hover:bg-gray-800/50">
          {{ p.name }}
        </a>
        {% endfor %}
      </nav>
      {% if not pages %}
      <p class="text-xs text-gray-600 px-3">No pages.</p>
      {% endif %}
    </div>
  </aside>
</div>
{% include "includes/_pagination_manual.html" %}
</div>
{% endblock %}