{% load humanize i18n hq %}
<div class="card hq-card">
    <h2 class="card-title">{% hq_icon "git-commit-horizontal" %} {% translate "Deployment" %}</h2>
    <p class="card-sub">{% translate "What the image now running in this container was built from" %}</p>
    <dl class="hq-facts">
        <div class="hq-row">
            <dt>{% translate "Commit" %}</dt>
            <dd>
                {% if commit_url %}
                    <a class="hq-link mono" href="{{ commit_url }}" target="_blank" rel="noopener">
                        {{ commit_short }}{% hq_icon "external-link" %}
                    </a>
                {% elif commit_short %}
                    <span class="mono">{{ commit_short }}</span>
                {% else %}
                    <span class="muted">—</span>
                {% endif %}
            </dd>
        </div>
        {% comment %}
            The half `git describe --abbrev=0` throws away. It belongs next to the commit
            rather than beside the version: it qualifies which commit is deployed, not
            what the release is called.
        {% endcomment %}
        <div class="hq-row">
            <dt>{% translate "Ahead of tag" %}</dt>
            <dd>
                {% if commits_since_tag is None %}
                    <span class="muted">—</span>
                {% elif commits_since_tag %}
                    <span class="num">+{{ commits_since_tag }}</span>
                    <span class="hq-hint">{% blocktranslate with tag=version %}past {{ tag }}{% endblocktranslate %}</span>
                {% else %}
                    <span class="num">{% translate "on the tag" %}</span>
                {% endif %}
            </dd>
        </div>
        <div class="hq-row">
            <dt>{% translate "Subject" %}</dt>
            <dd class="hq-subject">{{ subject|default:"—" }}</dd>
        </div>
        <div class="hq-row">
            <dt>{% translate "Committed" %}</dt>
            <dd>
                {% if committed_at %}
                    <span class="num">{{ committed_at|date:"j M Y H:i" }}</span>
                    <span class="hq-hint">{{ committed_at|naturaltime }}</span>
                {% else %}
                    <span class="muted">—</span>
                {% endif %}
            </dd>
        </div>
        <div class="hq-row">
            <dt>{% translate "Built" %}</dt>
            <dd>
                {% if built_at %}
                    <span class="num">{{ built_at|date:"j M Y H:i" }}</span>
                    <span class="hq-hint">{{ built_at|naturaltime }}</span>
                {% else %}
                    <span class="muted">—</span>
                {% endif %}
            </dd>
        </div>
        <div class="hq-row">
            <dt>{% translate "Deployed" %}</dt>
            <dd>
                {% if deployed_at %}
                    <span class="num">{{ deployed_at|date:"j M Y H:i" }}</span>
                    <span class="hq-hint">{{ deployed_at|naturaltime }}</span>
                {% else %}
                    <span class="muted">—</span>
                {% endif %}
            </dd>
        </div>
    </dl>
    {% if pipeline %}
        {% comment %}
            The commit → build → deploy span, drawn to scale. The segments are sized by JS
            from data-seconds rather than a style attribute; the CSS min-width keeps a
            near-instant stage from vanishing, and a segment too thin to read still has
            its figure in the legend below.
        {% endcomment %}
        <div class="hq-pipeline">
            <div class="hq-pipeline-head">
                <span class="label">{% translate "Path to production" %}</span>
                <span class="hq-total num">{% blocktranslate with total=pipeline.total %}{{ total }} in total{% endblocktranslate %}</span>
            </div>
            <div class="hq-track">
                {% for stage in pipeline.stages %}
                    <div class="hq-seg hq-seg-{{ stage.key }}"
                         data-seconds="{{ stage.seconds }}"
                         title="{{ stage.label }}: {{ stage.text }}"></div>
                {% endfor %}
            </div>
            <div class="hq-legend">
                {% for stage in pipeline.stages %}
                    <span class="hq-key">
                        <span class="hq-dot hq-dot-{{ stage.key }}"></span>
                        {{ stage.label }}
                        <b class="num">{{ stage.text }}</b>
                    </span>
                {% endfor %}
            </div>
        </div>
    {% endif %}
    {% comment %}
        Said plainly, because the number is only as honest as its source: the container
        start time is stamped by the entrypoint, so a restart or a reboot moves it without
        anything having been released.
    {% endcomment %}
    <p class="note hq-note">
        {% hq_icon "info" %}
        <span>{% translate "“Deployed” is the container start time — a restart or a reboot moves it with nothing having been released." %}</span>
    </p>
</div>