{% load i18n %}
<h4>{{ templates|length }} {% trans 'calls to Template.render()' %}</h4>
<div>
  <table>
    <colgroup>
      <col style="width:1%" />
      <col style="width:5%" />
      <col style="width:10%" />
      <col style="width:60%" />
      <col style="width:5%" />
    </colgroup>
    <thead>
      <tr>
        <th></th>
        <th>{% trans 'Stack Level' %}</th>
        <th>{% trans 'Template Name' %}</th>
        <th>{% trans 'Timeline' %}</th>
        <th>{% trans 'Time (ms)' %}</th>
      </tr>
    </thead>
    <tbody>
      {% for template in templates %}
      <tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}" id="profileMain_{{ forloop.counter }}">
        <td class="djdt-toggle">
           <button type="button" class="djToggleSwitch" data-toggle-name="profileMain" data-toggle-id="{{ forloop.counter }}">+</button>
        </td>
        <td>
          <div style="background-color: {{ template.color.bg }}; color: {{ template.color.text }}; width: {{ template.level }}px; margin-right: 4px; padding-left: 2px;">{{ template.level }}</div>
        </td>
        <td>{{ template.name }}</td>
        <td class="timeline">
          <div class="djDebugTimeline" style="position:relative;">
            <div class="djDebugLineChart" style="margin-left: {{ template.offset_p|stringformat:'f' }}%;">
               <div title="Runtime {{ template.relative_start|floatformat:2 }} - {{ template.relative_end|floatformat:2 }} ms" style="min-width: 1px; width: {{ template.rel_duration_p|stringformat:'f' }}%; background-color: {{ template.color.bg }};">
                  &nbsp;</div>
            </div>
          </div>
        </td>
        <td>{{ template.time|floatformat }}</td>
      </tr>
      <tr class="djToggleDetails_{{ forloop.counter }} djUnselected" id="sqlDetails_{{ forloop.counter }}">
         <td></td>
         <td></td>
         <td></td>
         <td>
            <div style="height: calc({{ template.max_level|add:1 }}px * 18); position:relative;" class="timeline_toggle_{{ forloop.counter }} djToggleDetails_{{ forloop.counter }} djSelected" id="sqlDetails_{{ forloop.counter }}">
            {% for time_item in template.processing_timeline %}
               <span title="{{ time_item.name }}
Runtime {{ time_item.relative_start|floatformat:2 }} - {{ time_item.relative_end|floatformat:2 }} ms
Duration {{ time_item.duration|floatformat:2  }} ms
{% if time_item.position %}Lines {{ time_item.position.0 }} - {{ time_item.position.1 }}{% endif %}
Depth {{ time_item.level|add:1 }}
                  "
                  class="timeline_item"
                  style="
                  min-width: 1px;
                  margin-left: {{ time_item.offset_p|stringformat:'f' }}%;
                  width: {{ time_item.rel_duration_p|stringformat:'f' }}%;
                  background-color: {{ time_item.bg_color }};
                  top: calc({{ time_item.level }}px * 18);
                  position: absolute;
                  opacity: 0.9;
                  ">&nbsp;</span>
            {% endfor %}
            </div>
         </td>
         <td></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<h4>{% trans 'Summary' %}</h4>
<table>
  <thead>
    <tr>
      <th>{% trans 'Template Name' %}</th>
      <th>{% trans 'Time (ms)' %}</th>
    </tr>
  </thead>
  <tbody>
    {% for k, v in summary %}
    <tr class="{% cycle 'djDebugOdd' 'djDebugEven' %}">
      <td>{{ k }}</td>
      <td>{{ v|floatformat }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>