{% load i18n wagtailadmin_tags %}
{% if states %}
    {% trans "Awaiting your review" as heading %}
    {% panel id="awaiting-review" heading=heading %}
        <table class="listing">
            <col />
            <col width="15%"/>
            <col width="15%"/>
            <col width="15%"/>
            <thead class="w-sr-only">
                <tr>
                    <th class="title">{% trans "Title" %}</th>
                    <th>{% trans "Tasks" %}</th>
                    <th>{% trans "Task submitted by" %}</th>
                    <th>{% trans "Task started" %}</th>
                </tr>
            </thead>
            <tbody>
                {% for task_state, actions, workflow_tasks in states %}
                    {% with task_state.page_revision as revision %}
                        {% page_permissions revision.content_object as page_perms %}
                        <tr>
                            <td class="title" valign="top">
                                <div class="title-wrapper">
                                    {% if page_perms.can_edit %}
                                        <a href="{% url 'wagtailadmin_pages:edit' revision.object_id %}" title="{% trans 'Edit this page' %}">{{ revision.content_object.specific_deferred.get_admin_display_title }}</a>
                                    {% else %}
                                        {{ revision.content_object.specific_deferred.get_admin_display_title }}
                                    {% endif %}

                                    {% i18n_enabled as show_locale_labels %}
                                    {% if show_locale_labels and revision.content_object.locale_id %}
                                        {% locale_label_from_id revision.content_object.locale_id as locale_label %}
                                        <span class="status-tag status-tag--label">{{ locale_label }}</span>
                                    {% endif %}
                                    {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=revision.content_object %}
                                    {% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=revision.content_object %}
                                </div>
                                {% if actions %}
                                    <ul class="actions">
                                        {% for action_name, action_label, modal in actions %}
                                            <li>
                                                <button class="button button-small button-secondary" data-workflow-action-url="{% url 'wagtailadmin_pages:workflow_action' revision.object_id action_name task_state.id %}" {% if modal %}data-launch-modal{% endif %}>{{ action_label }}</button>
                                            </li>
                                        {% endfor %}
                                        {% if page_perms.can_edit %}
                                            <li>
                                                <a href="{% url 'wagtailadmin_pages:edit' revision.object_id %}" class="button button-small button-secondary">{% trans 'Edit' %}</a>
                                            </li>
                                        {% endif %}
                                        {% if revision.content_object.is_previewable %}
                                            <li>
                                                <a href="{% url 'wagtailadmin_pages:workflow_preview' revision.object_id task_state.task.id %}" class="button button-small button-secondary" target="_blank" rel="noreferrer">{% trans 'Preview' %}</a>
                                            </li>
                                        {% endif %}
                                    </ul>
                                {% endif %}
                            </td>
                            <td class="tasks" valign="top">
                                {% for task in workflow_tasks %}
                                    <span data-wagtail-tooltip="{{ task.name }}: {{ task.status_display }}">
                                        {% if task.status == 'approved' %}
                                            {% icon "success" title=task.status_display class_name="default" %}
                                        {% elif task.status == 'rejected' %}
                                            {% icon "error" title=task.status_display class_name="default" %}
                                        {% else %}
                                            {% icon "radio-empty" title=status_display class_name="default" %}
                                        {% endif %}
                                    </span>
                                {% endfor %}
                            </td>
                            <td valign="top">
                                {% if revision.user %}{{ revision.user|user_display_name }}{% endif %}
                            </td>
                            <td valign="top">{% human_readable_date task_state.started_at %}</td>
                        </tr>
                    {% endwith %}
                {% endfor %}
            </tbody>
        </table>
    {% endpanel %}

    <script src="{% versioned_static 'wagtailadmin/js/modal-workflow.js' %}"></script>
    <script src="{% versioned_static 'wagtailadmin/js/workflow-action.js' %}"></script>
    <script src="{% versioned_static 'wagtailadmin/js/vendor/bootstrap-tooltip.js' %}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => ActivateWorkflowActionsForDashboard('{{ csrf_token|escapejs }}'));
        /* Tooltips used by the workflow status component */
        $(function() {
            $('[data-wagtail-tooltip]').tooltip({
                animation: false,
                title: function() {
                    return $(this).attr('data-wagtail-tooltip');
                },
                trigger: 'hover',
                placement: 'bottom',
            });
        });
    </script>
{% endif %}
