{% load i18n %}
{% load humanize %}
<div class="card card-body mt-2 rounded">
  <div class="text-center">
        <h3>{{stats.remaining_asteroids|default:0}} / {{ stats.total_asteroids|default:0 }} {% translate "asteroids" %}</h3>
    </div>
    <div class="progress" style="height:36px;border-radius:6px;overflow:hidden;position:relative;">
    <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" style="width: {{ stats.progress_percent|safe }}%;" aria-valuemin="0" aria-valuemax="100">
        <small class="text-white text-end m-2" title='{% translate "Last Scan" %}: {{ stats.end|date:"H:i" }}'>{% if stats.end %}{{ stats.end|date:"H:i" }}{% else %}{% endif %}</small>
    </div>

    <div class="position-absolute top-0 start-0 w-100 h-100 d-flex justify-content-between align-items-center px-3" style="pointer-events:none; z-index:2;">
      <small class="text-white">{% if stats.start %}{{ stats.start|date:"H:i" }}{% else %}N/A{% endif %}</small>
      <small class="text-white">{% if stats.finish %}{{ stats.finish|date:"H:i" }}{% else %}N/A{% endif %}</small>
    </div>
  </div>
  <div class="row text-muted small mt-2">
    <div class="col-4 text-start">
      <strong>{% translate "Belt size" %}:</strong><br>{{ stats.left|safe|floatformat:0|intcomma|default:0 }} / {{ stats.size|safe|floatformat:0|intcomma|default:0 }} m³
    </div>
    <div class="col-4 text-center">
      <strong>{% translate "Speed" %}:</strong><br>{{ stats.rate|safe|floatformat:2|intcomma|default:0 }} m³/s
    </div>
    <div class="col-4 text-end">
      <strong>{% translate "ETA" %}:</strong><br>{% if stats.finish %}{{ stats.finish|naturaltime }}{% else %}N/A{% endif %}
    </div>
  </div>
</div>