{% INCLUDE 'ucp_header.html' %}

<h2>{{ lang('UCP_YOUTUBEGALLERY_TITLE') }}</h2>

{% if loops.video|length %}
	<div class="grid grid-cols-2 gap-4 mt-3">
		{% for video in loops.video %}
			<div id="video{{ video.VIDEO_ID }}" class="video_item card dark:bg-slate-800 border p-4 {% if video.S_ROW_COUNT is even %}column11{% else %}column22{% endif %}">
				<div class="flex w-full items-center gap-4">
					<a href="{{ video.U_VIEW_VIDEO }}" title="{{ video.VIDEO_TITLE }}"><img src="{{ video.VIDEO_THUMBNAIL }}" alt="{{ video.VIDEO_TITLE }}" /></a>
					<div class="grow">
						{% if video.U_VIEW_VIDEO and video.VIDEO_TITLE %}<h3 class="border-b mb-3 pb-2"><a href="{{ video.U_VIEW_VIDEO }}" title="{{ video.VIDEO_TITLE }}">{{ video.VIDEO_TITLE }}</a></h3>{% endif %}
						<div class="text-sm w-full flex flex-col leading-relaxed">
							<span>{{ lang('VIDEO_CAT') ~ lang('COLON') }}&nbsp;<a href="{{ video.U_CAT }}" title="{{ video.VIDEO_CAT_TITLE }}">{{ video.VIDEO_CAT_TITLE }}</a></span>
							<span>{{ lang('VIDEO_DATE') ~ lang('COLON') }}&nbsp;{{ video.VIDEO_TIME }}</span>
							<span>{{ lang('VIDEO_VIEWS') ~ lang('COLON') }}&nbsp;{{ video.VIDEO_VIEWS }}</span>
							<span>{{ lang('VIDEO_DURATION') ~ lang('COLON') }}&nbsp;{{ video.VIDEO_DURATION }}</span>
						</div>
					</div>
				</div>
				{% if ENABLE_VIDEO_YOUTUBE_STATS %}
				<div class="w-full mt-2 border p-4 rounded-lg text-sm card">
					<h3 class="border-b mb-3 pb-2" style="text-transform: lowercase">{{ lang('STATS_FROM_YOUTUBE') }}</h3>
					<div class="post-meta flex justify-between w-full">
						<span class="flex items-center gap-2"><i class="icon fa fa-comments-o" aria-hidden="true"></i> {{ video.VIDEO_VIEWS_YOUTUBE_COMMENTS }}</span>
						<span class="flex items-center gap-2"><i class="icon fa fa-eye" aria-hidden="true"></i> {{ video.VIDEO_VIEWS_YOUTUBE }}</span>
						<span class="flex items-center gap-2"><i class="icon fa fa-thumbs-o-up" aria-hidden="true"></i> {{ video.VIDEO_VIEWS_YOUTUBE_LIKE }}</span>
						<span class="flex items-center gap-2"><i class="icon fa fa-thumbs-o-down" aria-hidden="true"></i> {{ video.VIDEO_VIEWS_YOUTUBE_DISLIKE }}</span>
					</div>
				</div>
				{% endif %}

			</div>
		{% endfor %}
	</div>
{% else %}
	<div id="information" class="rules flex items-center gap-2 text-sm text-red-700 bg-red-50 border border-red-300 rounded-lg p-4 dark:text-red-400 dark:bg-red-800/10 dark:border-red-500 my-4" role="alert">
		<div class="font-semibold">{{ lang('INFORMATION') ~ lang('COLON') }}</div>
    <div class="mt-1">{{ lang('UCP_NO_USER_VIDEOS') }}</div>
	</div>
{% endif %}

<div class="action-bar bar-bottom my-3">
	{% if loops.pagination|length or TOTAL_VIDEOS %}
	<div class="pagination flex flex-wrap items-center justify-end gap-1">
		<!-- IF .pagination -->
		{% include 'pagination.html' with {'TOTAL': TOTAL_VIDEOS} %}
		<!-- ELSE -->
		<div class="card-sm">{{ TOTAL_VIDEOS }} &bull; {{ PAGE_NUMBER }}</div>
		<!-- ENDIF -->
	</div>
	{% endif %}
</div>

{% INCLUDE 'ucp_footer.html' %}