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

<xf:css src="xfmg_album_view.less" />

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

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

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

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

<xf:macro template="xfmg_media_list_macros" name="media_create_message"
	arg-transcoding="{$transcoding}"
	arg-pendingApproval="{$pendingApproval}" />

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

<xf:if is="$album.canAddMedia()">
	<xf:pageaction>
		<xf:button href="{{ link('media/albums/add', $album) }}" class="button--cta" icon="add">
			{{ phrase('xfmg_add_media') }}
		</xf:button>
	</xf:pageaction>
</xf:if>

<xf:if contentcheck="true">
	<div class="block">
		<div class="block-outer">
			<dl class="blockStatus">
				<dt>{{ phrase('status') }}</dt>
				<xf:contentcheck>
					<xf:if is="$album.album_state == 'deleted'">
						<dd class="blockStatus-message blockStatus-message--deleted">
							<xf:macro template="deletion_macros" name="notice" arg-log="{$album.DeletionLog}" />
						</dd>
					<xf:elseif is="$album.album_state == 'moderated'" />
						<dd class="blockStatus-message blockStatus-message--moderated">
							{{ phrase('awaiting_approval_before_being_displayed_publicly') }}
						</dd>
					</xf:if>
					<xf:if is="$album.warning_message">
						<dd class="blockStatus-message blockStatus-message--warning">
							{$album.warning_message}
						</dd>
					</xf:if>
					<xf:if is="$album.isIgnored()">
						<div class="blockStatus-message blockStatus-message--ignored">
							{{ phrase('you_are_ignoring_content_by_this_member') }}
						</div>
					</xf:if>
				</xf:contentcheck>
			</dl>
		</div>
	</div>
</xf:if>

<xf:if is="$canInlineModMediaItems">
	<xf:js src="xf/inline_mod.js" min="1" />
</xf:if>

<div class="block" data-xf-init="{{ $canInlineModMediaItems ? 'inline-mod' : '' }}" data-type="xfmg_media" data-href="{{ link('inline-mod') }}">
	<div class="block-outer"><xf:trim>

		<xf:pagenav page="{$page}" perpage="{$perPage}" total="{$totalItems}"
			link="media/albums" data="{$album}" params="{{ {'comment_page': ($commentPage ?: null)} + $filters }}"
			wrapperclass="block-outer-main" />

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

					<xf:if contentcheck="true">
						<div class="buttonGroup">
							<xf:contentcheck>
								<xf:if is="$canInlineModMediaItems">
									<xf:macro template="inline_mod_macros" name="button" />
								</xf:if>
								<xf:if is="$album.canUndelete() AND $album.album_state == 'deleted'">
									<xf:button href="{{ link('media/albums/undelete', $album) }}" class="button--link" overlay="true">
										{{ phrase('undelete') }}
									</xf:button>
								</xf:if>
								<xf:if is="$album.canApproveUnapprove() AND $album.album_state == 'moderated'">
									<xf:button href="{{ link('media/albums/approve', $album) }}" class="button--link" overlay="true">
										{{ phrase('approve') }}
									</xf:button>
								</xf:if>
								<xf:if is="$xf.visitor.user_id">
									<xf:button href="{{ link('media/albums/mark-viewed', $album, {'date': $xf.time}) }}"
										class="button--link" overlay="true">

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

								<xf:if is="$album.canWatch()">
									<xf:button href="{{ link('media/albums/watch', $album) }}" class="button--link"
										data-xf-click="switch-overlay"
										data-sk-watch="{{ phrase('watch') }}"
										data-sk-unwatch="{{ phrase('unwatch') }}">

										<xf:if is="{$album.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="{$album}"
									arg-confirmUrl="{{ link('media/albums/bookmark', $album) }}" />

								<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:album_tools_menu:top]-->
													<xf:if is="$album.canEdit()">
														<a href="{{ link('media/albums/edit', $album) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('xfmg_edit_album') }}</a>
													</xf:if>
													<xf:if is="$album.canMove()">
														<a href="{{ link('media/albums/move', $album) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('xfmg_move_album') }}</a>
													</xf:if>
													<xf:if is="$album.canDelete('soft')">
														<a href="{{ link('media/albums/delete', $album) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('xfmg_delete_album') }}</a>
													</xf:if>
													<xf:if is="$album.canViewModeratorLogs()">
														<a href="{{ link('media/albums/moderator-actions', $album) }}" data-xf-click="overlay" class="menu-linkRow">{{ phrase('moderator_actions') }}</a>
													</xf:if>
													<!--[XF:album_tools_menu:before_footer]-->
													<xf:if is="$album.canUseInlineModeration()">
														<div class="menu-footer"
															 data-xf-init="inline-mod"
															 data-type="xfmg_album"
															 data-href="{{ link('inline-mod') }}"
															 data-toggle=".js-albumInlineModToggle">
															<xf:checkbox>
																<xf:option class="js-albumInlineModToggle" value="{$album.album_id}">{{ phrase('select_for_moderation') }}</xf:option>
															</xf:checkbox>
														</div>
													</xf:if>
													<!--[XF:album_tools_menu:bottom]-->
												</xf:contentcheck>
											</div>
										</div>
									</div>
								</xf:if>
							</xf:contentcheck>
						</div>
					</xf:if>
				</xf:contentcheck>
			</div>
		</xf:if>

	</xf:trim></div>
	<div class="block-container">
		<xf:macro template="xfmg_album_list_macros" name="list_filter_bar"
			arg-filters="{{ {'comment_page': ($commentPage ?: null)} + $filters }}"
			arg-baseLinkPath="media/albums"
			arg-linkData="{$album}"
			arg-ownerFilter="{$ownerFilter}" />

		<div class="block-body">
			<xf:if is="$mediaItems is not empty">
				<xf:macro template="xfmg_media_list_macros" name="media_list"
					arg-mediaItems="{$mediaItems}"
					arg-prevPage="{$prevPage}"
					arg-nextPage="{$nextPage}"
					arg-setupLightbox="{$xf.options.xfmgLightboxNavigation}" />
			<xf:elseif is="$filters" />
				<div class="block-row">{{ phrase('xfmg_no_media_has_been_added_to_this_album_which_matches_your_filters') }}</div>
			<xf:else />
				<div class="block-row">{{ phrase('xfmg_no_media_has_been_added_to_this_album_yet') }}</div>
			</xf:if>
		</div>
	</div>

	<div class="block-outer block-outer--after">
		<xf:pagenav page="{$page}" perpage="{$perPage}" total="{$totalItems}"
			link="media/albums" data="{$album}" params="{{ {'comment_page': ($commentPage ?: null)} + $filters }}"
			wrapperclass="block-outer-main" />

		<xf:showignored wrapperclass="block-outer-opposite" />
	</div>
