@forelse($listresults as $question)
    <div class="list-group-item question-card {{ $question->is_pinned ? 'pinned' : '' }}">
        <div class="d-flex gap-3">            {{-- Content --}}
            <div class="flex-grow-1">
                <div class="d-flex align-items-center gap-2 mb-1">
                    @if ($question->is_pinned)
                        <span class="badge bg-warning">
                            <i class="fas fa-thumbtack me-1"></i>{{ __('labels.pinned') }}
                        </span>
                    @endif
                    <span
                        class="badge bg-{{ $question->status == 'answered' ? 'success' : ($question->status == 'pending' ? 'warning' : 'secondary') }} status-badge">
                        {{ __("labels.status_{$question->status}") }}
                    </span>
                    @if ($question->category)
                        <span class="badge bg-light text-dark">
                            <i class="fas fa-folder me-1"></i>{{ $question->category->name }}
                        </span>
                    @endif

                    @if ($question->asked_by == auth()->user()->id)
                        <span class="badge bg-primary">
                            <i class="fas fa-user me-1"></i>{{ __('labels.you_asked') }}
                        </span>
                    
                    @elseif (auth()->user()->isExpert() && $question->expert_id == auth()->user()?->expert?->id)
                        <span class="badge bg-success">
                            <i class="fas fa-user-check me-1"></i>{{ __('labels.assigned_to_you') }}
                        </span>
                    @endif

                </div>

                <div class="d-flex justify-content-between align-items-start">
                    <h6 class="mb-2">
                        <a href="{{ route('expert-questions.show', $question) }}" class="text-dark text-decoration-none">
                            {{ $question->title }}
                        </a>
                    </h6>

                    <div class="action-buttons d-flex gap-1">
                        @can('view', $question)
                            <a href="{{ route('expert-questions.show', $question) }}" class="btn-sm-custom btn btn-outline-info"
                                data-toggle="tooltip" data-placement="top" data-bs-toggle="tooltip"
                                title="{{ __('labels.details') }}">
                                <i class="fas fa-eye"></i>
                            </a>
                        @endcan
                        @can('update', $question)
                            <a href="{{ route('expert-questions.edit', $question) }}"
                                class="btn-sm-custom btn btn-outline-secondary" data-toggle="tooltip" data-placement="top"
                                data-bs-toggle="tooltip" title="{{ __('labels.edit') }}">
                                <i class="fas fa-edit"></i>
                            </a>
                        @endcan
                        @can('delete', $question)
                            <button onclick="deleteQuestion({{ $question->id }})" class="btn-sm-custom btn btn-outline-danger"
                                data-toggle="tooltip" data-placement="top" data-bs-toggle="tooltip"
                                title="{{ __('labels.delete') }}" {{--
                                class="action-btn delete-btn text-muted border-0 bg-transparent" --}}>
                                <i class="fas fa-trash"></i>
                            </button>
                        @endcan
                    </div>
                </div>

                <p class="text-muted small mb-2">
                    {{ Str::limit(strip_tags($question->question), 150) }}
                </p>

                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center gap-3">
                        {{-- Asker --}}
                        <div class="d-flex align-items-center gap-1">
                            @if ($question->is_anonymous)
                                <div class="expert-initials-small bg-secondary bg-opacity-10">
                                    <i class="fas fa-user-secret text-secondary"></i>
                                </div>
                                <span class="small text-muted">{{ __('labels.anonymous') }}</span>
                            @else
                                @if ($question->asker->avatar)
                                    <img src="{{ $question->asker->avatar }}" class="expert-avatar-small"
                                        alt="{{ $question->asker->name }}">
                                @else
                                    <div class="expert-initials-small bg-primary-opacity-10 text-primary">
                                        {{ strtoupper(substr($question->asker->name, 0, 1)) }}
                                    </div>
                                @endif
                                <span class="small text-muted">{{ $question->asker->name }}</span>
                            @endif
                        </div>

                        {{-- Expert --}}
                        @if ($question->expert)
                            <div class="d-flex align-items-center gap-1">
                                <i class="fas fa-arrow-right text-muted"></i>
                                @if ($question->expert->user->avatar)
                                    <img src="{{ $question->expert->user->avatar }}" class="expert-avatar-small"
                                        alt="{{ $question->expert->user->name }}">
                                @else
                                    <div class="expert-initials-small bg-success bg-opacity-10 text-success">
                                        {{ strtoupper(substr($question->expert->user->name, 0, 1)) }}
                                    </div>
                                @endif
                                <span class="small text-muted">{{ $question->expert->user->name }}</span>
                            </div>
                        @endif
                    </div>

                    <div class="d-flex align-items-center gap-3">
                        <span class="small text-muted">
                            <i class="fas fa-clock me-1"></i>
                            {{ $question->created_at->diffForHumans() }}
                        </span>
                        <span class="small text-muted">
                            <i class="fas fa-eye me-1"></i>
                            {{ $question->views }}
                        </span>
                        @if ($question->answered_at)
                            <span class="small text-success">
                                <i class="fas fa-check-circle me-1"></i>
                                {{ __('labels.answered') }}
                                {{ $question->answered_at->diffForHumans() }}
                            </span>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@empty
    <div class="text-center py-5">
        <div class="text-muted">
            <i class="fas fa-question-circle fa-3x mb-3"></i>
            <p>{{ __('messages.no_questions_found') }}</p>
        </div>
        @auth
            <a href="{{ route('expert-questions.create') }}" class="btn btn-primary mt-2">
                <i class="fas fa-plus me-1"></i>{{ __('labels.ask_first_question') }}
            </a>
        @endauth
    </div>
@endforelse