@extends('layouts.app')

@section('title', $post['title'] )

@section('content')



<main class="page-wrapper">


    <div class="container py-lg-3 py-xl-4 py-xxl-5">
        <section class="py-5">
            <!-- Post title + Meta  -->
            <h1 class="pb-3" style="max-width: 970px;">{{$post['title']}}</h1>
            <div class="d-flex flex-md-row flex-column align-items-md-center justify-content-md-between mb-3">
                <div class="d-flex align-items-center flex-wrap text-muted mb-md-0 mb-4">
                    <div class="fs-xs border-end pe-3 me-3 mb-2">
                        <span class="badge bg-faded-primary text-primary fs-base">{{ $post['category']['name'] }}</span>
                    </div>
                    <div class="fs-sm pe-3 me-3 mb-2">{{ $post['created_at']}}</div>
                </div>
            </div>
        </section>


        <!-- Post image (parallax) -->
        <div class="jarallax mb-lg-5 mb-4" data-jarallax="" data-speed="0.35" style="height: 36.45vw; min-height: 300px;" data-jarallax-original-styles="height: 36.45vw; min-height: 300px;">

            <div id="jarallax-container-0" class="jarallax-container" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; z-index: -100; clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 100%);">
                <div class="jarallax-img" style="background-image: url({{$post['image']}}); object-fit: cover; object-position: 50% 50%; max-width: none; position: fixed; top: 0px; left: 0px; width: 820px; height: 872px; overflow: hidden; pointer-events: none; transform-style: preserve-3d; backface-visibility: hidden; margin-top: 154px; transform: translate3d(0px, -28.1586px, 0px);"></div>
            </div>
        </div>


        <!-- Post content + Sharing -->
        <section class="container mb-5 pt-4 pb-2 py-mg-4">

            <!-- Content -->
            {!! $post['content'] !!}


            <!-- Tags -->
            <hr class="mb-4">
            <div class="d-flex flex-sm-row flex-column pt-2">
                <h6 class="mt-sm-1 mb-sm-2 mb-3 me-2 text-nowrap">Tags associés :</h6>
                <div>
                    @foreach ($post['tags'] as $tag)
                    <a href="#" class="btn btn-sm btn-outline-secondary me-2 mb-2">{{$tag['name']}}</a>
                    @endforeach
                </div>
            </div>

        </section>
    </div>
</main>


@endsection