@extends('layouts/eatvio')

@section('page_title', 'Blog Post ' . $blogPost->title)
@php
    $blogPostViewsCount = views($blogPost)->unique()->count();
@endphp
@section('main_section')
<section class="py-5" id="main">
    <div class="container d-flex justify-content-between align-items-center flex-nowrap mb-4 px-4 py-3 --bg_white --shadow --radius --mw-1000 --f_bold --f_main overflow-x-xs-scroll">
        <a href="{{ route('blog_post.index') }}" class="d-flex w-2/5 align-items-center --f_bold">
            <svg width="17" height="16" class="me-2"><use xlink:href="#GoBack"></use></svg>
            <span class="d-none d-md-inline --f_main">Посты в блоге</span>
        </a>
        <div class="d-flex align-items-center fs-6">
            <svg width="20" height="14" class="me-2"><use xlink:href="#Eye_Black"></use></svg>
            <span class="me-4">{{ $blogPostViewsCount }}</span>
            <svg width="16" height="14" class="me-2"><use xlink:href="#Heart_Black"></use></svg>
            <span class="me-4">@livewire('blog-post.like-count', ['blogPost' => $blogPost])</span>
            <svg width="14" height="14" class="me-2"><use xlink:href="#Comment_Black"></use></svg>
            <span>{{ $blogPost->comments_count }}</span>
        </div>
        <div class="d-none d-md-flex w-2/5 ps-3 justify-content-end align-items-center">
            <span class="me-2 text-end">
                <a href="{{ route('profile.show', $author->id) }}" class="text-black">
                    {{ $author['name'] }}
                </a>
            </span>
            <a href="{{ route('profile.show', $author->id) }}" class="d-none d-sm-block overflow-hidden rounded-full" >
                <div class="centered-bg-img" style="background-image: url('{{ $author->profile_photo_url }}')"></div>
            </a>
        </div>
    </div>

    <div class="container mb-5 p-0 --mw-1000">
        <div class="--bg_white --shadow --radius --no_wrap">
            <div class="row m-0 p-3 position-relative">
                <div class="col-12 col-md-5 mb-2 mb-md-0 ps-0 pe-0 pe-md-3">
                    <img src="/storage/{{ $blogPost->image }}" class="w-full --radius">
                </div>
                <div class="col-12 col-md-7 pe-0 d-flex flex-column justify-content-between">
                    <div>
                        <div class="mb-3 fs-18 --f_bold --no_wrap_normal">{{ $blogPost->title }}</div>
                        <div class="mt-3 lh-sm --no_wrap_normal">
                            <small>
                                {!! $blogPost->description !!}
                            </small>
                        </div>
                    </div>
                    <div class="mt-3 fs-14 --f_bolder">
                        @if(filter_var($blogPost->youtube_url, FILTER_VALIDATE_URL))
                            <a href="{{ $blogPost->youtube_url }}" class="d-inline-flex align-items-center" target="_blank">
                                <span class="--f_main">Посмотреть рецепт на YouTube</span>
                                <svg width="18" height="14" class="ms-2"><use xlink:href="#YouTubeIcon"></use></svg>
                            </a>
                        @endif
                    </div>
                </div>
                <ul class="navbar-nav --abs --dotted --r w-auto mt-2 me-2 mt-md-3 me-md-3 p-0" style="--bs-scroll-height:100px;">
                    <li class="nav-item dropdown">
                        <a id="dLabel" class="nav-link py-0 dropdown-toggle-js" href="#" data-bs-toggle="dropdown" aria-expanded="false" role="button">
                            <svg width="18" height="4"><use xlink:href="#Dots"></use></svg>
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                            <li><a class="dropdown-item" href="{{ route('blog_post.edit', $blogPost->id) }}">Edit</a></li>
                            <li><a class="dropdown-item" href="#">Другое действие</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">Что-то еще</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="row m-0 mt-2 p-3 bg_lightest_blue-v2">
                <div class="col-12 col-md-3 mt-3 mt-md-0 fs-14">
                    <div class="h6 mb-2 mb-md-3 --f_bold --f_grey text-uppercase">Теги:</div>
                    <div class="fs-6 --tags --m_large --no_wrap_normal">
                        @foreach($blogPost->tags as $curTag)
                        <a href="{{ $curTag->index_url }}" class="btn badge --radius --bg-blue --f_bold --f_main">{{ $curTag->name }}</a>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="d-flex p-4 align-items-center justify-content-between justify-content-sm-center --f_bold">
                <a href="#" class="d-flex align-items-center me-4 me-sm-5 --f_main">
                    <small>
                        <svg width="21" height="20" class="me-1">
                            <use xlink:href="#ActionComment"></use>
                        </svg>
                        Комментировать
                    </small>
                </a>
                @livewire('blog-post.like', ['blogPost' => $blogPost])
                <a href="#" class="d-flex align-items-center --f_main">
                    <small>
                        <svg width="21" height="22" class="me-1">
                            <use xlink:href="#Share"></use>
                        </svg>
                        <span class="d-none d-sm-inline">Поделится</span>
                    </small>
                </a>
            </div>
        </div>
    </div>
    <div id="commentsList" class="container p-0 --mw-1000">
        @livewire('blog-post.comment.show', ['blogPost' => $blogPost])
    </div>
    <div class="container px-0 mb-4 --mw-1000 --bg_white --radius fs-4_5">
        @livewire('blog-post.comment.create', ['blogPost' => $blogPost, 'user' => Auth::user()])
    </div>
</section>
@endsection
@push('jq_scripts')
  	<script src="/js/bootstrap.min.js"></script>
	<script src="/js/bootstrap.bundle.min.js"></script>
@endpush