@extends('layouts.app')

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

@section('content')
    <section class="py-5 mt-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: 1099px; height: 769.402px; overflow: hidden; pointer-events: none; transform-style: preserve-3d; backface-visibility: hidden; margin-top: 99.2988px; transform: translate3d(0px, -47.3512px, 0px);"
                data-jarallax-original-styles="background-image: url({{ $post['image'] }});">
            </div>
        </div>
    </div>




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

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


        

    </section>

@endsection