<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> <!------ Include the above in your HEAD tag ----------> <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>