</div>

<div class="block">
	<div class="block-container">
		<div class="block-body block-row xfmgInfoBlock">
			<div class="xfmgInfoBlock-title">
				<div class="contentRow">
						<span class="contentRow-figure">
							<xf:avatar user="$album.User" size="s" defaultname="{$album.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-th" title="{{ phrase('xfmg_items')|for_attr }}" /> {$album.media_count|number_short}</li>
								<li><xf:fa icon="fa-user" title="{{ phrase('xfmg_album_owner')|for_attr }}" /> <xf:username user="{$album.User}" defaultname="{$album.username}" class="u-concealed" /></li>
								<li><xf:fa icon="fa-clock" title="{{ phrase('xfmg_date_created')|for_attr }}" /> <xf:date time="{$album.create_date}" /></li>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<xf:if is="$album.description">
				<div class="xfmgInfoBlock-description">
					<div class="bbCodeBlock bbCodeBlock--expandable js-expandWatch">
						<div class="bbCodeBlock-content">
							<div class="bbCodeBlock-expandContent js-expandContent">
								{{ structured_text($album.description) }}
							</div>
							<div class="bbCodeBlock-expandLink js-expandLink"><a role="button" tabindex="0">{{ phrase('click_to_expand') }}</a></div>
						</div>
					</div>
				</div>
			</xf:if>
			
			<div class="reactionsBar js-reactionsList {{ $album.reactions ? 'is-active' : '' }}">
				<xf:reactions content="{$album}" link="media/albums/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="{$album}" link="media/albums/react" list="< .block | .js-reactionsList" />
								</xf:contentcheck>
							</div>
						</xf:if>

						<xf:if contentcheck="true">
							<div class="actionBar-set actionBar-set--internal">
								<xf:contentcheck>
									<xf:if is="$album.canReport()">
										<a href="{{ link('media/albums/report', $album) }}"
											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="$album.canEdit()">
										<a href="{{ link('media/albums/edit', $album) }}"
											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="$album.canDelete()">
										<a href="{{ link('media/albums/delete', $album) }}"
											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="$album.canCleanSpam()">
										<a href="{{ link('spam-cleaner', $album) }}"
											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 $album.ip_id">
										<a href="{{ link('media/albums/ip', $album) }}"
											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="$album.canWarn()">
										<a href="{{ link('media/albums/warn', $album) }}"
											class="actionBar-action actionBar-action--warn actionBar-action--menuItem">{{ phrase('warn') }}</a>
										<xf:set var="$hasActionBarMenu" value="{{ true }}" />
									<xf:elseif is="$album.warning_id AND $xf.visitor.canViewWarnings()" />
										<a href="{{ link('warnings', {'warning_id': $album.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>

