@php /** @var \Illuminate\Support\Collection $comments */ @endphp
<div class="comment_table">
    <style>
        /* Temporary inline styles to repair comment list layout */
        .comment_table .kitchen_listbottomListHead{display:flex;border-bottom:1px solid #e5e5e5;}
        .comment_table .kitchen_listbottomListHead .kitchen_listbottomListHItem{flex:1;padding:8px 10px;font-weight:600;font-size:14px;}
        .comment_table .kitchen_listbottomListHead .w_20{width:40px;flex:0 0 40px;}
        .comment_table .kitchen_listbottomListBody{display:block;}
        .comment_table .kitchen_listbottomListBRow{display:flex;align-items:flex-start;border-bottom:1px solid #f1f1f1;}
        .comment_table .kitchen_listbottomListBRow:last-child{border-bottom:none;}
        .comment_table .kitchen_listbottomListBRow .kitchen_listbottomListBItem{flex:1;padding:8px 10px;font-size:14px;line-height:1.3;word-break:break-word;}
        .comment_table .kitchen_listbottomListBRow .w_20{width:40px;flex:0 0 40px;}
        .comment_table .drag-handle{cursor:grab;display:inline-block;padding:2px;}
        .comment_table .kitchen_listbottomListBItem a{display:inline-block;}
        /* Spacing & tab tweaks */
        .template_tabs .nav-tabs{margin-bottom:8px;}
        .template_tabs .nav-tabs .nav-link{font-weight:600;color:#444;background:#f5f5f5;border:1px solid #e2e2e2;border-bottom:none;border-top-left-radius:4px;border-top-right-radius:4px;padding:6px 14px;font-size:14px;}        
        .template_tabs .tab-pane{background:#ffffff;border:1px solid #d5d5d5;padding:10px 12px;border-radius:0 4px 4px 4px;}
        .comment_table{margin-top:6px;}
        .template_tabs .btn.add-comment-item-btn{margin-top:2px;}
    </style>
    
    <!-- Comment Search -->
    <div class="mb-3">
        <div class="input-group">
            <input type="text" class="form-control comment-search-input" placeholder="Search comments..." data-category-id="{{ $categoryId }}">
            <button class="btn btn-outline-secondary comment-search-clear" type="button" style="display: none;">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>
    
    <div class="divtable_mobscroll">
        <div class="kitchen_listbottomListHead">
            <div class="kitchen_listbottomListHItem w_20" style="width:30px;flex:0 0 30px;">
                <input type="checkbox" class="form-check-input comment-select-all" title="Select All" />
            </div>
            <div class="kitchen_listbottomListHItem w_20">&nbsp;</div>
            <div class="kitchen_listbottomListHItem">Title</div>
            <div class="kitchen_listbottomListHItem">Category</div>
            <div class="kitchen_listbottomListHItem">Language</div>
            <div class="kitchen_listbottomListHItem">Action</div>
        </div>
        <div class="kitchen_listbottomListBody sortable-comments" data-category-id="{{ $categoryId }}">
            @forelse($comments as $c)
                <div class="kitchen_listbottomListBRow" data-comment-row="{{ $c->id }}" data-sort="{{ $c->sort_order }}">
                    <div class="kitchen_listbottomListBItem" style="width:30px;flex:0 0 30px;">
                        <input type="checkbox" class="form-check-input comment-row-checkbox" value="{{ $c->id }}" />
                    </div>
                    <div class="kitchen_listbottomListBItem w_20">
                        <a href="javascript:void(0);" class="drag-handle"><img src="{{ asset('images/table_menue.svg') }}"></a>
                    </div>
                    <div class="kitchen_listbottomListBItem">{{ $c->title }}</div>
                    <div class="kitchen_listbottomListBItem">{{ optional($c->category)->title }}</div>
                    <div class="kitchen_listbottomListBItem">{{ optional($c->language)->name ?? 'Not specified' }}</div>
                    <div class="kitchen_listbottomListBItem">
                        <a href="javascript:void(0)" class="comment-preview-trigger" title="Preview" data-comment-id="{{ $c->id }}"><img src="{{ asset('images/view.svg') }}"></a>
                        <a href="javascript:void(0)" class="ps-3 comment-edit-trigger" data-comment-id="{{ $c->id }}"><img src="{{ asset('images/edit.svg') }}"></a>
                        <a href="javascript:void(0)" class="ps-3 comment-duplicate-trigger" data-comment-id="{{ $c->id }}"><img src="{{ asset('images/copy.svg') }}"></a>
                        <a href="javascript:void(0)" class="ps-3 comment-delete-trigger" data-comment-id="{{ $c->id }}"><img src="{{ asset('images/delete_black.svg') }}"></a>
                        <!-- <a href="javascript:void(0)" class="ps-3"><img src="{{ asset('images/vertical_menu.svg') }}" /></a> -->
                    </div>
                </div>
            @empty
                <div class="kitchen_listbottomListBItem w-100 text-muted py-2 text-center">No comments found.</div>
            @endforelse
        </div>
    </div>
</div>