// Post Details Modal Component
Vue.component(
	'post-details-modal',
	{
		props: ['post'],
		template: `
		< div class        = "modal-overlay" >
		< div class        = "modal-content" >
		< header class     = "modal-header" >
			< h3 > Post Details < / h3 >
			< button class = "close-btn" @click = "$emit('close')" > × < / button >
		< / header >
		< div class        = "modal-body post-details-grid" >
			< div class = "detail-item" > < strong > Title: < / strong > {{ post.title }} < / div >
			< div class = "detail-item" > < strong > Status: < / strong > {{ post.status }} < / div >
			< div class = "detail-item" > < strong > ID: < / strong > {{ post.id }} < / div >
			< div class = "detail-item" > < strong > Category: < / strong > {{ post.category }} < / div >
			< div class = "detail-item" > < strong > Language: < / strong > {{ post.language }} < / div >
			< div class = "detail-item" > < strong > Publish Date: < / strong > {{ post.publish_date }} < / div >
			< div class = "detail-item" > < strong > Created At: < / strong > {{ post.created_at }} < / div >
			< div class = "detail-item" > < strong > Credits Used: < / strong > {{ post.credits }} < / div >
			< div class = "detail-item" > < strong > Exact Title: < / strong > {{ post.exact_title }} < / div >
			< div class = "detail-item" > < strong > Content Length: < / strong > {{ post.content_length }} < / div >
		< / div >
		< / div >
		< / div >
		`
	}
);