<xf:if is="$album.canViewComments()">
	<div class="columnContainer">
		<div class="columnContainer-comments">
			<xf:macro template="xfmg_comment_macros" name="comment_list"
				arg-comments="{$comments}"
				arg-content="{$album}"
				arg-linkPrefix="media/album-comments"
				arg-link="media/albums"
				arg-linkParams="{{ {'page': $page} + $filters }}"
				arg-page="{$commentPage}"
				arg-perPage="{$commentsPerPage}"
				arg-totalItems="{$totalComments}"
				arg-pageParam="comment_page"
				arg-canInlineMod="{$canInlineModComments}" />
		</div>

		<div class="columnContainer-sidebar">
			<xf:macro name="info_sidebar" arg-album="{$album}" />
			<xf:macro name="privacy_sidebar" arg-album="{$album}" arg-addUsers="{$addUsers}" arg-viewUsers="{$viewUsers}" />
			<xf:macro name="share_sidebar" arg-album="{$album}" />
		</div>
	</div>
<xf:else />
	<xf:sidebar key="infoSidebar">
		<xf:macro name="info_sidebar" arg-album="{$album}" />
	</xf:sidebar>
	<xf:sidebar key="privacySidebar">
		<xf:macro name="privacy_sidebar" arg-album="{$album}" arg-addUsers="{$addUsers}" arg-viewUsers="{$viewUsers}" />
	</xf:sidebar>
	<xf:sidebar key="shareSidebar">
		<xf:macro name="share_sidebar" arg-album="{$album}" />
	</xf:sidebar>
</xf:if>

<xf:macro name="info_sidebar" arg-album="{$album}">
	<div class="block">
		<div class="block-container">
			<h3 class="block-minorHeader">{{ phrase('xfmg_album_information') }}</h3>
			<div class="block-body block-row">
				<xf:if is="$album.Category">
					<dl class="pairs pairs--justified">
						<dt>{{ phrase('xfmg_category') }}</dt>
						<dd><a href="{{ link('media/categories', $album.Category) }}">{$album.Category.title}</a></dd>
					</dl>
				</xf:if>

				<dl class="pairs pairs--justified">
					<dt>{{ phrase('xfmg_album_owner') }}</dt>
					<dd><xf:username user="{$album.User}" defaultname="{$album.username}" /></dd>
				</dl>

				<dl class="pairs pairs--justified">
					<dt>{{ phrase('xfmg_date_created') }}</dt>
					<dd><xf:date time="{$album.create_date}" /></dd>
				</dl>

				<dl class="pairs pairs--justified">
					<dt>{{ phrase('xfmg_item_count') }}</dt>
					<dd>{$album.media_count|number}</dd>
				</dl>

				<dl class="pairs pairs--justified">
					<dt>{{ phrase('xfmg_view_count') }}</dt>
					<dd>{$album.view_count|number}</dd>
				</dl>

				<dl class="pairs pairs--justified">
					<dt>{{ phrase('xfmg_comment_count') }}</dt>
					<dd>{$album.comment_count|number}</dd>
				</dl>

				<dl class="pairs pairs--justified">
					<dt>{{ phrase('rating') }}</dt>
					<dd>
						<xf:macro template="rating_macros" name="stars_text"
							arg-rating="{$album.rating_avg}"
							arg-count="{$album.rating_count}"
							arg-rowClass="ratingStarsRow--textBlock" />
					</dd>
				</dl>
			</div>
		</div>
	</div>
</xf:macro>

