@extends('layouts.legacy')

@php
    use Carbon\Carbon;
@endphp

@section('content')
<div class="container-fluid legacy-page">
    <div class="effect2 page-header-wrap">
        <header class="page-heading">
            <div class="navigation"><a class="badge" href="/forum">Forum</a></div>
            <h1 class="page-header">{{ $topic->topic }}</h1>
            @if (!empty($topic->discuss))
                <p>{!! $topic->discuss !!}</p>
            @endif
        </header>
    </div>

    <div class="panel panel-default effect2">
        <div class="panel-heading"><strong>Posts</strong></div>
        <div class="panel-body">
            @forelse ($posts as $post)
                <div class="panel panel-default effect2" style="overflow:hidden;">
                    <div class="panel-heading clearfix">
                        <div class="pull-right text-muted">{{ $post->post_date ? Carbon::parse($post->post_date)->format('d.m.Y H:i') : '' }}</div>
                        <strong>{{ $post->uname ?? 'Anonymous' }}</strong>
                    </div>
                    <div class="panel-body" style="display:flex; gap:12px;">
                        <div style="min-width:52px;">
                            @if (!empty($post->user_id) && !empty($post->icon))
                                <img src="/avatar/{{ $post->user_id }}/{{ $post->icon }}" alt="{{ $post->uname }}" width="50" height="50" class="img-thumbnail">
                            @else
                                <div class="img-thumbnail" style="width:50px;height:50px;"></div>
                            @endif
                        </div>
                        <div style="flex:1;">
                            {!! $post->message !!}
                        </div>
                    </div>
                </div>
            @empty
                <p>No posts yet.</p>
            @endforelse

            <div class="paginationMenu text-center">
                {{ $posts->withQueryString()->links('pagination::bootstrap-4') }}
            </div>
        </div>
    </div>
</div>
@endsection