{% extends "base.html" %}
{% load humanize %}
{% block title %}{{ release.tag_name }} — {{ 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="mb-4">
  <a href="{% url 'fossil:releases' slug=project.slug %}" class="text-sm text-brand-light hover:text-brand">&larr; Back to releases</a>
</div>

<div class="overflow-hidden rounded-lg bg-gray-800 shadow border border-gray-700">
  <!-- Header -->
  <div class="px-6 py-5 border-b border-gray-700">
    <div class="flex items-start justify-between gap-4">
      <div class="flex-1">
        <div class="flex items-center gap-3 mb-1">
          <h2 class="text-xl font-bold text-gray-100">{{ release.tag_name }}</h2>
          {% if release.is_prerelease %}
          <span class="inline-flex rounded-full bg-yellow-900/50 px-2.5 py-0.5 text-xs font-semibold text-yellow-300">Pre-release</span>
          {% endif %}
          {% if release.is_draft %}
          <span class="inline-flex rounded-full bg-gray-700 px-2.5 py-0.5 text-xs font-semibold text-gray-400">Draft</span>
          {% endif %}
        </div>
        <p class="text-sm text-gray-200">{{ release.name }}</p>
        <p class="mt-1 text-xs text-gray-500">
          {% if release.published_at %}
          Published {{ release.published_at|timesince }} ago
          {% else %}
          Created {{ release.created_at|timesince }} ago
          {% endif %}
          {% if release.checkin_uuid %}
          &middot; <a href="{% url 'fossil:checkin_detail' slug=project.slug checkin_uuid=release.checkin_uuid %}"
                      class="text-brand-light hover:text-brand font-mono">{{ release.checkin_uuid|truncatechars:16 }}</a>
          {% endif %}
        </p>
      </div>
      <div class="flex items-center gap-2 flex-shrink-0">
        {% if has_write %}
        <a href="{% url 'fossil:release_edit' slug=project.slug tag_name=release.tag_name %}"
           class="rounded-md bg-gray-700 px-3 py-1.5 text-xs font-semibold text-gray-300 hover:bg-gray-600">Edit</a>
        {% endif %}
        {% if has_admin %}
        <form method="post" action="{% url 'fossil:release_delete' slug=project.slug tag_name=release.tag_name %}"
              onsubmit="return confirm('Delete this release? This cannot be undone.')">
          {% csrf_token %}
          <button type="submit" class="rounded-md bg-red-900/50 px-3 py-1.5 text-xs font-semibold text-red-300 hover:bg-red-900">Delete</button>
        </form>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Body / Changelog -->
  {% if body_html %}
  <div class="px-6 py-5 border-b border-gray-700">
    <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">Changelog</h3>
    <div class="prose prose-invert prose-gray prose-sm max-w-none">
      {{ body_html }}
    </div>
  </div>
  {% endif %}
</div>

<!-- Assets -->
<div class="mt-6">
  <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">
    Assets
    {% if assets %}({{ assets|length }}){% endif %}
  </h3>

  {% if assets %}
  <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">Downloads</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 asset in assets %}
        <tr class="hover:bg-gray-700/30">
          <td class="px-6 py-3 text-sm text-gray-200 font-mono">{{ asset.name }}</td>
          <td class="px-6 py-3 text-sm text-gray-400">{{ asset.file_size_bytes|filesizeformat }}</td>
          <td class="px-6 py-3 text-sm text-gray-400">{{ asset.download_count|intcomma }}</td>
          <td class="px-6 py-3 text-right">
            <a href="{% url 'fossil:release_asset_download' slug=project.slug tag_name=release.tag_name asset_id=asset.pk %}"
               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-6 text-center">
    <p class="text-sm text-gray-500">No assets attached to this release.</p>
  </div>
  {% endif %}

  {% if has_write %}
  <div class="mt-4">
    <form method="post"
          action="{% url 'fossil:release_asset_upload' slug=project.slug tag_name=release.tag_name %}"
          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 Asset</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>
    </form>
  </div>
  {% endif %}
</div>
{% endblock %}