{% extends "base.html" %}
{% block title %}Files — {{ 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">Unversioned Files</h2>
  <div>
    <input type="search"
           name="search"
           value="{{ search }}"
           placeholder="Search files..."
           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:unversioned' slug=project.slug %}"
           hx-trigger="input changed delay:300ms, search"
           hx-target="#unversioned-content"
           hx-swap="innerHTML"
           hx-push-url="true" />
  </div>
</div>

<div id="unversioned-content">
{% if files %}
<div class="overflow-hidden rounded-lg bg-gray-800 shadow border border-gray-700">
  <table class="min-w-full divide-y divide-gray-700">
    <thead class="bg-gray-900/50">
      <tr>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Name</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Size</th>
        <th class="px-6 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider">Modified</th>
        <th class="px-6 py-3 text-right text-xs font-medium text-gray-400 uppercase tracking-wider"></th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-700">
      {% for file in files %}
      <tr class="hover:bg-gray-700/30">
        <td class="px-6 py-3 text-sm text-gray-200 font-mono">{{ file.name }}</td>
        <td class="px-6 py-3 text-sm text-gray-400">{{ file.size|filesizeformat }}</td>
        <td class="px-6 py-3 text-sm text-gray-400">{% if file.mtime %}{{ file.mtime|date:"Y-m-d H:i" }}{% else %}--{% endif %}</td>
        <td class="px-6 py-3 text-right">
          <a href="{% url 'fossil:unversioned_download' slug=project.slug filename=file.name %}"
             class="inline-flex items-center rounded-md bg-gray-700 px-3 py-1 text-xs font-semibold text-gray-300 hover:bg-gray-600">
            Download
          </a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<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 files matching "{{ search }}".{% else %}No unversioned files.{% endif %}</p>
</div>
{% endif %}
{% include "includes/_pagination_manual.html" %}
</div>

{% if has_admin %}
<div class="mt-6">
  <form method="post"
        action="{% url 'fossil:unversioned_upload' slug=project.slug %}"
        enctype="multipart/form-data"
        class="rounded-lg bg-gray-800 border border-gray-700 p-4">
    {% csrf_token %}
    <h4 class="text-sm font-medium text-gray-300 mb-3">Upload File</h4>
    <div class="flex items-center gap-3">
      <input type="file" name="file" required
             class="block w-full text-sm text-gray-400 file:mr-4 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-brand file:text-white hover:file:bg-brand-hover" />
      <button type="submit"
              class="rounded-md bg-brand px-4 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-brand-hover whitespace-nowrap">
        Upload
      </button>
    </div>
    <p class="mt-2 text-xs text-gray-500">Unversioned files do not preserve history. Only the latest version is kept.</p>
  </form>
</div>
{% endif %}
{% endblock %}