{{define "title"}}Ticket Detail{{end}}

{{define "content"}}
{{with .Data}}
<div class="mb-4">
    <a href="/tickets" class="text-sm text-blue-600 hover:text-blue-500">&larr; Back to tickets</a>
</div>

<div class="bg-white p-6 rounded-lg shadow ring-1 ring-gray-200">
    <div class="flex items-start justify-between">
        <div>
            <h1 class="text-xl font-bold text-gray-900">{{.Ticket.Title}}</h1>
            <p class="mt-1 text-sm text-gray-500">
                {{if .Repo}}{{.Repo.Name}} &middot; {{end}}
                Created {{formatDate .Ticket.CreatedAt}}
            </p>
        </div>
        {{statusBadge (print .Ticket.Status)}}
    </div>

    <div class="mt-6 prose prose-sm max-w-none text-gray-700">
        <p class="whitespace-pre-wrap">{{.Ticket.Description}}</p>
    </div>
</div>

<!-- Comments -->
<div class="mt-8">
    <h2 class="text-lg font-semibold text-gray-900 mb-4">Comments</h2>

    {{if .Comments}}
    <div class="space-y-4">
        {{range .Comments}}
        <div class="bg-white p-4 rounded-lg shadow ring-1 ring-gray-200">
            <div class="flex items-center justify-between mb-2">
                <span class="text-sm font-medium text-gray-900">{{.UserName}}</span>
                <span class="text-xs text-gray-500">{{formatDateTime .CreatedAt}}</span>
            </div>
            <p class="text-sm text-gray-700 whitespace-pre-wrap">{{.Body}}</p>
        </div>
        {{end}}
    </div>
    {{else}}
    <p class="text-sm text-gray-500">No comments yet.</p>
    {{end}}

    <!-- Add Comment -->
    <form method="POST" action="/tickets/{{.Ticket.ID}}/comments" class="mt-6">
        <input type="hidden" name="gorilla.csrf.Token" value="{{$.CSRFToken}}">
        <div>
            <label for="body" class="sr-only">Add a comment</label>
            <textarea name="body" id="body" rows="3" required
                      placeholder="Add a comment..."
                      class="block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"></textarea>
        </div>
        <div class="mt-3 flex justify-end">
            <button type="submit" class="rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-blue-500">Add Comment</button>
        </div>
    </form>
</div>
{{end}}
{{end}}