<div id="content" *ngIf="!notFound">
	<app-spinner *ngIf="!loaded"></app-spinner>
	<div class="card" *ngIf="loaded">
		<img [src]="post?.image" class="img-fluid" alt="Post image">

		<a *ngIf="owned"
				class="btn-card-floating waves-light white-text"
				routerLink="/posts/update/{{post.key}}"
				mdbTooltip="Modifier l'article" placement="bottom">
			<i class="fa fa-pen"></i>
		</a>

		<div class="card-body">
			<h1 class="card-title">{{post.title}}</h1>
			<h4>{{post.description}}</h4>
			<hr/>
			<div [innerHTML]="getContent()"></div>
		</div>

		<div class="card-data">
			<img [src]="getAvatarUrl()"
					class="author-img"
					[alt]="post.author.name"
					[mdbTooltip]="post.author.name"
					placement="bottom"/>
			Article écrit par {{post.author.name}}
			<span class="creation-date-area">({{post.creationDate | date:'HH:mm:ss dd/MM/yyyy'}})</span>
			<button *ngIf="owned" type="button" class="btn btn-danger waves-light float-right" (click)="alertDelete.show()" mdbRippleRadius>
				<i class="fa fa-trash mr-1"></i> Supprimer
			</button>
		</div>
	</div>

	<div mdbModal #alertDelete="mdb-modal" class="modal fade" role="dialog" aria-hidden="true">
		<div class="modal-dialog modal-notify modal-danger" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<p class="heading lead">Suppression de l'article</p>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="alertDelete.hide()">
						<span aria-hidden="true" class="white-text">×</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="text-center">
						<p>Êtes vous sûr de vouloir supprimer cet article ?</p>
					</div>
				</div>
				<div class="modal-footer">
					<button class="btn btn-outline-danger waves-effect waves-light"
							type="button"
							data-dismiss="modal"
							(click)="alertDelete.hide()"
							mdbRippleRadius>
						Annuler
					</button>
					<button class="btn btn-primary-modal waves-light white-text"
							type="button"
							data-dismiss="modal"
							(click)="deletePost()"
							mdbRippleRadius>
							<i class="fa fa-trash white-text"></i>
							Supprimer
					</button>
				</div>
			</div>
		</div>
	</div>
</div>
<app-not-found *ngIf="notFound"></app-not-found>
