@extends('layouts.legacy')

@section('content')
<div class="container-fluid legacy-page">
    <div class="effect2 page-header-wrap">
        <header class="page-heading">
            <h1 class="page-header">{{ $page_title }}</h1>
            <p>List of artwork with latest comments received.</p>
        </header>
    </div>

    <div class="masonry">
        @foreach ($comments as $comment)
            <div class="masonry_item col-sm-6 col-md-4">
                <div class="comment_box effect3">
                    <div class="cb_image">
                        <a href="/profile/{{ $comment->commenter_id }}/{{ rawurlencode($comment->uname) }}">
                            <img src="/avatar/{{ (int)$comment->commenter_id }}/{{ rawurlencode($comment->uname) }}" width="50" height="50" class="comment_avatar" alt="{{ $comment->uname }}">
                        </a>
                    </div>

                    <div class="bubble_comment panel panel-skinbase">
                        <div class="panel-heading">
                            <div class="pull-right">{{
                                \Carbon\Carbon::parse($comment->datetime)->diffForHumans() }}
                            </div>
                            <h5 class="panel-title">Comment by: <a href="/profile/{{ $comment->commenter_id }}/{{ rawurlencode($comment->uname) }}">{{ $comment->uname }}</a></h5>
                        </div>
                        <div class="panel-body">
                            <div class="comment_box_image">
                                <a href="/art/{{ $comment->id }}/{{ $comment->artwork_slug }}">
                                    <img src="{{ $comment->thumb }}" alt="{{ $comment->name }}" class="img-thumbnail img-responsive">
                                </a>
                            </div>
                            <div class="comment_text mt-2">
                                {!! nl2br(e($comment->comment_description)) !!}
                            </div>

                            @if (!empty($comment->signature))
                                <div class="panel-footer comment-footer mt-2">
                                    {!! nl2br(e($comment->signature)) !!}
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

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