{% if results and results|length > 0 %}
<ul id="traces">
  {% for trace in results %}
  <li class="trace"
      data-traceId="{{ trace['trace_id'] }}"
      data-duration="{{ trace['servicesTotalDuration'] }}"
      data-timestamp="{{ trace['startTime'] }}"
      data-service-percentage="{{ trace['selectedServicePercentage'] }}">

    <a href="/traces/{{ trace['trace_id'] }}?serviceName={{ trace['serviceName'] }}">
      <div class="bar-block">
        <span class="glyphicon glyphicon-arrow-right"></span>
        <span class="bar-label">{{ trace['spanCount'] }} spans</span>

        <span class="glyphicon glyphicon-time"></span>
        <span class="bar-label">{{ (trace['servicesTotalDuration']) }} ms</span>
      </div>


      <div class="bar-block">
        <span class="glyphicon glyphicon-calendar"></span>
        <time class="bar-label timeago" datetime="{{ trace['startTime'] }}">{{ trace['startTime'] }}</time>

        <span class="glyphicon glyphicon-stop"></span>
        <span class="bar-label">{{ trace['serviceName'] }} {{ trace['selectedServicePercentage'] }}%</span>
      </div>
    </a>

    <div class="trace-details services">
      {% for serviceDuration in trace['serviceDurations'] %}
      <span class="label label-default service-filter-label"
            data-service-name="*name">
        <span class="service-duration-time">{{ (serviceDuration['duration'] / 1000)|int }}<span class="measurement-indicator">ms</span></span>
        {{ serviceDuration['name'] }} x {{ serviceDuration['count'] }}
      </span>
      {% endfor %}
    </div>

  </li>
  {% endfor %}
</ul>
{% endif %}