<xf:macro name="privacy_sidebar" arg-album="!" arg-addUsers="!" arg-viewUsers="!">
	<xf:if is="$album.User">
		<div class="block">
		<div class="block-container">
			<h3 class="block-minorHeader">{{ phrase('xfmg_album_privacy') }}</h3>
			<div class="block-body">
				<div class="block-row">
					<div class="contentRow">
						<div class="contentRow-figure">
							<xf:avatar user="$album.User" size="s" />
						</div>
						<div class="contentRow-main">
							<h3 class="contentRow-title"><xf:username user="$album.User" rich="true" /></h3>

							<div class="contentRow-muted">
								<dl class="pairs pairs--justified fauxBlockLink">
									<dt>{{ phrase('xfmg_media_items') }}</dt>
									<dd>
										<a href="{{ link('media/users', $album.User) }}" class="fauxBlockLink-blockLink u-concealed">
											{$album.User.xfmg_media_count|number}
										</a>
									</dd>
								</dl>
								<dl class="pairs pairs--justified fauxBlockLink">
									<dt>{{ phrase('xfmg_albums') }}</dt>
									<dd>
										<a href="{{ link('media/albums/users', $album.User) }}" class="fauxBlockLink-blockLink u-concealed">
											{$album.User.xfmg_album_count|number}
										</a>
									</dd>
								</dl>
							</div>
						</div>
					</div>
				</div>
				<div class="block-row">
					<dl class="pairs pairs--justified">
						<dt>{{ phrase('xfmg_can_view_media_items') }}</dt>
						<dd>{$album.getPrivacyPhrase($album.view_privacy)}</dd>
					</dl>
					<xf:if is="$album.view_privacy == 'shared' AND $viewUsers">
						<ul class="listHeap">
							<xf:foreach loop="$viewUsers" value="$user">
								<li><xf:avatar user="$user" size="xs" /></li>
							</xf:foreach>
						</ul>
					</xf:if>
				</div>
				<div class="block-row">
					<dl class="pairs pairs--justified">
						<dt>{{ phrase('xfmg_can_add_media_items') }}</dt>
						<dd>{$album.getPrivacyPhrase($album.add_privacy)}</dd>
					</dl>
					<xf:if is="$album.add_privacy == 'shared' AND $addUsers">
						<ul class="listHeap">
							<xf:foreach loop="$addUsers" value="$user">
								<li><xf:avatar user="$user" size="xs" /></li>
							</xf:foreach>
						</ul>
					</xf:if>
				</div>
			</div>
			<xf:if is="$album.canChangePrivacy()">
				<div class="block-footer">
					<span class="block-footer-controls">
						<xf:button href="{{ link('media/albums/change-privacy', $album) }}" class="button--small button--link" overlay="true">{{ phrase('xfmg_change_privacy') }}</xf:button>
					</span>
				</div>
			</xf:if>
		</div>
	</div>
	</xf:if>
</xf:macro>

<xf:macro name="share_sidebar" arg-album="!">
	<xf:if contentcheck="true">
		<div class="block">
			<div class="block-container">
				<xf:contentcheck>
					<xf:if contentcheck="true">
						<h3 class="block-minorHeader">{{ phrase('xfmg_share_this_album') }}</h3>
						<div class="block-body block-row block-row--separated">
							<xf:contentcheck>
								<xf:macro template="share_page_macros" name="buttons"
									arg-iconic="{{ true }}" />
							</xf:contentcheck>
						</div>
					</xf:if>
					<xf:if contentcheck="true">
						<div class="block-body block-row block-row--separated">
							<xf:contentcheck>
								<xf:if is="$album.thumbnail_date">
									<xf:macro template="share_page_macros" name="share_clipboard_input"
										arg-label="{{ phrase('xfmg_copy_url_bb_code_with_thumbnail') }}"
										arg-text="[URL=&quot;{{ link('canonical:media/albums', $album) }}&quot;][IMG]{$album.getThumbnailUrl(true)}[/IMG][/URL]" />
								</xf:if>

								<xf:macro template="share_page_macros" name="share_clipboard_input"
									arg-label="{{ phrase('xfmg_copy_gallery_bb_code') }}"
									arg-text="[GALLERY=album, {$album.album_id}][/GALLERY]" />
							</xf:contentcheck>
						</div>
					</xf:if>
				</xf:contentcheck>
			</div>
		</div>
	</xf:if>
</xf:macro>