@extends('layouts.dashboard')
@section('title', $topic->title)
@section('page_title', $topic->title)

@section('content')
    <nav aria-label="{{ __('Breadcrumb') }}">
        <ol class="breadcrumb small">
            <li class="breadcrumb-item"><a href="{{ route('forums.index') }}">{{ __('Forums') }}</a></li>
            <li class="breadcrumb-item"><a href="{{ route('forums.show', $topic->forum) }}">{{ $topic->forum->title }}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ $topic->title }}</li>
        </ol>
    </nav>

    <h5 class="mb-3">
        {{ $topic->title }}
        @if($topic->status === 'closed')
            <span class="badge bg-secondary ms-1">{{ __('Closed') }}</span>
        @endif
    </h5>

    {{-- Original post --}}
    <div class="card shadow-sm mb-4 border-primary-subtle">
        <div class="card-body">
            <div class="d-flex align-items-center gap-2 mb-3">
                <img src="{{ $topic->user?->avatarUrl() }}" alt="" width="44" height="44" class="rounded-circle object-fit-cover">
                <div>
                    <div class="fw-semibold">{{ $topic->user?->name ?? __('Unknown') }}</div>
                    <small class="text-muted">{{ $topic->created_at->diffForHumans() }}</small>
                </div>
            </div>
            <div class="topic-content" style="white-space: pre-line;">{{ $topic->content }}</div>
        </div>
    </div>

    {{-- Replies --}}
    <h6 class="mb-3"><i class="bi bi-chat-dots me-1"></i>{{ $topic->replies->count() }} {{ __('Replies') }}</h6>

    @forelse($topic->replies as $reply)
        <div class="card shadow-sm mb-3">
            <div class="card-body">
                <div class="d-flex align-items-center gap-2 mb-2">
                    <img src="{{ $reply->user?->avatarUrl() }}" alt="" width="36" height="36" class="rounded-circle object-fit-cover">
                    <div>
                        <div class="fw-semibold small">{{ $reply->user?->name ?? __('Unknown') }}</div>
                        <small class="text-muted">{{ $reply->created_at->diffForHumans() }}</small>
                    </div>
                </div>
                <div style="white-space: pre-line;">{{ $reply->reply }}</div>
            </div>
        </div>
    @empty
        <p class="text-muted">{{ __('No replies yet. Be the first to respond.') }}</p>
    @endforelse

    {{-- Reply form --}}
    @if($topic->status === 'closed')
        <div class="alert alert-secondary mt-4">
            <i class="bi bi-lock me-1"></i> {{ __('This topic is closed. No new replies can be posted.') }}
        </div>
    @else
        <div class="card shadow-sm mt-4">
            <div class="card-body">
                <h6 class="mb-3">{{ __('Post a Reply') }}</h6>
                <form action="{{ route('replies.store', $topic) }}" method="POST">
                    @csrf
                    <div class="mb-3">
                        <textarea name="reply" rows="4" class="form-control @error('reply') is-invalid @enderror" placeholder="{{ __('Write your reply...') }}" required>{{ old('reply') }}</textarea>
                        @error('reply')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                    <button class="btn btn-primary"><i class="bi bi-send me-1"></i> {{ __('Post Reply') }}</button>
                </form>
            </div>
        </div>
    @endif
@endsection