{% load wagtailadmin_tags i18n %}

<ol class="workflow-timeline">

    <li class="workflow-timeline__item workflow-timeline__item--approved">
        <div class="workflow-timeline__line"></div>
        {% icon name="circle-check" classname="workflow-timeline__icon" %}
        {% trans "Submitted" %}
    </li>

    {# Workflow tasks #}
    {% if workflow_state %}
        {% for task in workflow_state.all_tasks_with_state %}
            {% with status=task.task_state.status status_display=task.task_state.get_status_display|default:_("Not started") %}
                <li class="workflow-timeline__item workflow-timeline__item--{{ status|default:"pending" }}" {% if status == "in_progress" %}aria-current="step"{% endif %}>
                    <div class="workflow-timeline__line"></div>
                    {% if status == "rejected" %}
                        <div class="w-flex">
                            {% icon name="warning" classname="workflow-timeline__icon" title=status_display %}
                            <div class="w-flex w-flex-col">
                                <strong>{{ task.name }}</strong>
                                {% if task.task_state.finished_by %}
                                    {% blocktrans trimmed with requested_by=task.task_state.finished_by|user_display_name %}
                                        Changes requested by {{ requested_by }}
                                    {% endblocktrans %}
                                {% else %}
                                    {% trans "Changes requested" %}
                                {% endif %}
                            </div>
                        </div>
                    {% else %}
                        {% if status == "in_progress" %}{% icon name="radio-full" classname="workflow-timeline__icon" title=status_display %}{% else %}{% icon name="radio-empty" classname="workflow-timeline__icon" title=status_display %}{% endif %}
                        {{ task.name }}
                        {% if task.task_state.finished_by %}
                            {% blocktrans trimmed with approved_by=task.task_state.finished_by|user_display_name %}
                                Approved by {{ approved_by }}
                            {% endblocktrans %}
                        {% endif %}
                    {% endif %}

                    {% if task.task_state and task.task_state.get_comment %}
                        <div class="w-ml-[1.875rem] w-w-full">
                            {% trans "with comment:" %} <em>"{{ task.task_state.get_comment }}"</em>
                        </div>
                    {% endif %}
                </li>
            {% endwith %}
        {% endfor %}
    {% endif %}

    {# Published status #}
    <li class="workflow-timeline__item workflow-timeline__item--pending">
        {% icon name="radio-empty" classname="workflow-timeline__icon" %}{% trans "Published" %}
    </li>
</ol>

{# Footer Actions #}
<div class="workflow-timeline__footer">
    <a href="{{ workflow_history_url }}" class="button">
        {% trans "See full history" %}
    </a>

    {% with object.get_latest_revision as latest_revision %}
        <div class="w-flex">
            {% if object.live_revision %}
                <a href="{% url revisions_compare_url_name object.pk|admin_urlquote 'live' latest_revision.id %}" class="workflow-timeline__footer-link">
                    {% trans "Compare with live version" %}
                </a>
            {% endif %}
            {% with latest_revision.get_previous as previous_revision %}
                {% if previous_revision %}
                    {# Only show the separator if there are two links. #}
                    {% if object.live_revision %}
                        <div class="w-mx-2" aria-hidden="true">|</div>
                    {% endif %}
                    <a href="{% url revisions_compare_url_name object.pk|admin_urlquote previous_revision.id latest_revision.id %}"
                       class="workflow-timeline__footer-link">{% trans 'Compare with previous version' %}</a>
                {% endif %}
            {% endwith %}
        </div>
    {% endwith %}

</div>
