<xf:macro name="comment_list" arg-comments="!" arg-content="!" arg-linkPrefix="!" arg-link="!" arg-linkParams="{{ {} }}" arg-page="!" arg-perPage="!" arg-totalItems="!" arg-pageParam="page" arg-canInlineMod="!">
	<xf:if is="$canInlineMod">
		<xf:js src="xf/inline_mod.js" min="1" />
	</xf:if>

	<div class="block block--messages"
		data-xf-init="{{ $canInlineMod ? 'inline-mod' : '' }}"
		data-type="xfmg_comment"
		data-href="{{ link('inline-mod') }}">

		<div class="block-outer"><xf:trim>

			<xf:pagenav
				page="{$page}" perpage="{$perPage}" total="{$totalItems}"
				link="{$link}" data="{$content}" params="{$linkParams}"
				pageparam="{$pageParam}" wrapperclass="block-outer-main" />

			<xf:if contentcheck="true">
				<div class="block-outer-opposite">
					<div class="buttonGroup">
						<xf:contentcheck>
							<xf:if is="$canInlineMod">
								<xf:macro template="inline_mod_macros" name="button" />
							</xf:if>
						</xf:contentcheck>
					</div>
				</div>
			</xf:if>

		</xf:trim></div>
		<div class="block-container"
			data-xf-init="{{ $xf.options.selectQuotable ? 'select-to-quote' : '' }}"
			data-message-selector=".js-comment">

			<div class="block-body js-replyNewCommentContainer">
				<xf:if is="$comments is not empty">
					<span class="u-anchorTarget" id="comments"></span>
					<xf:foreach loop="$comments" value="$comment">
						<xf:if is="$comment.comment_state == 'deleted'">
							<xf:macro name="comment_deleted" arg-comment="{$comment}" arg-content="{$content}" arg-linkPrefix="{$linkPrefix}" />
						<xf:else />
							<xf:macro name="comment" arg-comment="{$comment}" arg-content="{$content}" arg-linkPrefix="{$linkPrefix}" />
						</xf:if>
					</xf:foreach>
				<xf:else />
					<div class="blockMessage js-replyNoMessages">{{ phrase('xfmg_there_no_comments_to_display') }}</div>
				</xf:if>
			</div>
		</div>

		<div class="block-outer block-outer--after">
			<xf:pagenav
				page="{$page}" perpage="{$perPage}" total="{$totalItems}"
				link="{$link}" data="{$content}" params="{$linkParams}"
				pageparam="{$pageParam}" wrapperclass="block-outer-main" />
			<xf:showignored wrapperclass="block-outer-opposite" />
		</div>
	</div>

	<xf:macro name="comment_add" arg-comments="{$comments}" arg-content="{$content}" arg-linkPrefix="{$linkPrefix}" />
</xf:macro>

