<div class="rounded-xl border border-gray-200 bg-white shadow-sm transition hover:shadow-md dark:border-gray-700 dark:bg-gray-800" :class="{ 'ring-1 ring-blue-500 dark:ring-blue-400': state.selectedThreads.includes({{ $thread->id }}) }">
    <div class="flex flex-col gap-4 p-5 md:flex-row md:items-start md:justify-between md:gap-6 sm:p-6">
        <div class="md:w-3/6 text-center md:text-left">
            <span class="lead">
                <a href="{{ Forum::route('thread.show', $thread) }}" @if (isset($category)) style="color: {{ $category->color_light_mode }};" @endif class="text-lg font-semibold hover:opacity-80 transition-opacity">{{ $thread->title }}</a>
            </span>
            <br>
            <span class="inline-flex items-center gap-2 text-sm">
                <span class="text-gray-900 dark:text-gray-100">{{ $thread->authorName }}</span>
                <span class="text-gray-500 dark:text-gray-400">@include ('forum::partials.timestamp', ['carbon' => $thread->created_at])</span>
            </span>

            @if (!isset($category))
                <br>
                <a href="{{ Forum::route('category.show', $thread->category) }}" style="color: {{ $thread->category->color_light_mode }};" class="mt-2 inline-block text-sm font-medium hover:opacity-80 transition-opacity">{{ $thread->category->title }}</a>
            @endif
        </div>

        <div class="md:w-2/6 flex flex-wrap justify-center items-center md:justify-end gap-1">
            @if ($thread->pinned)
                <x-forum::badge type="info">{{ trans('forum::threads.pinned') }}</x-forum::badge>
            @endif
            @if ($thread->locked)
                <x-forum::badge type="warning">{{ trans('forum::threads.locked') }}</x-forum::badge>
            @endif
            @if ($thread->userReadStatus !== null && !$thread->trashed())
                <x-forum::badge type="success">{{ trans($thread->userReadStatus) }}</x-forum::badge>
            @endif
            @if ($thread->trashed())
                <x-forum::badge type="danger">{{ trans('forum::general.deleted') }}</x-forum::badge>
            @endif
            @if (!$thread->isApproved)
                <x-forum::badge type="warning">{{ trans('forum::general.pending_approval') }}</x-forum::badge>
            @endif
            <x-forum::badge :style="(isset($category) && $category->color_light_mode) ? 'background: '.$category->color_light_mode .';' : null">
                {{ trans('forum::general.replies') }}:
                {{ $thread->reply_count }}
            </x-forum::badge>
        </div>

        @if ($thread->lastPost)
            <div class="md:w-1/6 flex justify-center md:flex-col md:items-end text-sm">
                <a href="{{ Forum::route('thread.show', $thread->lastPost) }}" class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors">{{ trans('forum::posts.view') }} &raquo;</a>
                <div class="inline-flex items-center gap-2">
                    <span class="text-gray-900 dark:text-gray-100">{{ $thread->lastPost->authorName }}</span>
                    <span class="text-gray-500 dark:text-gray-400">@include ('forum::partials.timestamp', ['carbon' => $thread->lastPost->created_at])</span>
                </div>
            </div>
        @endif

        @if (isset($category) && isset($selectableThreadIds) && in_array($thread->id, $selectableThreadIds))
            <div class="" style="flex: 0;">
                <input type="checkbox" name="threads[]" :value="{{ $thread->id }}" v-model="state.selectedThreads" class="rounded border-gray-300 dark:border-gray-600 text-blue-500 dark:text-blue-400 focus:ring-blue-500 dark:focus:ring-blue-400 dark:bg-gray-700">
            </div>
        @endif
    </div>
</div>
