{% extends "base.html" %}
{% block title %}{{ ticket.title }} — {{ 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:tickets' slug=project.slug %}" class="text-sm text-brand-light hover:text-brand">&larr; Back to tickets</a>
</div>

<div class="overflow-hidden rounded-lg bg-gray-800 shadow border border-gray-700">
  <div class="px-6 py-5 border-b border-gray-700">
    <div class="flex items-start justify-between gap-4">
      <div class="flex-1">
        <h2 class="text-xl font-bold text-gray-100">{{ ticket.title|default:"(untitled)" }}</h2>
      </div>
      <div class="flex items-center gap-2 flex-shrink-0">
        {% if perms.projects.change_project %}
        <a href="{% url 'fossil:ticket_edit' slug=project.slug ticket_uuid=ticket.uuid %}" 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 ticket.status == "Open" %}
        <span class="inline-flex rounded-full bg-green-900/50 px-3 py-1 text-xs font-semibold text-green-300">{{ ticket.status }}</span>
        {% elif ticket.status == "Closed" or ticket.status == "Fixed" %}
        <span class="inline-flex rounded-full bg-gray-700 px-3 py-1 text-xs font-semibold text-gray-300">{{ ticket.status }}</span>
        {% else %}
        <span class="inline-flex rounded-full bg-yellow-900/50 px-3 py-1 text-xs font-semibold text-yellow-300">{{ ticket.status }}</span>
        {% endif %}
      </div>
    </div>
    <p class="mt-1 text-xs text-gray-500">
      <code class="font-mono">{{ ticket.uuid|truncatechars:16 }}</code>
      &middot; opened {{ ticket.created|timesince }} ago
    </p>
  </div>

  <!-- Metadata grid -->
  <div class="px-6 py-4 border-b border-gray-700">
    <dl class="grid grid-cols-2 gap-x-6 gap-y-3 sm:grid-cols-4">
      <div>
        <dt class="text-xs font-medium text-gray-500 uppercase">Type</dt>
        <dd class="mt-0.5 text-sm text-gray-200">{{ ticket.type|default:"—" }}</dd>
      </div>
      <div>
        <dt class="text-xs font-medium text-gray-500 uppercase">Priority</dt>
        <dd class="mt-0.5 text-sm text-gray-200">{{ ticket.priority|default:"—" }}</dd>
      </div>
      <div>
        <dt class="text-xs font-medium text-gray-500 uppercase">Severity</dt>
        <dd class="mt-0.5 text-sm text-gray-200">{{ ticket.severity|default:"—" }}</dd>
      </div>
      <div>
        <dt class="text-xs font-medium text-gray-500 uppercase">Resolution</dt>
        <dd class="mt-0.5 text-sm text-gray-200">{{ ticket.resolution|default:"—" }}</dd>
      </div>
      <div>
        <dt class="text-xs font-medium text-gray-500 uppercase">Subsystem</dt>
        <dd class="mt-0.5 text-sm text-gray-200">{{ ticket.subsystem|default:"—" }}</dd>
      </div>
      <div>
        <dt class="text-xs font-medium text-gray-500 uppercase">Created</dt>
        <dd class="mt-0.5 text-sm text-gray-200">{{ ticket.created|date:"N j, Y g:i a" }}</dd>
      </div>
    </dl>
  </div>

  <!-- Body/description -->
  {% if body_html %}
  <div class="px-6 py-5">
    <div class="prose prose-invert prose-gray prose-sm max-w-none">
      {{ body_html }}
    </div>
  </div>
  {% endif %}
</div>

{% if comments %}
<div class="mt-6">
  <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">Comments ({{ comments|length }})</h3>
  <div class="space-y-3">
    {% for c in comments %}
    <div class="rounded-lg bg-gray-800 border border-gray-700">
      <div class="px-5 py-3 border-b border-gray-700 flex items-center justify-between">
        <a href="{% url 'fossil:user_activity' slug=project.slug username=c.user %}" class="text-sm font-medium text-gray-200 hover:text-brand-light">{{ c.user }}</a>
        <span class="text-xs text-gray-500">{{ c.timestamp|timesince }} ago</span>
      </div>
      <div class="px-5 py-4">
        <div class="prose prose-invert prose-gray prose-sm max-w-none">
          {{ c.html }}
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

{% if perms.projects.change_project %}
<div class="mt-6">
  <h3 class="text-sm font-semibold text-gray-300 uppercase tracking-wider mb-3">Add Comment</h3>
  <form method="post" action="{% url 'fossil:ticket_comment' slug=project.slug ticket_uuid=ticket.uuid %}" class="rounded-lg bg-gray-800 border border-gray-700 p-4">
    {% csrf_token %}
    <textarea name="comment" rows="4" required placeholder="Write a comment (Markdown supported)..."
              class="w-full rounded-md border-gray-700 bg-gray-900 text-gray-100 shadow-sm focus:border-brand focus:ring-brand sm:text-sm font-mono"></textarea>
    <div class="mt-3 flex justify-end">
      <button type="submit" class="rounded-md bg-brand px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-hover">Comment</button>
    </div>
  </form>
</div>
{% endif %}
{% endblock %}