@extends('layouts.app')

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

@section('content')




<section class="position-relative overflow-hidden pb-3 pt-xl-9">
	<div class="container">
		<div class="row g-4 g-lg-6">

			<!-- Title and author -->
			<div class="col-lg-8 mx-auto text-center">
				<a href="#" class="badge text-bg-dark mb-4"> {{ $post['category']['name']}}</a>
				<h1 class="h2 mb-0">{{ $post ['title']}}</h1>

				<!-- Author and actions -->
				<div class="d-sm-flex justify-content-center justify-content-sm-between align-items-center text-start mt-5">
					<!-- Avatar -->
					<div class="d-flex justify-content-center align-items-center mb-5 mb-sm-0">
						<div class="avatar flex-shrink-0">
							<img class="avatar-img rounded-circle" src="{{$post['user']['avatar']}}" alt="avatar">
						</div>
						<!-- Info -->
						<div class="ms-2">
							<h6 class="mb-0"><a href="#">{{ $post['user']['name']}}</a></h6>
							<small>{{ $post['created_at']}}</small>
						</div>
					</div>
				</div>
			</div>

			<!-- Image -->
			<div class="col-lg-10 mx-auto text-center">
				<img src="{{$post['image']}}" class="img-fluid rounded" alt="blog-img">
			</div>

			<!-- Content -->
			<div class="col-lg-8 mx-auto">
                {!!  $post['content']!!} 
			</div>	

			<!-- Quote and actions -->
			<div class="col-lg-8 mx-auto text-center">
				<!-- Popular tags -->
				<div class="align-items-center">
					<h6>Tags :</h6>
					<ul class="list-inline mb-0">
                        @foreach ($post['tags'] as $tag)
                        <li class="list-inline-item"> <a class="btn btn-outline-light btn-sm mb-lg-0" href="#">{{$tag['name']}}</a> </li>

                        @endforeach
					</ul>
				</div>
			</div>
		</div> <!-- Row END -->
	</div>
</section>
@endsection