{% extends "base.html" %}
{% block title %}{{ ticket.uuid }} - {{ ticket.name }}{% endblock %}
{% block breadcrumb %}
<nav class="mb-4" aria-label="Breadcrumb">
  <ol class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
    <li><a href="{% url 'dashboard' %}" class="hover:text-gray-700 dark:hover:text-gray-300">Dashboard</a></li>
    <li class="text-gray-300 dark:text-gray-600">/</li>
    <li><a href="{% url 'tickets-list' %}" class="hover:text-gray-700 dark:hover:text-gray-300">Tickets</a></li>
    <li class="text-gray-300 dark:text-gray-600">/</li>
    <li class="text-gray-900 dark:text-white font-medium" aria-current="page">{{ ticket.uuid }}</li>
  </ol>
</nav>
{% endblock %}
{% block extra_head %}
{% include "components/rich_text_editor_assets.html" %}
{% endblock %}
{% block content %}
<div class="mb-6">
  <a href="{% url 'tickets-list' %}" class="dk-btn dk-btn-ghost text-sm mb-3">
    <i class="fas fa-arrow-left"></i> Back to Tickets
  </a>
  <div class="flex items-center gap-3 mb-1">
    <span class="font-mono font-bold text-sm text-gray-400">{{ ticket.uuid }}</span>
    <div class="ml-auto flex gap-2">
      <a href="{% url 'ticket-edit' ticket.id %}" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shadow-sm">
        Edit
      </a>
      <form method="post" action="{% url 'ticket-delete' ticket.id %}" class="inline">
        {% csrf_token %}
        <button type="button" @click="confirmAction({title:'Delete Ticket', message:'Delete this ticket? This cannot be undone.', confirmText:'Delete', danger:true, onConfirm:function(){ $el.closest('form').submit() }})" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-red-600 dark:text-red-400 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors shadow-sm">
          Delete
        </button>
      </form>
    </div>
  </div>
  <h1 class="text-2xl font-bold" x-data="{ editing: false, val: '{{ ticket.name|escapejs }}' }">
    <span x-show="!editing" @dblclick="editing = true; $nextTick(() => $refs.input.focus())" x-text="val"></span>
    <input x-show="editing" x-cloak x-ref="input" type="text" x-model="val"
           @blur="editing = false; fetch('/dashboard/tickets/{{ ticket.id }}/field/',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded','X-CSRFToken':'{{ csrf_token }}'}, body:'field=name&value='+encodeURIComponent(val)})"
           @keydown.enter="$refs.input.blur()" @keydown.escape="editing = false; val = '{{ ticket.name|escapejs }}'"
           class="text-2xl font-bold bg-transparent border-b-2 border-primary outline-none w-full">
  </h1>
  <div class="flex items-center gap-2 mt-2 flex-wrap">
    <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-semibold text-white" style="background-color:{{ ticket.status.color }}">{{ ticket.status.name }}</span>
    {% if ticket.priority %}
    <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-semibold text-white" style="background-color:{{ ticket.priority.color }}">{{ ticket.priority.name }}</span>
    {% endif %}
    <a href="{% url 'tickets-list' %}?project={{ ticket.project.id }}" class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-semibold text-white" style="background-color:{{ ticket.project.color|default:'#3B82F6' }}">{{ ticket.project.name }}</a>
  </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
  <div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10">
    <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-600 flex items-center gap-2">
      <i class="fas fa-ticket-alt text-xs text-gray-400"></i>
      <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Ticket Information</h3>
    </div>
    <div class="px-6 py-4 grid grid-cols-2 gap-4">
      <div>
        <span class="text-xs text-gray-500 dark:text-gray-400">Ticket ID</span>
        <div class="flex items-center gap-1.5 mt-0.5">
          <span class="font-mono text-sm font-medium text-gray-900 dark:text-white">{{ ticket.uuid }}</span>
          <button onclick="navigator.clipboard.writeText('{{ ticket.uuid }}')" class="inline-flex items-center gap-1 px-1.5 py-0.5 text-[10px] font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shadow-sm" title="Copy UUID">
            <i class="far fa-copy"></i> Copy
          </button>
        </div>
      </div>
      <div>
        <span class="text-xs text-gray-500 dark:text-gray-400">Ticket Name</span>
        <p class="text-sm font-semibold text-gray-900 dark:text-white mt-0.5">{{ ticket.name }}</p>
      </div>
      <div>
        <span class="text-xs text-gray-500 dark:text-gray-400">Project</span>
        <p class="text-sm font-medium text-gray-900 dark:text-white mt-0.5">{{ ticket.project.name }}</p>
      </div>
      <div x-data="{ editing: false, val: '{{ ticket.start_date|date:'Y-m-d'|default:'' }}' }">
        <span class="text-xs text-gray-500 dark:text-gray-400">Start Date</span>
        <div class="mt-0.5">
          <span x-show="!editing" @dblclick="editing = true; $nextTick(() => $refs.input.focus())" x-text="val ? new Date(val).toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'}) : '—'" class="text-sm font-medium text-gray-900 dark:text-white cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 px-1 rounded"></span>
          <input x-show="editing" x-cloak x-ref="input" type="date" x-model="val"
                 @click="$el.showPicker()"
                 @blur="editing = false; fetch('/dashboard/tickets/{{ ticket.id }}/field/',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded','X-CSRFToken':'{{ csrf_token }}'}, body:'field=start_date&value='+encodeURIComponent(val)})"
                 @keydown.escape="editing = false; val = '{{ ticket.start_date|date:'Y-m-d'|default:'' }}'"
                 class="text-sm bg-transparent border border-gray-300 dark:border-gray-600 rounded px-1 py-0.5">
        </div>
      </div>
      <div x-data="{ editing: false, val: '{{ ticket.due_date|date:'Y-m-d'|default:'' }}' }">
        <span class="text-xs text-gray-500 dark:text-gray-400">Due Date</span>
        <div class="mt-0.5">
          <span x-show="!editing" @dblclick="editing = true; $nextTick(() => $refs.input.focus())" x-text="val ? new Date(val).toLocaleDateString('en-US',{month:'short',day:'numeric',year:'numeric'}) : '—'" class="text-sm font-medium {% if ticket.due_date and ticket.due_date < today %}text-red-500{% else %}text-gray-900 dark:text-white{% endif %} cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 px-1 rounded"></span>
          <input x-show="editing" x-cloak x-ref="input" type="date" x-model="val"
                 @click="$el.showPicker()"
                 @blur="editing = false; fetch('/dashboard/tickets/{{ ticket.id }}/field/',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded','X-CSRFToken':'{{ csrf_token }}'}, body:'field=due_date&value='+encodeURIComponent(val)})"
                 @keydown.escape="editing = false; val = '{{ ticket.due_date|date:'Y-m-d'|default:'' }}'"
                 class="text-sm bg-transparent border border-gray-300 dark:border-gray-600 rounded px-1 py-0.5">
        </div>
      </div>
    </div>
  </div>

  <div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10">
    <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-600 flex items-center gap-2">
      <i class="fas fa-user-group text-xs text-gray-400"></i>
      <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Status & Assignment</h3>
    </div>
    <div class="px-6 py-4 grid grid-cols-2 gap-4">
      <div>
        <span class="text-xs text-gray-500 dark:text-gray-400">Status</span>
        <div class="mt-0.5">
          <span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-semibold text-white" style="background-color:{{ ticket.status.color }}">{{ ticket.status.name }}</span>
        </div>
      </div>
      <div>
        <span class="text-xs text-gray-500 dark:text-gray-400">Assigned To</span>
        <div class="flex flex-wrap gap-1 mt-1">
          {% for a in ticket.assignees.all %}
          <span class="inline-flex items-center px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 text-xs gap-1">
            <span class="w-3 h-3 rounded-full bg-blue-500 flex items-center justify-center text-[8px] text-white flex-shrink-0">{{ a.get_full_name|default:a.username|make_list|first|upper }}</span>
            {{ a.get_full_name|default:a.username }}
          </span>
          {% empty %}
          <span class="text-sm text-gray-400 dark:text-gray-500">Unassigned</span>
          {% endfor %}
        </div>
      </div>
      <div>
        <span class="text-xs text-gray-500 dark:text-gray-400">Created By</span>
        <p class="text-sm font-medium text-gray-900 dark:text-white mt-0.5">{{ ticket.created_by.get_full_name|default:ticket.created_by.username|default:"—" }}</p>
      </div>
      <div>
        <span class="text-xs text-gray-500 dark:text-gray-400">Due Date</span>
        <p class="text-sm font-medium {% if ticket.due_date and ticket.due_date < today %}text-red-500{% else %}text-gray-900 dark:text-white{% endif %} mt-0.5">
          {% if ticket.due_date %}{{ ticket.due_date|date:"d M Y" }}{% else %}—{% endif %}
        </p>
      </div>
    </div>
  </div>