<xf:macro name="comment" arg-comment="!" arg-content="!" arg-linkPrefix="!">
	<xf:css src="xfmg_comment.less" />

	<article class="message message--simple message--comment{{ $comment.isIgnored() ? ' is-ignored' : '' }} js-comment js-inlineModContainer"
		data-author="{{ $comment.User.username ?: $comment.username }}"
		data-content="xfmg-comment-{$comment.comment_id}">

		<span class="u-anchorTarget" id="xfmg-comment-{$comment.comment_id}"></span>

		<div class="message-inner">
			<div class="message-cell message-cell--user">
				<xf:macro template="message_macros" name="user_info_simple" arg-user="{$comment.User}" arg-fallbackName="{$comment.username}" />
			</div>
			<div class="message-cell message-cell--main">
				<div class="js-quickEditTarget">
					<div class="message-content js-messageContent">
						<header class="message-attribution message-attribution--plain">
							<ul class="listInline listInline--bullet">
								<li class="message-attribution-user">
									<xf:avatar user="$comment.User" size="xxs" />
									<h4 class="attribution"><xf:username user="$comment.User" rich="true" defaultname="{$comment.username}" /></h4>
								</li>
								<li>
									<a href="{{ link('media/comments', $comment) }}" class="u-concealed"><xf:date time="$comment.comment_date" /></a>
								</li>
								<xf:if is="$comment.Rating">
									<li>
										<xf:macro template="rating_macros" name="stars"
											arg-rating="{$comment.Rating.rating}"
											arg-class="ratingStars--smaller" />
									</li>
								</xf:if>
							</ul>
						</header>

						<xf:if is="$comment.comment_state == 'deleted'">
							<div class="messageNotice messageNotice--deleted">
								<xf:macro template="deletion_macros" name="notice" arg-log="{$comment.DeletionLog}" />
							</div>
						<xf:elseif is="$comment.comment_state == 'moderated'" />
							<div class="messageNotice messageNotice--moderated">
								{{ phrase('this_message_is_awaiting_moderator_approval_and_is_invisible_to_normal') }}
							</div>
						</xf:if>
						<xf:if is="$comment.warning_message">
							<div class="messageNotice messageNotice--warning">
								{$comment.warning_message}
							</div>
						</xf:if>
						<xf:if is="$comment.isIgnored()">
							<div class="messageNotice messageNotice--ignored">
								{{ phrase('you_are_ignoring_content_by_this_member') }}
							</div>
						</xf:if>

						<div class="message-userContent">

							<article class="message-body js-selectToQuote">
								{{ bb_code($comment.message, 'xfmg_comment', $comment) }}
								<div class="js-selectToQuoteEnd">&nbsp;</div>
							</article>

						</div>

						<xf:if is="$comment.last_edit_date">
							<div class="message-lastEdit">
								<xf:if is="$comment.user_id == $comment.last_edit_user_id">
									{{ phrase('last_edited:') }} <xf:date time="{$comment.last_edit_date}" />
								<xf:else />
									{{ phrase('last_edited_by_moderator:') }} <xf:date time="{$comment.last_edit_date}" />
								</xf:if>
							</div>
						</xf:if>

						<xf:macro template="message_macros" name="signature" arg-user="{$comment.User}" />
					</div>
					
					<div class="reactionsBar js-reactionsList {{ $comment.reactions ? 'is-active' : '' }}">
						<xf:reactions content="{$comment}" link="media/comments/reactions" />
					</div>

					<footer class="message-footer">
						<xf:if contentcheck="true">
							<div class="message-actionBar actionBar">
								<xf:contentcheck>
									<xf:if contentcheck="true">
										<div class="actionBar-set actionBar-set--external">
											<xf:contentcheck>
												<xf:react content="{$comment}" link="media/comments/react" list="< .js-comment | .js-reactionsList" />
												<xf:if is="$content.canReplyToComment()">
													<xf:set var="$quoteLink">{{ link($linkPrefix . '/comment', $content, {'quote': $comment.comment_id}) }}</xf:set>
													<xf:if is="$xf.options.multiQuote">
														<a href="{$quoteLink}"
															class="actionBar-action actionBar-action--mq u-jsOnly js-multiQuote"
															title="{{ phrase('toggle_multi_quote_tooltip')|for_attr }}"
															data-message-id="{$comment.comment_id}"
															data-mq-action="add">
															{{ phrase('quote') }}
														</a>
													</xf:if>
													<a href="{$quoteLink}"
														class="actionBar-action actionBar-action--reply"
														title="{{ phrase('reply_quoting_this_message')|for_attr }}"
														data-xf-click="quote"
														data-quote-href="{{ link('media/comments/quote', $comment) }}">{{ phrase('reply') }}</a>
												</xf:if>
											</xf:contentcheck>
										</div>
									</xf:if>

									<xf:if contentcheck="true">
										<div class="actionBar-set actionBar-set--internal">
											<xf:contentcheck>
												<xf:if is="$comment.canUseInlineModeration()">
													<span class="actionBar-action actionBar-action--inlineMod">
														<xf:checkbox standalone="true">
															<xf:option value="{$comment.comment_id}"
																class="js-inlineModToggle"
																data-xf-init="tooltip"
																title="{{ phrase('select_for_moderation') }}"
																label="{{ phrase('select_for_moderation') }}"
																hiddenlabel="true" />
														</xf:checkbox>
													</span>
												</xf:if>
												<xf:if is="$comment.canReport()">
													<a href="{{ link('media/comments/report', $comment) }}" class="actionBar-action actionBar-action--report" data-xf-click="overlay">{{ phrase('report_verb') }}</a>
												</xf:if>
												<xf:if is="$comment.canEdit()">
													<xf:js src="xf/message.js" min="1" />
													<a href="{{ link('media/comments/edit', $comment) }}"
														class="actionBar-action actionBar-action--edit"
														data-xf-click="quick-edit"
														data-editor-target="< .js-quickEditTarget">{{ phrase('edit') }}</a>
												</xf:if>
												<xf:if is="$comment.edit_count AND $comment.canViewHistory()">
													<a href="{{ link('media/comments/history', $comment) }}" class="actionBar-action actionBar-action--history" data-xf-click="toggle" data-target="< .js-comment | .js-historyTarget">{{ phrase('history') }}</a>
												</xf:if>
												<xf:if is="$comment.canDelete()">
													<a href="{{ link('media/comments/delete', $comment) }}" class="actionBar-action actionBar-action--delete" data-xf-click="overlay">{{ phrase('delete') }}</a>
												</xf:if>
												<xf:if is="$comment.canCleanSpam()">
													<a href="{{ link('spam-cleaner', $comment) }}" class="actionBar-action actionBar-action--spam" data-xf-click="overlay">{{ phrase('spam') }}</a>
												</xf:if>
												<xf:if is="$xf.visitor.canViewIps() AND $comment.ip_id">
													<a href="{{ link('media/comments/ip', $comment) }}" class="actionBar-action actionBar-action--ip" data-xf-click="overlay">{{ phrase('ip') }}</a>
												</xf:if>
												<xf:if is="$comment.canWarn()">
													<a href="{{ link('media/comments/warn', $comment) }}" class="actionBar-action actionBar-action--warn">{{ phrase('warn') }}</a>
												<xf:elseif is="$comment.warning_id AND $xf.visitor.canViewWarnings()" />
													<a href="{{ link('warnings', {'warning_id': $comment.warning_id}) }}" class="actionBar-action actionBar-action--warn" data-xf-click="overlay">{{ phrase('view_warning') }}</a>
												</xf:if>
											</xf:contentcheck>
										</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</xf:if>
					</footer>

					<div class="js-historyTarget toggleTarget" data-href="trigger-href"></div>
				</div>
			</div>
		</div>
	</article>
