<div>
    {{-- ADD COMMENT --}}
    @can('addComment', $pensionCase)
        <div class="mb-4">
            <label class="form-label">New Comment</label>
            <textarea class="form-control @error('newComment') is-invalid @enderror"
                      wire:model="newComment"
                      rows="4"
                      placeholder="Write your comment here…"></textarea>
            @error('newComment')
            <div class="invalid-feedback">{{ $message }}</div>
            @enderror
            <div class="mt-2">
                <x-ui.button wire:click="addComment" style="primary" icon="mdi mdi-send">
                    Add Comment
                </x-ui.button>
            </div>
        </div>
    @endcan

    {{-- COMMENT LIST --}}
    <div>
        @forelse($comments as $comment)
            <div class="card border mb-3" wire:key="comment-{{ $comment->id }}">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <strong class="small">
                            @if($comment->author()->exists())
                                {{ $comment->author->name_first }} {{ $comment->author->name_last }}
                            @elseif($comment->comment_created_by)
                                {{ $comment->comment_created_by ?:  '—' }}
                            @else
                                -
                            @endif
                        </strong>
                        <span class="text-muted small">
                            {{ ($comment->comment_created_at ?? $comment->created_at)?->format('d/m/Y H:i') }}
                            @if($comment->updated_at && $comment->created_at && $comment->updated_at->gt($comment->created_at))
                                <em class="ms-1">(edited)</em>
                            @endif
                        </span>
                    </div>

                    @if($editingId === $comment->id)
                        <textarea class="form-control mb-2 @error('editingText') is-invalid @enderror"
                                  wire:model="editingText"
                                  rows="4"></textarea>
                        @error('editingText')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                        <div class="d-flex gap-2">
                            <x-ui.button wire:click="saveEdit" style="primary" icon="mdi mdi-content-save">
                                Save
                            </x-ui.button>
                            <x-ui.button wire:click="cancelEdit" style="secondary" icon="mdi mdi-close">
                                Cancel
                            </x-ui.button>
                        </div>
                    @else
                        <p class="mb-2" style="white-space: pre-wrap;">{{ $comment->comment_text }}</p>
                        @can('addComment', $pensionCase)
                            <div class="d-flex gap-2">
                                <button type="button"
                                        class="btn btn-sm btn-outline-secondary"
                                        wire:click="startEdit({{ $comment->id }})">
                                    <i class="mdi mdi-pencil"></i> Edit
                                </button>
                                <button type="button"
                                        class="btn btn-sm btn-outline-danger"
                                        wire:click="deleteComment({{ $comment->id }})"
                                        wire:confirm="Delete this comment?">
                                    <i class="mdi mdi-trash-can"></i> Delete
                                </button>
                            </div>
                        @endcan
                    @endif
                </div>
            </div>
        @empty
            <p class="text-muted text-center py-3">No comments yet.</p>
        @endforelse
    </div>
</div>
