{namespace neos=TYPO3\Neos\ViewHelpers}
{namespace media=TYPO3\Media\ViewHelpers}

<div{attributes -> f:format.raw()}>
	<ul class="nav nav-pills sort-source" data-sort-id="portfolio" data-option-key="filter">
		<li data-option-value="*" ><a href="#">Show All</a></li>
		<f:for each="{projectCategories}" as="projectCategory">
			<f:if condition="{projectCategory.childNodes -> f:count()} > 1">
				<li data-option-value=".{projectCategory.name}">
					<a href="#">{projectCategory.properties.title}</a>
				</li>
			</f:if>
		</f:for>
	</ul>

	<hr />

	<div class="row">
		<ul class="portfolio-list sort-destination" data-sort-id="portfolio">
			<f:for each="{projectCategories}" as="projectCategory">
				<f:for each="{projectCategory.childNodes}" as="project">
					<f:if condition="{project.properties.title}">
						<li class="col-md-3 isotope-item {projectCategory.name}">
							<div class="portfolio-item img-thumbnail">
								<neos:link.node node="{project}" class="thumb-info">
									<f:if condition="{project.properties.image}">
										<f:then>
											<media:image asset="{project.properties.image}" class="img-responsive" alt="{project.properties.title}" />
										</f:then>
										<f:else>
											<img src="{f:uri.resource(package: 'WE.SitePackage', path: 'Images/project.jpg')}" title="{project.properties.title}" alt="{project.properties.title}" />
										</f:else>
									</f:if>
									<span class="thumb-info-title">
										<span class="thumb-info-inner">{project.properties.title}</span>
										<span class="thumb-info-type">{projectCategory.properties.title}</span>
									</span>
									<span class="thumb-info-action">
										<span title="Universal" href="#" class="thumb-info-action-icon"><i class="fa fa-link"></i></span>
									</span>
								</neos:link.node>
							</div>
						</li>
					</f:if>
				</f:for>
			</f:for>
		</ul>
	</div>
</div>