{% for metric in metrics %}
  <div class="sm:col-span-1">
    <dt class="text-sm font-medium text-neutral-500 dark:text-neutral-300">{{ metric.metric_type.name }}
      <span class="ff-tooltip">
        <svg xmlns="http://www.w3.org/2000/svg" class="inline h-4 w-4 text-neutral-700 dark:text-neutral-300" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
        </svg>
        <div class="tooltip_content bg-white dark:bg-black shadow rounded font-normal text-sm flex flex-col p-2 w-72" style="margin-left:5rem;">
          <p class="font-bold">{{ metric.metric_type.code }}: {{ metric.metric_type.name }}</p>
          <p>{{ metric.metric_type.description }}</p>
        </div>
      </span>
    </dt>
    <dd class="mt-1 text-sm text-neutral-900 dark:text-neutral-100 sm:mt-0 sm:col-span-2">
      <span class="tooltip" data-tip="{{ metric.duration|timedelta_chop_microseconds }}">{{ metric.duration|readable_time_delta }}</span>
    </dd>
  </div>
{% endfor %}
{% if metrics|length is 0 %}
  <div class="px-4 py-5 sm:px-6 col-span-2">
    <h4 class="text-center font-medium text-sm text-neutral-500 dark:text-neutral-100">
      No metrics for this incident at the moment.
    </h4>
  </div>
{% endif %}
