The validation for razor scripts is messing up my ability to render a correct end tag.

I'm looping over some images from the Media node, but for my html markup I need to pack x images in a div.

But the validation doesn't let me close the end </div> correctly.

Code snippet: 

    if(hasEndDiv == false)
    {
      @: </div> 
    }

Error:

Encountered end tag "div" with no matching start tag. Are your start/end tags properly balanced? 

Code:

@using uComponents.Core;

@using uComponents.Core.uQueryExtensions;

@using System;
@{   
  var maxImages = 5;
  var counter = 1;
  var loopCount = 0;
  var totalItems = 0;
  var hasEndDiv = false;
  
  var items = uComponents.Core.uQuery.GetMediaByType("Image");
  totalItems = items.Count();
  
  <a class="prev browse left"></a>
  <div class="scrollable">
    <div class="items">
    @foreach (var c in items)  
    {
      if (!c.GetPropertyAsBoolean("showInSlideShow")) 
      {
        continue;
      }
      var filePath = c.GetPropertyAsString("umbracoFile");
      if (counter == 1)
      {
        hasEndDiv = false;
        @: <div>
      }
       
      <img src="@filePath" title="@c.Text" />
      if (counter++ == maxImages)
      {
        hasEndDiv = true;
        counter = 1;
        @: </div>
      } 
    }
    if(hasEndDiv == false)
    {
      @: </div> 
    }
    </div>
  </div>
  <a class="next browse right"></a>
}