<xf:title>{$mediaItem.title}</xf:title>
<xf:h1 hidden="true" />

<xf:css src="xfmg_media_view.less" />
<xf:js prod="xfmg/image_noter-compiled.js" dev="xfmg/vendor/cropper/cropper.js, xfmg/image_noter.js" />

<xf:macro template="xfmg_page_macros" name="xfmg_page_options" arg-album="{$mediaItem.Album}" arg-category="{$mediaItem.Category}" arg-mediaItem="{$mediaItem}" />

<xf:set var="$descSnippet" value="{{ snippet($mediaItem.description, 250) }}" />

<xf:macro template="metadata_macros" name="metadata"
	arg-description="{$descSnippet}"
	arg-shareUrl="{{ link('canonical:media', $mediaItem) }}"
	arg-imageUrl="{$mediaItem.getCurrentThumbnailUrl(true)}"
	arg-canonicalUrl="{{ link('canonical:media', $mediaItem, {'page': $page}) }}" />

<xf:page option="ldJsonHtml">
<script type="application/ld+json">
{$mediaItem.structured_data|json(true)|raw}
</script>
</xf:page>

<xf:breadcrumb source="$mediaItem.getBreadcrumbs(false)" />

<xf:macro template="xfmg_media_view_macros" name="media_status" arg-mediaItem="{$mediaItem}" />

<div class="media">
	<xf:if is="$filmStripParams.prevItem">
		<a href="{{ link('media', $filmStripParams.prevItem) }}" class="media-button media-button--prev" data-xf-key="ArrowLeft"><i class="media-button-icon"></i></a>
	</xf:if>

	<div class="media-container"
		data-xf-init="{{ ($mediaItem.media_type == 'image') ? 'image-noter' : '' }}"
		data-toggle-id="#js-noterToggle"
		data-edit-url="{{ link('media/note-edit', $mediaItem) }}">

		<xf:macro template="xfmg_media_view_macros" name="media_content" arg-mediaItem="{$mediaItem}" arg-mediaNotes="{$mediaNotes}" />
	</div>

	<xf:if is="$filmStripParams.nextItem">
		<a href="{{ link('media', $filmStripParams.nextItem) }}" class="media-button media-button--next" data-xf-key="ArrowRight"><i class="media-button-icon"></i></a>
	</xf:if>
</div>

