{{define "comment_list"}}
{{template "header" .}}
<section class="max-w-6xl mx-auto px-4 py-12">
    <div class="flex items-center justify-between mb-6">
        <h2 class="text-3xl font-bold text-gray-900">{{index .Tr "admin_comments_title"}}</h2>
    </div>

    <!-- Status tabs -->
    <div class="flex gap-2 mb-6 text-sm">
        <a href="/admin/comments?status=pending"
            class="px-4 py-2 rounded-lg font-medium {{if eq .Status "pending"}}bg-blue-600 text-white{{else}}bg-gray-200 text-gray-700 hover:bg-gray-300{{end}} transition-colors">
            {{index .Tr "comment_status_pending"}}
            {{if gt .PendingCount 0}}<span class="ml-1 inline-flex items-center justify-center bg-red-500 text-white text-xs rounded-full px-2">{{.PendingCount}}</span>{{end}}
        </a>
        <a href="/admin/comments?status=approved"
            class="px-4 py-2 rounded-lg font-medium {{if eq .Status "approved"}}bg-blue-600 text-white{{else}}bg-gray-200 text-gray-700 hover:bg-gray-300{{end}} transition-colors">
            {{index .Tr "comment_status_approved"}}
        </a>
        <a href="/admin/comments?status=rejected"
            class="px-4 py-2 rounded-lg font-medium {{if eq .Status "rejected"}}bg-blue-600 text-white{{else}}bg-gray-200 text-gray-700 hover:bg-gray-300{{end}} transition-colors">
            {{index .Tr "comment_status_rejected"}}
        </a>
        <a href="/admin/comments?status=all"
            class="px-4 py-2 rounded-lg font-medium {{if eq .Status "all"}}bg-blue-600 text-white{{else}}bg-gray-200 text-gray-700 hover:bg-gray-300{{end}} transition-colors">
            {{index .Tr "comment_status_all"}}
        </a>
    </div>

    {{if .Success}}
    <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg mb-6">{{.Success}}</div>
    {{end}}

    <div class="space-y-4">
        {{range .Comments}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4">
            <div class="flex items-start gap-3">
                <img src="{{.GravatarURL}}" alt="" class="w-10 h-10 rounded-full bg-gray-100">
                <div class="flex-1 min-w-0">
                    <div class="flex flex-wrap items-center gap-2 text-sm">
                        <span class="font-semibold text-gray-800">{{.AuthorName}}</span>
                        {{if .Website}}<a href="{{.Website}}" target="_blank" rel="nofollow ugc noopener" class="text-blue-500 hover:underline text-xs">{{.Website}}</a>{{end}}
                        <span class="text-gray-400 text-xs">{{.MaskedEmail}}</span>
                        <span class="text-gray-300">·</span>
                        <span class="text-gray-400 text-xs">{{.CreatedAt.Format "2006-01-02 15:04"}}</span>
                        {{if .IPAddress}}<span class="text-gray-400 text-xs">IP: {{.IPAddress}}</span>{{end}}
                        {{if .IsPrivate}}<span class="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded">{{index $.Tr "comments_private_badge"}}</span>{{end}}
                        <span class="text-xs {{.StatusBadge}} px-2 py-0.5 rounded">{{.StatusLabel}}</span>
                    </div>
                    {{if .ArticleTitle}}
                    <a href="/article/{{.ArticleSlug}}#comment-{{.ID}}" target="_blank" class="text-xs text-gray-500 hover:text-blue-600 mt-1 inline-block">
                        ↗ {{.ArticleTitle}}
                    </a>
                    {{end}}
                    <div class="comment-body mt-2 text-sm text-gray-700 prose prose-sm max-w-none" data-md="{{.Content}}"></div>
                </div>
            </div>
            <div class="flex justify-end gap-3 mt-3 text-sm">
                {{if eq .Status 0}}
                <form action="/admin/comments/{{.ID}}/approve" method="post" class="inline">
                    <button type="submit" class="text-green-600 hover:text-green-800 font-medium cursor-pointer bg-transparent border-none">{{index $.Tr "comment_approve"}}</button>
                </form>
                {{end}}
                {{if ne .Status 2}}
                <form action="/admin/comments/{{.ID}}/reject" method="post" class="inline">
                    <button type="submit" class="text-orange-600 hover:text-orange-800 font-medium cursor-pointer bg-transparent border-none">{{index $.Tr "comment_reject"}}</button>
                </form>
                {{end}}
                <form action="/admin/comments/{{.ID}}/delete" method="post" class="inline"
                    onsubmit="return confirm('{{index $.Tr "comment_delete_confirm"}}');">
                    <button type="submit" class="text-red-600 hover:text-red-800 font-medium cursor-pointer bg-transparent border-none">{{index $.Tr "comment_delete"}}</button>
                </form>
            </div>
        </div>
        {{else}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-12 text-center text-gray-500">
            {{index .Tr "comment_empty"}}
        </div>
        {{end}}
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify/dist/purify.min.js"></script>
<script>
(function () {
    document.querySelectorAll('.comment-body[data-md]').forEach(function (el) {
        var raw = el.getAttribute('data-md') || '';
        var html = marked.parse(raw);
        el.innerHTML = DOMPurify.sanitize(html);
    });
})();
</script>
{{template "footer" .}}
{{end}}