</xf:macro>

<xf:macro name="comment_simple"
	arg-comment="!"
	arg-content="!">

	<div class="contentRow">
		<div class="contentRow-figure">
			<xf:avatar user="$comment.User" size="xxs" defaultname="{$comment.username}" />
		</div>
		<div class="contentRow-main contentRow-main--close">
			<a href="{{ link('media/comments', $comment) }}">{$content.title}</a>

			<div class="contentRow-snippet">
				{{ smilie(snippet($comment.message, 150, {'stripBbCode': true, 'stripQuote': true})) }}
			</div>

			<div class="contentRow-minor contentRow-minor--hideLinks">
				<ul class="listInline listInline--bullet">
					<li><xf:date time="{$comment.comment_date}" /></li>
				</ul>
			</div>
		</div>
	</div>
</xf:macro>

<xf:macro name="comment_lightbox" arg-comment="!" arg-content="!" arg-linkPrefix="!">
	<div class="message-responseRow">
		<div class="comment js-comment {{ $comment.isIgnored() ? 'is-ignored' : '' }}"
			data-author="{{ $comment.User.username ?: $comment.username }}"
			data-content="xfmg-comment-{$comment.comment_id}">
			<div class="comment-inner">
				<span class="comment-avatar">
					<xf:avatar user="$comment.User" size="xxs" defaultname="{$comment.username}" />
				</span>
				<div class="comment-main">
					<span class="u-anchorTarget" id="xfmg-comment-{$comment.comment_id}"></span>

					<div class="js-quickEditTarget">
						<div class="comment-content">
							<div class="comment-contentWrapper">
								<ul class="listInline listInline--bullet">
									<li><xf:username user="$comment.User" rich="true" defaultname="{$comment.username}" class="comment-user" /></li>
									<xf:if is="$comment.Rating">
										<li>
											<xf:macro template="rating_macros" name="stars"
												arg-rating="{$comment.Rating.rating}"
												arg-class="ratingStars--smaller" />
										</li>
									</xf:if>
								</ul>

								<article class="comment-body">{{ bb_code($comment.message, 'xfmg_comment', $comment) }}</article>
							</div>
						</div>

						<footer class="comment-footer">
							<div class="comment-actionBar actionBar">
								<xf:if contentcheck="true">
									<div class="actionBar-set actionBar-set--external">
										<xf:contentcheck>
											<xf:react content="{$comment}" link="media/comments/react" list="< .js-comment | .js-commentReactionsList" />
										</xf:contentcheck>
									</div>
								</xf:if>
								<div class="actionBar-set actionBar-set--internal">
									<span class="actionBar-action"><xf:date time="{$comment.comment_date}" /></span>
									<xf:if is="$comment.canReport()">
										<a href="{{ link('media/comments/report', $comment) }}" class="actionBar-action actionBar-action--report" data-xf-click="overlay">{{ phrase('report_verb') }}</a>
									</xf:if>

									<xf:if contentcheck="true">
										<a class="actionBar-action actionBar-action--menuTrigger is-displayed"
											data-xf-click="menu"
											title="{{ phrase('more_options')|for_attr }}"
											role="button"
											tabindex="0"
											aria-expanded="false"
											aria-haspopup="true">&#8226;&#8226;&#8226;</a>
										<div class="menu" data-menu="menu">
											<div class="menu-content">
												<h4 class="menu-header">{{ phrase('more_options') }}</h4>
												<xf:contentcheck>
													<xf:if is="$comment.canEdit()">
														<xf:js src="xf/message.js" min="1" />
														<a href="{{ link('media/comments/edit', $comment, {'lightbox': 1}) }}"
															class="menu-linkRow"
															data-menu-closer="true"
															data-xf-click="quick-edit"
															data-editor-target="[data-content=xfmg-comment-{$comment.comment_id}] .js-quickEditTarget">{{ phrase('edit') }}</a>
													</xf:if>

													<xf:if is="$comment.edit_count AND $comment.canViewHistory()">
														<a href="{{ link('media/comments/history', $comment) }}" class="menu-linkRow" data-xf-click="toggle" data-menu-closer="true" data-target="[data-content=xfmg-comment-{$comment.comment_id}] .js-historyTarget">{{ phrase('history') }}</a>
													</xf:if>

													<xf:if is="$comment.canDelete()">
														<a href="{{ link('media/comments/delete', $comment) }}" class="menu-linkRow" data-xf-click="overlay">{{ phrase('delete') }}</a>
													</xf:if>

													<xf:if is="$comment.canCleanSpam()">
														<a href="{{ link('spam-cleaner', $comment) }}" class="menu-linkRow" data-xf-click="overlay">{{ phrase('spam') }}</a>
													</xf:if>
													<xf:if is="$xf.visitor.canViewIps() AND $comment.ip_id">
														<a href="{{ link('media/comments/ip', $comment) }}" class="menu-linkRow" data-xf-click="overlay">{{ phrase('ip') }}</a>
													</xf:if>
													<xf:if is="$comment.canWarn()">
														<a href="{{ link('media/comments/warn', $comment) }}" class="menu-linkRow">{{ phrase('warn') }}</a>
													<xf:elseif is="$comment.warning_id AND $xf.visitor.canViewWarnings()" />
														<a href="{{ link('warnings', {'warning_id': $comment.warning_id}) }}" class="menu-linkRow" data-xf-click="overlay">{{ phrase('view_warning') }}</a>
													</xf:if>
												</xf:contentcheck>
											</div>
										</div>
									</xf:if>
								</div>
							</div>
							<div class="comment-reactions js-commentReactionsList {{ $comment.reactions ? 'is-active' : '' }}">
								<xf:reactions content="{$comment}" link="media/comments/reactions" />
							</div>
						</footer>

						<div class="js-historyTarget toggleTarget" data-href="trigger-href"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</xf:macro>