<div class="block js-mediaInfoBlock">
	<xf:macro template="xfmg_media_view_macros" name="media_film_strip" arg-mediaItem="{$mediaItem}" arg-filmStripParams="{$filmStripParams}" />

	<div class="block-container">
		<div class="block-body block-row xfmgInfoBlock">
			<div class="xfmgInfoBlock-title">
				<div class="contentRow contentRow--alignMiddle">
					<span class="contentRow-figure">
						<xf:avatar user="$mediaItem.User" size="s" defaultname="{$mediaItem.username}" />
					</span>
					<div class="contentRow-main">
						<h1 class="contentRow-title p-title-value"><xf:h1 /></h1>
						<div class="contentRow-lesser p-description">
							<ul class="listInline listInline--bullet">
								<li><xf:fa icon="fa-user" title="{{ phrase('xfmg_media_owner')|for_attr }}" /> <xf:username user="{$mediaItem.User}" defaultname="{$mediaItem.username}" class="u-concealed" /></li>
								<li><xf:fa icon="fa-clock" title="{{ phrase('xfmg_date_added')|for_attr }}" /> <xf:date time="{$mediaItem.media_date}" /></li>
								<xf:if is="$xf.options.enableTagging AND ($mediaItem.canEditTags() OR $mediaItem.tags)">
									<li>
										<xf:macro template="tag_macros" name="list"
											arg-tags="{$mediaItem.tags}"
											arg-tagList="tagList--mediaItem-{$mediaItem.media_id}"
											arg-editLink="{{ $mediaItem.canEditTags() ? link('media/tags', $mediaItem) : '' }}" />
									</li>
								</xf:if>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<xf:if is="$mirrorContainer">
				<div class="xfmgInfoBlock-originallyFrom">
					{{ phrase('xfmg_originally_posted_in_x', {'link': $mirrorContainer.link, 'title': $mirrorContainer.title}) }}
				</div>
			</xf:if>

			<xf:if is="$mediaItem.description">
				<div class="xfmgInfoBlock-description">
					<div class="bbCodeBlock bbCodeBlock--expandable js-expandWatch">
						<div class="bbCodeBlock-content">
							<div class="bbCodeBlock-expandContent js-expandContent">
								{{ structured_text($mediaItem.description) }}
							</div>
							<div class="bbCodeBlock-expandLink js-expandLink"><a role="button" tabindex="0">{{ phrase('click_to_expand') }}</a></div>
						</div>
					</div>
				</div>
			</xf:if>

			<xf:macro template="custom_fields_macros" name="custom_fields_view"
				arg-type="xfmgMediaFields"
				arg-group="below_media"
				arg-onlyInclude="{{ $mediaItem.category_id ? $mediaItem.Category.field_cache : $mediaItem.Album.field_cache }}"
				arg-set="{$mediaItem.custom_fields}" />
			
			<div class="reactionsBar js-reactionsList {{ $mediaItem.reactions ? 'is-active' : '' }}">
				<xf:reactions content="{$mediaItem}" link="media/reactions" />
			</div>

			<xf:if contentcheck="true">
				<div class="actionBar">
					<xf:contentcheck>
						<xf:if contentcheck="true">
							<div class="actionBar-set actionBar-set--external">
								<xf:contentcheck>
									<xf:react content="{$mediaItem}" link="media/react" list="< .js-mediaInfoBlock | .js-reactionsList" />
								</xf:contentcheck>
							</div>
						</xf:if>

						<xf:if contentcheck="true">
							<div class="actionBar-set actionBar-set--internal">
								<xf:contentcheck>
									<xf:if is="$mediaItem.canReport()">
										<a href="{{ link('media/report', $mediaItem) }}"
											class="actionBar-action actionBar-action--report"
											data-xf-click="overlay">{{ phrase('report_verb') }}</a>
									</xf:if>

									<xf:set var="$hasActionBarMenu" value="{{ false }}" />
									<xf:if is="$mediaItem.canEdit()">
										<a href="{{ link('media/edit', $mediaItem) }}"
											class="actionBar-action actionBar-action--edit actionBar-action--menuItem"
											data-xf-click="overlay">{{ phrase('edit') }}</a>
										<xf:set var="$hasActionBarMenu" value="{{ true }}" />
									</xf:if>
									<xf:if is="$mediaItem.canDelete()">
										<a href="{{ link('media/delete', $mediaItem) }}"
											class="actionBar-action actionBar-action--delete actionBar-action--menuItem"
											data-xf-click="overlay">{{ phrase('delete') }}</a>
										<xf:set var="$hasActionBarMenu" value="{{ true }}" />
									</xf:if>
									<xf:if is="$mediaItem.canCleanSpam()">
										<a href="{{ link('spam-cleaner', $mediaItem) }}"
											class="actionBar-action actionBar-action--spam actionBar-action--menuItem"
											data-xf-click="overlay">{{ phrase('spam') }}</a>
										<xf:set var="$hasActionBarMenu" value="{{ true }}" />
									</xf:if>
									<xf:if is="$xf.visitor.canViewIps() AND $mediaItem.ip_id">
										<a href="{{ link('media/ip', $mediaItem) }}"
											class="actionBar-action actionBar-action--ip actionBar-action--menuItem"
											data-xf-click="overlay">{{ phrase('ip') }}</a>
										<xf:set var="$hasActionBarMenu" value="{{ true }}" />
									</xf:if>
									<xf:if is="$mediaItem.canWarn()">
										<a href="{{ link('media/warn', $mediaItem) }}"
											class="actionBar-action actionBar-action--warn actionBar-action--menuItem">{{ phrase('warn') }}</a>
										<xf:set var="$hasActionBarMenu" value="{{ true }}" />
									<xf:elseif is="$mediaItem.warning_id AND $xf.visitor.canViewWarnings()" />
										<a href="{{ link('warnings', {'warning_id': $mediaItem.warning_id}) }}"
											class="actionBar-action actionBar-action--warn actionBar-action--menuItem"
											data-xf-click="overlay">{{ phrase('view_warning') }}</a>
										<xf:set var="$hasActionBarMenu" value="{{ true }}" />
									</xf:if>

									<xf:if is="$hasActionBarMenu">
										<a class="actionBar-action actionBar-action--menuTrigger"
											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" aria-hidden="true" data-menu-builder="actionBar">
											<div class="menu-content">
												<h4 class="menu-header">{{ phrase('more_options') }}</h4>
												<div class="js-menuBuilderTarget"></div>
											</div>
										</div>
									</xf:if>
								</xf:contentcheck>
							</div>
						</xf:if>
					</xf:contentcheck>
				</div>
			</xf:if>
		</div>
	</div>

	<div class="block-outer block-outer--after">
		<xf:if contentcheck="true">
			<div class="block-outer-opposite">
				<xf:contentcheck>
					<xf:if is="$mediaItem.canRate()">
						<xf:button href="{{ link('media/media-ratings/rate', $mediaItem) }}" overlay="true">
							{{ phrase('leave_rating') }}
						</xf:button>
					</xf:if>

					<xf:if is="$mediaItem.canAddNote()">
						<xf:button id="js-noterToggle" class="button--icon"
							data-active-label="{{ phrase('xfmg_stop_adding_note_tag') }}"
							data-active-icon="cancel"
							data-active-message="{{ phrase('xfmg_note_tag_mode_activated') }}"
							data-inactive-label="{{ phrase('xfmg_add_note_tag') }}"
							data-inactive-icon=""
							data-inactive-message="{{ phrase('xfmg_note_tag_mode_deactivated') }}">

							{{ phrase('xfmg_add_note_tag') }}
						</xf:button>
					</xf:if>

					<xf:if contentcheck="true">
						<div class="buttonGroup">
							<xf:contentcheck>
								<xf:if is="$mediaItem.canUndelete() AND $mediaItem.media_state == 'deleted'">
									<xf:button href="{{ link('media/undelete', $mediaItem) }}" class="button--link" overlay="true">
										{{ phrase('undelete') }}
									</xf:button>
								</xf:if>
								<xf:if is="$mediaItem.canApproveUnapprove() AND $mediaItem.media_state == 'moderated'">
									<xf:button href="{{ link('media/approve', $mediaItem) }}" class="button--link" overlay="true">
										{{ phrase('approve') }}
									</xf:button>
								</xf:if>
								<xf:if is="$mediaItem.canWatch()">
									<xf:button href="{{ link('media/watch', $mediaItem) }}" class="button--link"
										data-xf-click="switch-overlay"
										data-sk-watch="{{ phrase('watch') }}"
										data-sk-unwatch="{{ phrase('unwatch') }}">

										<xf:if is="{$mediaItem.Watch.{$xf.visitor.user_id}}">
											{{ phrase('unwatch') }}
										<xf:else />
											{{ phrase('watch') }}
										</xf:if>
									</xf:button>
								</xf:if>
								<xf:macro template="bookmark_macros" name="button"
									arg-content="{$mediaItem}"
									arg-confirmUrl="{{ link('media/bookmark', $mediaItem) }}" />

								<xf:if contentcheck="true">
									<div class="buttonGroup-buttonWrapper">
										<xf:button class="button--link menuTrigger" data-xf-click="menu" aria-expanded="false" aria-haspopup="true" title="{{ phrase('more_options') }}">&#8226;&#8226;&#8226;</xf:button>
										<div class="menu" data-menu="menu" aria-hidden="true">
											<div class="menu-content">
												<h4 class="menu-header">{{ phrase('more_options') }}</h4>
												<xf:contentcheck>
													<!--[XF:media_tools_menu:top]-->
													<xf:if is="$mediaItem.canSetAsAvatar()">
														<a href="{{ link('media/set-as-avatar', $mediaItem) }}" data-xf-click="overlay" class="menu-linkRow">
															{{ phrase('xfmg_set_as_avatar') }}
														</a>
														<xf:if is="$avatarUpdated">
															<a href="{{ link('account/avatar') }}" data-xf-click="overlay" data-load-auto-click="true" style="display: none"></a>
														</xf:if>
													</xf:if>
													<xf:if is="$mediaItem.canEdit()">
														<a href="{{ link('media/edit', $mediaItem) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('xfmg_edit_media_item') }}</a>
													</xf:if>
													<xf:if is="$mediaItem.canEditImage()">
														<a href="{{ link('media/edit-image', $mediaItem) }}" class="menu-linkRow">{{ phrase('xfmg_edit_image') }}</a>
													</xf:if>
													<xf:if is="$mediaItem.canChangeThumbnail()">
														<a href="{{ link('media/change-thumbnail', $mediaItem) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('xfmg_change_thumbnail') }}</a>
													</xf:if>
													<xf:if is="$mediaItem.canMove()">
														<a href="{{ link('media/move', $mediaItem) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('xfmg_move_media_item') }}</a>
													</xf:if>
													<xf:if is="$mediaItem.canDelete('soft')">
														<a href="{{ link('media/delete', $mediaItem) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('xfmg_delete_media_item') }}</a>
													</xf:if>
													<xf:if is="$mediaItem.canViewModeratorLogs()">
														<a href="{{ link('media/moderator-actions', $mediaItem) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('moderator_actions') }}</a>
													</xf:if>
													<!--[XF:media_tools_menu:before_footer]-->
													<xf:if is="$mediaItem.canUseInlineModeration()">
														<xf:js src="xf/inline_mod.js" min="1" />

														<div class="menu-footer"
															 data-xf-init="inline-mod"
															 data-type="xfmg_media"
															 data-href="{{ link('inline-mod') }}"
															 data-toggle=".js-mediaInlineModToggle">
															<xf:checkbox>
																<xf:option class="js-mediaInlineModToggle" value="{$mediaItem.media_id}">{{ phrase('select_for_moderation') }}</xf:option>
															</xf:checkbox>
														</div>
													</xf:if>
													<!--[XF:media_tools_menu:bottom]-->
												</xf:contentcheck>
											</div>
										</div>
									</div>
								</xf:if>
							</xf:contentcheck>
						</div>
					</xf:if>
				</xf:contentcheck>
			</div>
		</xf:if>
	</div>
