{% load i18n %}
{% load humanize %}
<div class="card card-body mt-2 rounded" id="session-details-container">
    <!-- The Session details. -->
    <div class="row text-muted small mt-2">
        <div class="col-4 text-start">
            <strong>{% translate "Session Name:" %}</strong> <span id="session-name">-</span>
        </div>
        <div class="col-4 text-center">
            <strong>{% translate "Created At:" %}</strong> <span id="session-created-at">-</span>
        </div>
        <div class="col-4 text-end">
            <strong>{% translate "Owner:" %}</strong> <span id="session-owner">-</span>
        </div>
    </div>
    <!-- The Belt Details. -->
    <div class="text-center mt-2">
        <h3><span id="session-remaining-asteroids">0</span> / <span id="session-total-asteroids">0</span> {% translate "asteroids" %}</h3>
    </div>
    <div class="progress" style="height:36px;border-radius:6px;overflow:hidden;position:relative;">
        <div id="session-progress-bar" class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" style="width: 0%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
            <small id="session-last-scan" class="text-white text-end m-2" data-last-scan-label="{% translate 'Last Scan' %}"></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 id="session-first-scan" class="text-white">N/A</small>
            <small id="session-finish-time" class="text-white">N/A</small>
        </div>
    </div>
    <div class="row text-muted small mt-2">
        <div class="col-4 text-start">
            <strong>{% translate "Belt size" %}:</strong><br><span id="session-belt-size">0 / 0 m³</span>
        </div>
        <div class="col-4 text-center">
            <strong>{% translate "Speed" %}:</strong><br><span id="session-speed">0 m³/s</span>
        </div>
        <div class="col-4 text-end">
            <strong>{% translate "ETA" %}:</strong><br><span id="session-eta">N/A</span>
        </div>
    </div>
</div>