@extends('themes.flaty.layouts.single')
@section('title', $blogArticle->title)
@section('description', $blogArticle->short_description)
@section('og_image', asset($blogArticle->image))
@section('hide_header', true)
@section('content')
    <section class="section">
        <div class="container">
            <div class="section-body">
                <div class="row g-3">
                    <div class="col-12 col-xl-8">
                        <div class="blog-post blog-post-single">
                            <div class="blog-post-header">
                                <img src="{{ asset($blogArticle->image) }}" alt="{{ $blogArticle->title }}"
                                    class="blog-post-img">
                            </div>
                            <div class="blog-post-body">
                                <a class="blog-post-title">
                                    <h5>{{ $blogArticle->title }}</h5>
                                </a>
                                <div class="mb-3">
                                    <div class="row row-cols-auto gx-3 gy-2 align-items-center">
                                        <div class="col">
                                            <span class="blog-post-meta">
                                                <i class="far fa-user"></i>
                                                <span>{{ $blogArticle->admin->name }}</span>
                                            </span>
                                        </div>
                                        <div class="col">
                                            <span class="blog-post-meta">
                                                <i class="fa-regular fa-calendar"></i>
                                                <time>{{ dateFormat($blogArticle->created_at) }}</time>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <x-ad alias="blog_article_top" @class('ad-728x90 mb-3') />
                                <div class="blog-content">
                                    {!! $blogArticle->content !!}
                                </div>
                                <x-ad alias="blog_article_bottom" @class('ad-728x90 my-3') />
                            </div>
                            <div class="blog-post-footer px-0">
                                <div class="mb-4">
                                    @include('themes.flaty.partials.share-buttons', [
                                        'link' => url()->current(),
                                    ])
                                </div>
                                <div class="comments">
                                    <h5 class="comments-title">
                                        <i class="far fa-comments me-2"></i>{{ translate('Comments', 'blog') }}
                                        ({{ $blogArticleComments->count() }})
                                    </h5>
                                    @forelse ($blogArticleComments as $blogArticleComment)
                                        <div class="comment">
                                            <div class="comment-img">
                                                <img src="{{ asset($blogArticleComment->user->avatar) }}"
                                                    alt="{{ $blogArticleComment->user->name }}">
                                            </div>
                                            <div class="comment-info">
                                                <div class="d-flex flex-column">
                                                    <h6 class="comment-title mb-1">
                                                        {{ $blogArticleComment->user->name }}</h6>
                                                    <time
                                                        class="comment-time text-muted mb-2">{{ dateFormat($blogArticleComment->created_at) }}</time>
                                                </div>
                                                <p class="comment-text mb-0 text-muted">{!! replace_br($blogArticleComment->comment) !!}</p>
                                            </div>
                                        </div>
                                    @empty
                                        <span class="text-muted">{{ translate('No comments found', 'blog') }}</span>
                                    @endforelse
                                </div>
                            </div>
                        </div>
                        <div class="card-v blog-card mt-3">
                            @auth
                                <h4 class="blog-side-title mb-4">{{ translate('Leave a comment', 'blog') }}</h4>
                                <form action="{{ route('blog.article', $blogArticle->slug) }}" method="POST">
                                    @csrf
                                    <div class="mb-3">
                                        <textarea name="comment" class="form-control p-3" rows="6" placeholder="{{ translate('Your comment', 'blog') }}"
                                            required></textarea>
                                    </div>
                                    <x-captcha />
                                    <button class="btn btn-primary btn-md">{{ translate('Publish', 'blog') }}</button>
                                </form>
                            @else
                                <div class="text-muted text-center">
                                    {{ translate('Login or create account to leave comments', 'blog') }}
                                </div>
                            @endauth
                        </div>
                    </div>
                    @include('themes.flaty.blog.includes.sidebar')
                </div>
            </div>
        </div>
    </section>
@endsection