@inherits Umbraco.Web.Mvc.UmbracoTemplatePage








@inherits Umbraco.Web.Mvc.UmbracoTemplatePage

@{
	var tagList = Umbraco.TagQuery.GetAllContentTags().OrderBy(t => t.Text);
	string tag = Request.QueryString["tag"];

	if (!tag.IsNullOrWhiteSpace())
	{
		var publishedContent = Umbraco.TagQuery.GetContentByTag(tag);

		if (publishedContent.Count() > 0)
		{
			@* Show title *@
			<div class="media contact-info wow fadeInDown" data-wow-duration="1000ms" data-wow-delay="600ms">
				<center>
					<div>
						<i class="fa fa-tags"></i>
					</div>

					<br />

					<div class="media-body">
						<h2>Tags</h2>
						<p>Browse content by tag</p>
					</div>
				</center>

				<br />

			</div>


			@* Show tag titles in tabs *@
			<ul class="portfolio-filter text-center">

				<li><a class="btn btn-default" href="#" data-filter="*">All tags</a></li>

				@foreach (var tags in tagList)
				{
					@* Create a selected tag *@
					if(@tags.Text == @tag)
					{
						<li><a href="/tags?tag=@tags.Text" class="btn btn-default active" data-filter=".@tag">@tags.Text (@tags.NodeCount)</a></li>
					}

					@* Show all other tags *@
					else
					{
						<li><a href="/tags?tag=@tags.Text" class="btn btn-default" data-filter=".@tags.Text">@tags.Text (@tags.NodeCount)</a></li>
					}
				}

			</ul>


			<div class="row">
				<div class="portfolio-items">

					@* Start picture content *@
					@foreach (var item in tagList)
					{
						@* Put selected tag in the right tag tab *@
						if(@item.Text == @tag)
						{
							@* Show tag content *@
							<div class='portfolio-item @tag col-xs-12 col-sm-4 col-md-3'>
								<div class="recent-work-wrap">

									@* IF the project has a picture *@
									@if(item.HasValue("pictureOfTheProject"))
									{
											var featureImage = Umbraco.TypedMedia((int)item.pictureOfTheProject);
											<img class="img-responsive" src="@featureImage.GetCropUrl(250, 250)" alt='@item.titleOfTheProject' />

											<div class="overlay">
												<div class="recent-work-inner">

													<h3><a href="@item.Url">@item.titleOfTheProject</a></h3>

													<a class="preview" href="@item.Url" rel="prettyPhoto">
														<i class="fa fa-eye"></i> View
													</a>
												</div>
											</div>
										}

										@* Else when the project doesnt have a picture, show default one *@
										else
										{
											var noImage = "http://www.don-zalmrol.be/media/1440/no_image_available.png";
											<img class="img-responsive" src="@noImage.GetCropUrl(250, 250)" alt="No image" />

											<div class="overlay">
												<div class="recent-work-inner">

													<h3><a href="@item.Url">@item.titleOfTheProject</a></h3>

													<a class="preview" href="@item.Url" rel="prettyPhoto">
														<i class="fa fa-eye"></i> View
													</a>

												</div>
											</div>
										}

									</div>
								</div>

						}

						@* Put the other tags under there own tab *@
						else
						{
							@* Something needs to be here... *@
						}
					}
					@* End dynamic tags *@

				</div>
			</div>
		}

		@* No content matching the tag? *@
		else
		{
			<p>There isn't any content matching that tag.</p>

			@Html.Partial("TagList")
		}
	}

	@* Show the tag list with amount *@
	else
	{
		@Html.Partial("TagList")
	}
}