<f:layout name="Default" />

{namespace sg=SGalinski\SgNews\ViewHelpers}

<f:section name="main">

	<f:render partial="OverviewSchema" arguments="{newsItems: allNews}" />

	<f:if condition="{settings.enableFilter}">
		<div id="tx-sgnews-newslist">
			<f:render partial="Filter" arguments="{tagTabs: tagTabs, categoryTabs: categoryTabs, categories: categories,
					tags: tags, selectedTag: selectedTag, selectedCategory: selectedCategory}" />
		</div>
	</f:if>
	<br />
	<div class="tx-sgnews-categories m-tabs" data-more-label="Mehr">
		<div class="m-tabs__tablist" role="tablist">
			<button class="m-tabs__tab" role="tab" aria-controls="news-category-0" id="tab-news-0" aria-selected="true">
				<f:translate key="frontend.overview.allTabLabel" />
			</button>
			<f:for each="{newsItems}" as="dataItems" iteration="iterator">
				<button class="m-tabs__tab" role="tab" aria-controls="news-category-{iterator.index + 1}" id="tab-news-{iterator.index + 1}" aria-selected="false">
					<f:if condition="{dataItems.recordType} == 'category'">
						<f:then>
							{dataItems.record.subtitleWithFallbackToTitle}
						</f:then>
						<f:else>
							{dataItems.record.title}
						</f:else>
					</f:if>
				</button>
			</f:for>
		</div>

		<div class="m-tabs__panellist">
			<div class="m-tabs__panel" role="tabpanel" aria-labelledby="tab-news-0" id="news-category-0">
				<h4 class="tx-sgnews-tab-title"><f:translate key="frontend.overview.allTabLabel" /></h4>
				<ul class="tx-sgnews-list tx-sgnews-list-0 row" data-record="0">
					<f:for each="{allNews}" as="newsMetaDataEntry">
						<li class="col-md-4 col-sm-6 col-xs-12">
							<f:render partial="Teaser" arguments="{
								newsMetaData: newsMetaDataEntry,
								headerTag: '<h2>',
								closingHeaderTag: '</h2>',
								showCategory: '{f:if(condition: \'{groupBy} == \" category\"\', then: 0, else: 1)}'
							}" />
						</li>
					</f:for>
				</ul>
			</div>

			<f:for each="{newsItems}" as="dataItems" iteration="iterator">
				<div class="m-tabs__panel m-tabs__panel--closed" role="tabpanel" aria-labelledby="tab-news-{iterator.index + 1}" id="news-category-{iterator.index + 1}">
					<f:if condition="{dataItems.newsCount} == 0">
						<p>
							<f:translate key="frontend.filter.no_result" />
						</p>
					</f:if>
					<h4 class="tx-sgnews-tab-title">{dataItems.record.title}</h4>
					<ul class="tx-sgnews-list tx-sgnews-list-{dataItems.record.uid} row" data-record="{dataItems.record.uid}">
						<f:for each="{dataItems.newsMetaData}" as="newsMetaDataEntry">
							<f:if condition="{newsMetaDataEntry.news}">
								<li class="col-md-4 col-sm-6 col-xs-12">
										<f:render partial="Teaser" arguments="{
											newsMetaData: newsMetaDataEntry,
											headerTag: '<h2>',
											closingHeaderTag: '</h2>',
											showCategory: '{f:if(condition: \'{groupBy} == \" category\"\', then: 0, else: 1)}'
									}" />
								</li>
							</f:if>
						</f:for>
					</ul>

					<f:if condition="{dataItems.recordType} == 'category'">
						<div class="text-center">
							<a class="btn btn-md btn-success category-{dataItems.recordId}" href="{f:uri.page(pageUid: '{dataItems.recordId}')}">
								<f:translate key="frontend.overview.showAllEntries" />
							</a>
						</div>
					</f:if>

				</div>
			</f:for>
		</div>

	</div>
	<sg:pageBrowser numberOfPages="{numberOfPages}" />
</f:section>