<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">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <strong class="small">
                            {{ $comment->author?->name_first }} {{ $comment->author?->name_last }}
                        </strong>
                        <span class="text-muted small">
                            {{ ($comment->comment_created_at ?? $comment->created_at)?->format('d/m/Y H:i') }}
                        </span>
                    </div>
                    <p class="mb-0" style="white-space: pre-wrap;">{{ $comment->comment_text }}</p>
                </div>
            </div>
        @empty
            <p class="text-muted text-center py-3">No comments yet.</p>
        @endforelse
    </div>
</div>
