@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage

@{
  var caseStudiesHome = Umbraco.Content("861a7c6e-9441-44b9-9adb-5e29ded7f569");
  var caseStudiesCount = caseStudiesHome.Children().Count();
  var caseStudiesLeft = caseStudiesCount - 1;
  var firstCaseStudy = caseStudiesHome.Children().Take(1);
}

<section class="main">
  <header class="major">
	<h2>Case Studies</h2>
	<p>Showcasing examples of our work</p>
  </header>
  <div class="spotlights">
      
    @{
	  foreach (var study in firstCaseStudy)
	  {
        var studyImg1 = study.Value<IPublishedContent>("imageOnePic");
        var studyImg1Alt = study.Value("imageOneAlt");
        
	    <article>
	      
	      @if (studyImg1 != null)
          {
            <div class="image"><img src="@studyImg1.Url()" alt="@studyImg1Alt" data-position="center" /></div>
          }
          else
          {
            <div class="image"><img src="images/pic07.jpg" alt="" data-position="center" /></div>
          }
	      
	      <div class="content">
	        <h3>@study.Name</h3>
	        <ul class="actions special">
	        
	          @if(caseStudiesLeft > 0)
	          {
		        <li><a href="@caseStudiesHome.Url()" class="button primary">and @caseStudiesLeft more...</a></li>
	          }
	          else
	          {
	            <li><a href="@caseStudiesHome.Url()" class="button primary">Show me</a></li>
	          }
		      
		    </ul>
	      </div>
	    </article>
	  }
	}
	
  </div>
</section>