</div>

<xf:if is="$mediaItem.canViewComments()">
	<div class="columnContainer">
		<div class="columnContainer-comments">
			<xf:macro template="xfmg_comment_macros" name="comment_list"
				arg-comments="{$comments}"
				arg-content="{$mediaItem}"
				arg-linkPrefix="media/media-comments"
				arg-link="media"
				arg-page="{$page}"
				arg-perPage="{$perPage}"
				arg-totalItems="{$totalItems}"
				arg-canInlineMod="{$canInlineModComments}" />
		</div>

		<div class="columnContainer-sidebar">
			<xf:macro template="xfmg_media_view_macros" name="info_sidebar" arg-mediaItem="{$mediaItem}" />

			<xf:macro template="xfmg_media_view_macros" name="extra_info_sidebar" arg-mediaItem="{$mediaItem}" />

			<xf:macro template="xfmg_media_view_macros" name="additional_sidebar" arg-mediaItem="{$mediaItem}" />

			<xf:macro template="xfmg_media_view_macros" name="exif_sidebar" arg-mediaItem="{$mediaItem}" />

			<xf:macro template="xfmg_media_view_macros" name="user_tags_sidebar" arg-mediaNotes="{$mediaNotes}" />

			<xf:macro template="xfmg_media_view_macros" name="share_sidebar" arg-mediaItem="{$mediaItem}" />
		</div>
	</div>
<xf:else />
	<xf:sidebar key="infoSidebar">
		<xf:macro template="xfmg_media_view_macros" name="info_sidebar" arg-mediaItem="{$mediaItem}" />
	</xf:sidebar>
	<xf:sidebar key="extraInfoSidebar">
		<xf:macro template="xfmg_media_view_macros" name="extra_info_sidebar" arg-mediaItem="{$mediaItem}" />
	</xf:sidebar>
	<xf:sidebar key="additionalSidebar">
		<xf:macro template="xfmg_media_view_macros" name="additional_sidebar" arg-mediaItem="{$mediaItem}" />
	</xf:sidebar>
	<xf:sidebar key="exifSidebar">
		<xf:macro template="xfmg_media_view_macros" name="exif_sidebar" arg-mediaItem="{$mediaItem}" />
	</xf:sidebar>
	<xf:sidebar key="userTagsSidebar">
		<xf:macro template="xfmg_media_view_macros" name="user_tags_sidebar" arg-mediaNotes="{$mediaNotes}" />
	</xf:sidebar>
	<xf:sidebar key="shareSidebar">
		<xf:macro template="xfmg_media_view_macros" name="share_sidebar" arg-mediaItem="{$mediaItem}" />
	</xf:sidebar>
</xf:if>