<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<article class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<header class="flex justify-between mb-4 pb-4 border-b">
<h4>{{ post.title }}</h4>
{{--
This tag let us know if the current user is logged in or not.
ref: http://adonisjs.com/docs/4.0/views#_loggedin
ref: http://adonisjs.com/docs/4.0/authentication#_loggedin
--}}
@loggedIn
<div class="flex">
<a class="flex shadow items-center justify-center text-grey-dark rounded-full h-10 w-10 bg-info-light mr-4" href="/posts/{{ post.id }}/edit">
@!component('icon.edit', { size: '25px' })
</a>
<a class="flex shadow items-center justify-center text-grey-dark rounded-full h-10 w-10 bg-danger-light" href="/posts/{{ post.id }}/delete">
@!component('icon.trash', { size: '25px' })
</a>
</div>
@endloggedIn
</header>
<p>
{{{ post.body }}}
</p>
</article>
