{% load i18n %}
<div class="space-y-5">
    <div class="flex flex-wrap items-center gap-x-5 gap-y-2 text-sm text-gray-500">
        <span class="font-semibold {% if workflow.status_label == 'Completed' %}text-success-dark{% elif workflow.status_label == 'Failed' %}text-danger-dark{% elif workflow.status == 'paused' %}text-warning-dark{% endif %}">{{ workflow.status_label }}</span>
        <span>{% blocktrans count steps=workflow.step_count %}{{ steps }} step{% plural %}{{ steps }} steps{% endblocktrans %} · {{ workflow.duration_display }}</span>
        <time datetime="{{ workflow.finished_at }}">{{ workflow.finished_display }}</time>
    </div>

    {% if workflow.status == 'paused' %}
        {% include "inbox_items/workflow_approval.html" %}
    {% endif %}

    {% if has_run_view %}
        {% include "views/workflows/builder.html" %}
    {% else %}
        <p class="text-sm text-gray-500">{% translate "The workflow graph is no longer available." %}</p>
    {% endif %}

    <div class="flex flex-wrap items-center justify-between gap-4 text-sm">
        {% if related_object %}
            {% if related_object.available and related_object.url %}
                <a href="{{ related_object.url }}" class="text-primary-700 hover:underline">{{ related_object.label }} <i class="fa-solid fa-arrow-up-right-from-square" aria-hidden="true"></i></a>
            {% else %}
                <span class="text-gray-500">{{ related_object.label }} · {% translate "Object no longer available" %}</span>
            {% endif %}
        {% endif %}
        {% if run_available and workflow.run_url %}
            <a href="{{ workflow.run_url }}" class="btn btn-secondary btn-sm">{% translate "Open workflow run" %}</a>
        {% elif not run_available %}
            <span class="text-gray-500">{% translate "The original run is no longer available. Showing its saved execution." %}</span>
        {% endif %}
    </div>
</div>