source ⟩ hypertext ⟩ views ⟩ comments.pug

mixin comment(post)
	- let commentClasses = post.verified ? ['comment', 'comment-from-admin'] : ['comment'];
	- let avatar = post.verified ? '/avatars/default/literallyme.jpg' : `/avatars/default/${post.hash.avatar}.png`
	- let escape = x => x.replace("<", "&lt;").replace(">", "&gt;").replace('"', "&quot;")
	li
		article(id=`comment-${post.id}` class=commentClasses)
			img.comment-avatar(src=avatar)
			header
				span.comment-from
					| #{tr('comments.saysBefore')}
					if post.website
						strong: a(href=post.website)= post.name
					else
						strong= post.name
					| #{tr('comments.saysAfter')}
				.comment-bio
					if post.hash.tripcode
						span.comment-tripcode= post.hash.tripcode
					if post.hash.tripcode && post.country
						|  
					if post.country
						+flag(post.country.toLowerCase()).comment-flag
			section.content!= filters['rubric-comment'](post.content)
			footer
				a.comment-stamp(href=`#comment-${post.id}`)= grimm.date.ce(lang, post.submitDate, 5, {month: "short"})
				button.comment-mention(title=tr('comments.reply') onclick=`prepend(${post.id})`)= `@${post.id}`

mixin comment-form(id)
	- let optional = tr('comments.optional')
	- let query = `/post-comment?pageid=${slug.replace(/\//g, "%2F")}&lang=${lang}${id ? `&id=${id}` : ""}`
	form.comments-form(action=query method="post" hx-boost="true" hx-target="this" hx-push-url="false")
		.comments-form-metadata
			div
				label(for="comments-form-name")= tr('comments.name')
					strong(role="presentation") *
				input#comments-form-name(type="text" name="name" placeholder=tr('comments.namePlaceholder') required)
			div
				label(for="comments-form-website")= tr('comments.website')
					| !{optional}
				input#comments-form-website(type="text" name="website" placeholder=tr('comments.websitePlaceholder'))
			div
				label(for="comments-form-hashcode")= tr('comments.tripcode')
					| !{optional}
				input#comments-form-hashcode(type="text" name="hashcode")
			div.sr-only
				label(for="comments-form-email")!= tr('comments.email')
				input#comments-form-email(type="text" name="email" placeholder="dont.fill@this.lol")
		.comments-form-commentarea
			label(for="comments-form-comment")= tr('comments.textarea')
				strong(role="presentation") *
			textarea#comments-form-comment(name="content" placeholder=tr('comments.textareaPlaceholder') required)
			small(hx-boost="false")!= tr('comments.textareaRules')
		.comments-form-confirm
			select#comments-form-select(name="planet" required)
				option(value)= tr('comments.selectDefault')
				option(value="bellerophon")= tr('comments.selectBellerophon')
				option(value="earth")= tr('comments.selectEarth')
				option(value="mercury")= tr('comments.selectMercury')
				option(value="omicron-5")= tr('comments.selectOmicron')
				option(value="vulcan")= tr('comments.selectVulcan')
			label(for="comments-form-select")= tr('comments.select')
				strong(role="presentation") *
			br
			input(type="submit" value=tr('comments.submit'))

mixin comments(id, subtitle)
	.comment-section(id=id)
		header.comment-header
			- let headerText = (comments.length) ? tr('comments.header')(comments.length) : tr('comments.headerNone');
			if id
				h2: a(href=`#${id}`)= headerText
			else
				h2= headerText
			if subtitle
				div.comment-subtitle= subtitle
		ol.comment-list
			each comment in comments
				+comment(comment)
		+comment-form(id)