Index.html

<f:layout name="Default"/>

<f:section name="main">
	<f:if condition="{debugOutput}">
		{debugOutput -> f:format.raw()}
	</f:if>

	<f:if condition="{response.kind} == 'youtube#playlistItemListResponse' && {feed -> f:count() > 0}">
		<f:then>
			<div class="sg-youtube-playlist">
				<f:if condition="{feed -> f:count()} === 1">
					<f:then>
						<ul class="sg-youtube">
							<li class="sg-youtube-item-container sg-youtube-item-single">
								<a class="sg-youtube-item sg-card-shadow" href="{feed.0.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
									<f:if condition="{feed.0.thumbnail}">
										<div class="sg-youtube-image">
											<img src="{feed.0.thumbnail}" alt="{feed.0.title}"/>
										</div>
									</f:if>
									<f:if condition="{feed.0.title}">
										<div class="sg-youtube-title">
											<h3 class="h3">
												<f:format.htmlentitiesDecode>{feed.0.title}</f:format.htmlentitiesDecode>
											</h3>
										</div>
									</f:if>
									<f:if condition="{showDescription} && {feed.0.description}">
										<div class="sg-youtube-text">
											<f:format.htmlentitiesDecode><f:format.crop maxCharacters="200">{feed.0.description}</f:format.crop></f:format.htmlentitiesDecode>
										</div>
									</f:if>
								</a>
							</li>
						</ul>
					</f:then>
					<f:else>
						<div class="sg-youtube">
							<div class="sg-youtube-item-container">
								<a class="sg-youtube-item sg-card-shadow" href="{feed.0.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
									<f:if condition="{feed.0.thumbnail}">
										<div class="sg-youtube-image">
											<img src="{feed.0.thumbnail}" alt="{feed.0.title}"/>
										</div>
									</f:if>
									<f:if condition="{showTitle} && {feed.0.title}">
										<div class="sg-youtube-title">
											<h3 class="h3">
												<f:format.htmlentitiesDecode>{feed.0.title}</f:format.htmlentitiesDecode>
											</h3>
										</div>
									</f:if>
									<f:if condition="{showDescription} && {feed.0.description}">
										<div class="sg-youtube-text">
											<f:format.htmlentitiesDecode><f:format.crop maxCharacters="200">{feed.0.description}</f:format.crop></f:format.htmlentitiesDecode>
										</div>
									</f:if>
								</a>
							</div>
						</div>
						<ul class="sg-youtube">
							<f:for each="{feed}" as="feedItem" iteration="feedIterator">
								<f:if condition="!{feedIterator.isFirst}">
									<li class="sg-youtube-item-container sg-youtube-item-list">
										<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}&list={settings.id}" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
											<f:if condition="{feedItem.thumbnail}">
												<div class="sg-youtube-image">
													<img src="{feedItem.thumbnail}" alt="{feedItem.title}"/>
												</div>
											</f:if>
											<f:if condition="{showTitle} && {feedItem.title}">
												<div class="sg-youtube-title">
													<h3 class="h3">
														<f:format.htmlentitiesDecode>{feedItem.title}</f:format.htmlentitiesDecode>
													</h3>
												</div>
											</f:if>
										</a>
									</li>
								</f:if>
							</f:for>
						</ul>
					</f:else>
				</f:if>
			</div>
		</f:then>
		<f:else>
			<ul class="sg-youtube sg-youtube-default">
				<f:for each="{feed}" as="feedItem" iteration="feedIterator">
					<li class="sg-youtube-item-container{f:if(condition: '{feedIterator.total} < 2', then: ' sg-youtube-item-single')}">
						<a class="sg-youtube-item sg-card-shadow" href="{feedItem.url}" target="_blank" data-disable-lightbox="{settings.disableLightbox}" data-disable-lightbox-mobile="{settings.disableLightboxMobile}">
							<f:if condition="{feedItem.thumbnail}">
								<div class="sg-youtube-image">
									<img src="{feedItem.thumbnail}" alt="{feedItem.title}"/>
								</div>
							</f:if>
							<f:if condition="{showTitle} && {feedItem.title}">
								<div class="sg-youtube-title">
									<h3 class="h3">
										<f:format.htmlentitiesDecode>{feedItem.title}</f:format.htmlentitiesDecode>
									</h3>
								</div>
							</f:if>
							<f:if condition="{showDescription} && {feedItem.description}">
								<div class="sg-youtube-text">
									<f:format.htmlentitiesDecode><f:format.crop maxCharacters="200">{feedItem.description}</f:format.crop></f:format.htmlentitiesDecode>
								</div>
							</f:if>
						</a>
					</li>
				</f:for>
			</ul>
		</f:else>
	</f:if>
</f:section>