{% for spanId, spanInfo in spans.iteritems() %}
<div
  id="{{ spanId }}"
  class="span service-span depth-*depthClass"
  data-keys="id,spanName,serviceNames,serviceName,durationStr,duration"
  data-id="*spanId"
  data-parent-id="*parentId"
  data-span-name="{{ spanInfo['spanName'] }}"
  data-service-name="{{ spanInfo['serviceName'] }}"
  data-service-names="*serviceNames"
  data-duration-str="*durationStr"
  data-duration="*duration"
  data-children="*children"
  >

  <div class="handle">
    <div class="service-name" style="margin-left: *depthpx">
      <span class="expanded">+</span>
      {{ spanInfo['serviceName'] }}
    </div>
  </div>

  <div class="duration-container">

    {% for item in timeMarkers %}
    <div class="time-marker time-marker-{{ item['index'] }}">.</div>
    {% endfor %}

  </div>


</div>
{% endfor %}