<xf:macro name="comment_deleted" arg-comment="!" arg-content="!" arg-linkPrefix="!">
	<xf:css src="xfmg_comment.less" />

	<section class="message message--simple message--deleted message--comment{{ $comment.isIgnored() ? ' is-ignored' : '' }} js-comment js-inlineModContainer"
		data-author="{{ $comment.User.username ?: $comment.username }}"
		data-content="xfmg-comment-{$comment.comment_id}">

		<span class="u-anchorTarget" id="xfmg-comment-{$comment.comment_id}"></span>
		<div class="message-inner">
			<div class="message-cell message-cell--user">
				<xf:macro template="message_macros" name="user_info_simple" arg-user="{$comment.User}" arg-fallbackName="{$comment.username}" />
			</div>
			<div class="message-cell message-cell--main">
				<header class="message-attribution message-attribution--plain">
					<ul class="listInline listInline--bullet">
						<li class="message-attribution-user">
							<xf:avatar user="$comment.User" size="xxs" />
							<h4 class="attribution"><xf:username user="$comment.User" rich="true" defaultname="{$comment.username}" /></h4>
						</li>
						<li><xf:date time="$comment.comment_date" /></li>
					</ul>
				</header>

				<div class="messageNotice messageNotice--deleted">
					<xf:macro template="deletion_macros" name="notice" arg-log="{$comment.DeletionLog}" />

					<a href="{{ link('media/comments/show', $comment) }}" class="u-jsOnly" data-xf-click="inserter" data-replace="[data-content=xfmg-comment-{$comment.comment_id}]">{{ phrase('show...') }}</a>
				</div>
			</div>
		</div>
	</section>
