<div class="schedule-grid" style="width: {{gridWidth}}px; height:{{gridHeight}}px">
 <div id="schedule-grid">
  {% for cell in gridDayCells %}
  <div class="{{cell.cssClass}}" style="top:{{cell.top}}px; left:{{cell.left}}px; width:{{cell.width}}px; height:{{cell.height}}px"><p class="{{cell.cssClass}}">{{cell.htmlContent}}</p></div>
  {% endfor %}
  
  {% for cell in gridTimeCells %}
  <div class="{{cell.cssClass}}" style="top:{{cell.top}}px; left:{{cell.left}}px; width:{{cell.width}}px; height:{{cell.height}}px"><p class="{{cell.cssClass}}">{{cell.htmlContent}}</p></div>
  {% endfor %}
  
  {% for cell in gridEarmarkedCells %}
  <div class="{{cell.cssClass}}" id="{{cell.item.getRegistryId}}" onclick="showEarmarkSelection(this)" style="top:{{cell.top}}px; left:{{cell.left}}px; width:{{cell.width}}px; height:{{cell.height}}px"><p class="{{cell.cssClass}}">{{cell.htmlContent}}</p></div>
  {% endfor %}
  
  {% for cell in gridSessionCells %}
  <div class="{{cell.cssClass}}" id="{{cell.item.getRegistryId}}" onclick="showSessionSelection(this)" style="top:{{cell.top}}px; left:{{cell.left}}px; width:{{cell.width}}px; height:{{cell.height}}px"><p class="{{cell.cssClass}}">{{cell.htmlContent}}</p></div>
  {% endfor %}
  
 </div>
 <div>
  <div id="selection-indicator-session" class="schedule-selected" style="visibility: hidden">
    <div class="schedule-selected-handle-left" onClick="setEarmarkType('maintenance')" style="background-color: #aaa; height: 4px; width:4px"></div>
    <div class="schedule-selected-handle-left" onClick="setEarmarkType('scanning')" style="background-color: #ff0; height: 4px; width:4px"></div>
    <div class="schedule-selected-handle-right" onClick="endSelectionLater()">&raquo;</div>
    <div class="schedule-selected-handle-right" onClick="startSelectionEarlier()">&laquo;</div>
    <div class="schedule-selected-handle-right" onClick="endSelectionEarlier()" style="clear:right">&laquo;</div>
    <div class="schedule-selected-handle-right" onClick="startSelectionLater()">&raquo;</div>
  </div>
  <div id="selection-indicator-earmark" class="schedule-selected" style="visibility: hidden">
    <div class="schedule-selected-handle-left" onClick="setEarmarkType('maintenance')" style="background-color: #aaa; height: 4px; width:4px"></div>
    <div class="schedule-selected-handle-left" onClick="setEarmarkType('scanning')" style="background-color: #ff0; height: 4px; width:4px"></div>
  </div>
 </div>
</div>

