import { Component, Input } from '@angular/core';
import { Post } from '../entities';

@Component({
	selector: 'app-post-card',
	template: `
		<div class="card hoverable">
			<div class="view hm-white-slight waves-light" mdbRippleRadius>
				<img id="post-image" class="img-fluid" [src]="post.image" alt="Article" />
				<a routerLink="/posts/{{post.key}}">
					<div class="mask"></div>
				</a>
			</div>
			<div class="card-body">
				<h4 class="card-title">{{post.title}}</h4>
				<p class="card-text">{{post.description}}</p>
			</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:'yyyy-MM-dd HH:mm:ss'}})</span>
			</div>
		</div>`,
	styles: [`
		div.card {
			margin-bottom: 50px;
		}
		.card .card-data {
			padding: 15px;
			background-color: #f5f5f5;
		}
		.creation-date-area {
			color: #bdbdbd;
			font-style: italic;
		}
		.author-img {
			width: 60px;
			height: 60px;
			border-radius: 50%;
			margin-right: 15px;
		}
		#post-image {
			width: 100%;
		}
	`]
})
export class PostCardComponent {
	@Input() post: Post;

	getAvatarUrl(): string {
		return this.post.author.image
				? `/api/images/loadAvatar/${this.post.author.image}`
				: './assets/images/default_user.png';
	}
}