</div>

<div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10 mb-6">
  <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-600 flex items-center gap-2">
    <i class="fas fa-file-alt text-xs text-gray-400"></i>
    <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Description</h3>
  </div>
  <div class="px-6 py-4">
    <div x-data="{ editingDesc: false, descContent: '{{ ticket.description|escapejs|default:'' }}' }">
      <div x-show="!editingDesc">
        <div id="description-content">
          {% if ticket.description %}
          <div class="prose prose-sm dark:prose-invert max-w-none">{{ ticket.description|safe }}</div>
          {% else %}
          <p class="text-sm text-gray-400 italic">No description provided.</p>
          {% endif %}
        </div>
      </div>

      <div x-show="editingDesc" x-cloak>
        <form hx-post="/dashboard/tickets/{{ ticket.id }}/description/"
              hx-target="#description-content"
              hx-swap="innerHTML"
              @submit="editingDesc = false;">
          {% csrf_token %}
          {% include "components/rich_text_editor.html" with input_name="description" alpine_model="descContent" %}
          <div class="flex gap-2">
            <button type="submit" class="dk-btn dk-btn-primary text-xs"><i class="fas fa-save"></i> Save</button>
            <button type="button" @click="editingDesc = false" class="dk-btn-ghost text-xs">Cancel</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10 mb-6" x-data="{ open: true, replyingTo: null }" @set-replying="replyingTo = $event.detail">
  <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-600 flex items-center justify-between">
    <div class="flex items-center gap-2">
      <i class="fas fa-comments text-xs text-gray-400"></i>
      <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Comments</h3>
      <p class="text-xs text-gray-500 dark:text-gray-400">({{ ticket.comments.count }})</p>
    </div>
    <button @click="open = !open" class="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
      <i class="fas" :class="open ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
    </button>
  </div>
  <div x-show="open" x-collapse>
    <div class="px-6 py-4">
      <div id="comments-list" class="space-y-4">
        {% include "tickets/partials/comments.html" with comments=ticket.comments.all %}
      </div>
      <div x-show="!replyingTo" x-cloak class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-600">
        <form x-data="{ commentContent: '' }"
              @htmx:after-request="if($event.detail.successful) commentContent = ''"
              hx-post="/dashboard/tickets/{{ ticket.id }}/comments/add/"
              hx-target="#comments-list"
              hx-swap="innerHTML">
          {% csrf_token %}
          {% include "components/rich_text_editor.html" with input_name="comment" alpine_model="commentContent" %}
          <div class="flex justify-end">
            <button type="submit" class="dk-btn dk-btn-primary text-sm">
              <i class="fas fa-paper-plane"></i> Comment
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
  <div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10" x-data="{ metaOpen: false }">
    <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-600 flex items-center justify-between cursor-pointer" @click="metaOpen = !metaOpen">
      <div class="flex items-center gap-2">
        <i class="fas fa-info-circle text-xs text-gray-400"></i>
        <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Metadata</h3>
      </div>
      <i class="fas text-xs text-gray-400" :class="metaOpen ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
    </div>
    <div x-show="metaOpen" x-collapse>
      <div class="px-6 py-4 space-y-4">
        <div>
          <span class="text-xs text-gray-500 dark:text-gray-400">Created At</span>
          <p class="text-sm font-medium text-gray-900 dark:text-white mt-0.5">{{ ticket.created_at|date:"d M Y H:i" }}</p>
        </div>
        <div>
          <span class="text-xs text-gray-500 dark:text-gray-400">Updated At</span>
          <p class="text-sm font-medium text-gray-900 dark:text-white mt-0.5">{{ ticket.updated_at|date:"d M Y H:i" }}</p>
        </div>
        <div>
          <span class="text-xs text-gray-500 dark:text-gray-400">Epic</span>
          <p class="text-sm font-medium text-gray-900 dark:text-white mt-0.5">{% if ticket.epic %}{{ ticket.epic.name }}{% else %}<span class="text-gray-400">No Epic</span>{% endif %}</p>
        </div>
      </div>
    </div>
  </div>

  <div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10" x-data="{ historyOpen: false }">
    <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-600 flex items-center justify-between cursor-pointer" @click="historyOpen = !historyOpen">
      <div class="flex items-center gap-2">
        <i class="fas fa-history text-xs text-gray-400"></i>
        <h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Status History</h3>
      </div>
      <i class="fas text-xs text-gray-400" :class="historyOpen ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
    </div>
    <div x-show="historyOpen" x-collapse>
      <div class="relative p-6">
        <div class="absolute left-8 top-8 bottom-8 w-0.5 bg-gray-300 dark:bg-gray-700"></div>
        <div class="space-y-5">
          {% for h in ticket.histories.all %}
          <div class="relative pl-10">
            <div class="absolute left-6 top-1.5 w-4 h-4 rounded-full bg-gray-400 dark:bg-gray-600 border-2 border-white dark:border-gray-400 -translate-x-1/2"></div>
            <div>
              <div class="text-sm font-medium text-gray-900 dark:text-gray-100">
                Status changed to <span class="inline-flex rounded-full px-2 py-0.5 text-xs font-semibold text-white" style="background-color:{{ h.status.color }}">{{ h.status.name }}</span>
              </div>
              <div class="text-xs text-gray-400 mt-1">
                <span>Updated by: {{ h.user.get_full_name|default:h.user.username }}</span>
                <span class="mx-1">•</span>
                <span>{{ h.created_at|date:"d M H:i" }}</span>
              </div>
            </div>
          </div>
          {% empty %}
          <div class="text-center py-6 text-gray-400">
            <i class="fas fa-history text-3xl mb-2 block"></i>
            <p class="text-sm">No history yet</p>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block extra_scripts %}
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var assigneeSelect = document.querySelector('#assignee-select');
    if (assigneeSelect) {
      new TomSelect(assigneeSelect, { create: false, maxOptions: 50 });
    }
  });
</script>
{% endblock %}