{% extends "wagtailadmin/base.html" %}
{% load i18n wagtailadmin_tags %}

{% block titletag %}{% trans "Workflow progress" %}{% endblock %}

{% block content %}
    {% trans "Workflow progress" as title_str %}
    {% include "wagtailadmin/shared/header.html" with title=title_str %}

    <div class="nice-padding">
        <h2>{% icon "doc-empty-inverse" class_name="initial" %} {{ page.specific_deferred.get_admin_display_title }}</h2>
        <p>
            <a href="{% url 'wagtailadmin_pages:edit' page.id %}" class="button button-small button-secondary">{% trans "Edit / Review" %}</a>
            <a href="{% url 'wagtailadmin_pages:workflow_history' page.id %}" class="button button-small button-secondary">{% trans "Workflow history" %}</a>
        </p>

        <h2>{% icon "clipboard-list" class_name="initial" %} {{ workflow_state.workflow.name }}</h2>

        <p>
            {% blocktrans trimmed with modified_by=workflow_state.requested_by|user_display_name %}Requested by <b>{{ modified_by }}</b>{% endblocktrans %}
            <span class="avatar small"><img src="{% avatar_url workflow_state.requested_by size=25 %}" alt="" decoding="async" loading="lazy"/></span>
        </p>

        <p>
            {% blocktrans trimmed with workflow_state.created_at as started_at %}Started at <b>{{ started_at }}</b>{% endblocktrans %}
        </p>

        <p>
            {% blocktrans trimmed with workflow_state.get_status_display as status %}Status <span class="status-tag primary"> {{ status }}</span>{% endblocktrans %}
        </p>


        <div class="w-tabs" data-tabs>
            <div class="w-tabs__wrapper">
                <div role="tablist" class="w-tabs__list ">
                    {% trans "Tasks" as tasks_title %}
                    {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id="tasks" title=tasks_title %}
                    {% trans "Timeline" as timeline_title %}
                    {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id="timeline" title=timeline_title %}
                </div>
            </div>
            <div class="tab-content">
                <div id="tab-tasks" role="tabpanel" data-tab="tasks" hidden>
                    <table class="workflow-progress-table workflow-progress-table--tasks">
                        <colgroup width="20%"></colgroup>
                        {% for task in tasks %}
                            <colgroup width="{% widthratio 80 tasks|length 1 %}%"></colgroup>
                        {% endfor %}
                        <thead>
                            <th class="workflow-progress-table__left-column"></th>
                            {% for task in tasks %}
                                <th>{{ task }}</th>
                            {% endfor %}
                        </thead>
                        <tbody>
                            {% for revision, task_states in task_states_by_revision %}
                                <tr>
                                    <td class="workflow-progress-table__left-column">
                                        {% if forloop.first %}
                                            {% trans "Initial Revision" %}
                                        {% else %}
                                            {% if not forloop.first %}
                                                {% trans "Page edited" as action %}
                                                {% if revision.user %}
                                                    {% blocktrans trimmed with '<b>'|add:action|add:'</b>' as action and revision.user|user_display_name as who and revision.created_at as at %}
                                                        {{ action }} by <b>{{ who }}</b> at <b>{{ at }}</b>
                                                    {% endblocktrans %}
                                                {% else %}
                                                    {% blocktrans trimmed with '<b>'|add:action|add:'</b>' as action and revision.created_at as at %}
                                                        {{ action }} at <b>{{ at }}</b>
                                                    {% endblocktrans %}
                                                {% endif %}
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                    {% for task_state in task_states %}
                                        <td>
                                            {% if task_state.status == 'approved' or task_state.status == 'rejected' %}
                                                {% if task_state.finished_by %}
                                                    {% blocktrans trimmed with action='<div class="status-tag primary">'|add:task_state.get_status_display|add:'</div>'|safe who=task_state.finished_by|user_display_name at=task_state.finished_at %}
                                                        {{ action }} by <b>{{ who }}</b> at <b>{{ at }}</b>
                                                    {% endblocktrans %}
                                                {% else %}
                                                    {% blocktrans trimmed with action='<div class="status-tag primary">'|add:task_state.get_status_display|add:'</div>'|safe at=task_state.finished_at %}
                                                        {{ action }} at <b>{{ at }}</b>
                                                    {% endblocktrans %}
                                                {% endif %}
                                            {% else %}
                                                <div class="status-tag primary">{{ task_state.get_status_display }}</div>
                                            {% endif %}
                                            {% if task_state.specific.get_comment %}
                                                <p>{% trans 'with comment:' %} <b>"{{ task_state.specific.get_comment }}"</b></p>
                                            {% endif %}
                                        </td>
                                    {% endfor %}
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

                <div id="tab-timeline" role="tabpanel" data-tab="timeline">
                    <table class="workflow-progress-table workflow-progress-table--timeline">
                        <colgroup width="20%"></colgroup>
                        <colgroup width="80%"></colgroup>
                        <tbody>
                            {% for timeline_item in timeline %}
                                <tr>
                                    <td class="workflow-progress-table__left-column">
                                        {{ timeline_item.time }}
                                    </td>
                                    <td>
                                        {% if timeline_item.action == 'workflow_started' %}
                                            <b>{% trans "Workflow started" %}</b>
                                        {% elif timeline_item.action == 'workflow_completed' %}
                                            <b>{% trans "Workflow completed" %}</b>
                                            <div class="status-tag primary">{{ timeline_item.workflow_state.get_status_display }}</div>
                                        {% elif timeline_item.action == 'page_edited' %}
                                            {% trans "Page edited" as action %}
                                            {% if revision.user %}
                                                {% blocktrans trimmed with '<b>'|add:action|add:'</b>' as action and timeline_item.revision.user|user_display_name as who %}
                                                    {{ action }} by <b>{{ who }}</b>
                                                {% endblocktrans %}
                                            {% else %}
                                                <b>{{ action }}</b>
                                            {% endif %}
                                        {% elif timeline_item.action ==  'task_completed' %}
                                            <b>{{ timeline_item.task_state.task }}</b>

                                            {% if timeline_item.task_state.finished_by %}
                                                {% blocktrans trimmed with action='<div class="status-tag primary">'|add:timeline_item.task_state.get_status_display|add:'</div>'|safe who=timeline_item.task_state.finished_by|user_display_name %}
                                                    {{ action }} by <b>{{ who }}</b>
                                                {% endblocktrans %}
                                            {% else %}
                                                <div class="status-tag primary">{{ timeline_item.task_state.get_status_display }}</div>
                                            {% endif %}

                                            {% if timeline_item.task_state.specific.get_comment %}
                                                {% trans 'with comment:' %} <b>"{{ timeline_item.task_state.specific.get_comment }}"</b>
                                            {% endif %}
                                        {% endif %}
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>

            </div>
        </div>
    </div>
{% endblock %}