</xf:macro>

<xf:macro name="comment_deleted_lightbox" arg-comment="!" arg-content="!" arg-linkPrefix="!">
	<div class="message-responseRow">
		<div class="comment{{ $comment.isIgnored() ? ' is-ignored' : '' }}"
			data-author="{{ $comment.User.username ?: $comment.username }}"
			data-content="xfmg-comment-{$comment.comment_id}">

			<div class="comment-inner">
				<span class="comment-avatar">
					<xf:avatar user="$comment.User" size="xxs" defaultname="{$comment.username}" />
				</span>
				<div class="comment-main">
					<div class="comment-content">
						<div class="messageNotice messageNotice--deleted">
							<xf:macro template="deletion_macros" name="notice" arg-log="{$comment.DeletionLog}" />

							<a href="{{ link('media/comments/show', $comment, {'lightbox': 1}) }}" class="u-jsOnly" data-xf-click="inserter" data-replace="[data-content=xfmg-comment-{$comment.comment_id}]">{{ phrase('show...') }}</a>
						</div>
					</div>
					<div class="comment-actionBar actionBar">
						<div class="actionBar-set actionBar-set--internal">
							<span class="actionBar-action">
								<xf:date time="{$comment.comment_date}" />
								<span role="presentation" aria-hidden="true">&middot;</span>
								<xf:username user="{$comment.User}" defaultname="{$comment.username}" class="u-concealed" />
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</xf:macro>

<xf:macro name="comment_add" arg-comments="!" arg-content="!" arg-linkPrefix="!">
	<xf:set var="$isPreRegComment" value="{{ $content.canAddCommentPreReg() }}" />
	<xf:if is="$content.canAddComment() OR $isPreRegComment">
		<xf:form action="{{ link($linkPrefix . '/add-comment', $content) }}"
			ajax="true"
			draft="{{ link($linkPrefix . '/draft', $content) }}"
			class="block js-quickReply"
			data-xf-init="quick-reply{{ ($xf.visitor.isShownCaptcha() AND !$isPreRegComment) ? ' guest-captcha' : '' }}"
			data-message-container="< :prev | .js-replyNewCommentContainer">

			<xf:js src="xf/message.js" min="1" />
			<xf:set var="$lastPost" value="{$comments|last}" />

			<div class="block-container">
				<div class="block-body">
					<xf:macro template="quick_reply_macros" name="body"
						arg-message="{$content.draft_comment.message}"
						arg-messageSelector=".js-comment"
						arg-supportsMultiQuote="{$xf.options.multiQuote}"
						arg-multiQuoteHref="{{ link($linkPrefix . '/multi-quote', $content) }}"
						arg-multiQuoteStorageKey="multiQuoteMediaItem"
						arg-simple="{{ true }}"
						arg-submitText="{{ phrase('post_comment') }}"
						arg-lastDate="{$lastPost.comment_date}"
						arg-showGuestControls="{{ !$isPreRegComment }}"
						arg-previewUrl="{{ link($linkPrefix . '/preview', $content) }}" />
				</div>
			</div>
		</xf:form>
	</xf:if>
</xf:macro>