<f:if condition="{loginNewsItems}">
	<div class="panel-carousel carousel slide t3js-login-news-carousel" id="loginNews" data-interval="0" data-ride="carousel">
		<div class="carousel-inner" role="listbox">
			<f:for each="{loginNewsItems}" as="item" iteration="loginNewsIterator">
				<div class="item{f:if(condition: loginNewsIterator.isFirst,then: ' active')}">
					<h3 class="typo3-login-news-heading">{item.header}</h3>
					<f:format.html>{item.content}</f:format.html>
					<span class="text-muted">{item.date}</span>
				</div>
			</f:for>
		</div>
		<f:if condition="{loginNewsItems -> f:count()} > 1">
			<a class="left typo3-login-carousel-control" href="#loginNews" role="button" data-slide="prev">
			<i class="fa fa-angle-left"></i>
			<span class="sr-only"><f:translate key="login.news.previous" /></span>
			</a>
			<a class="right typo3-login-carousel-control" href="#loginNews" role="button" data-slide="next">
				<i class="fa fa-angle-right"></i>
				<span class="sr-only"><f:translate key="login.news.next" /></span>
			</a>
		</f:if>
	</div>
</f:if>
