{% load i18n wagtailadmin_tags %}
{% if states %}
    {% panel id="awaiting-review" heading=_("Awaiting your review") classname="w-panel--dashboard" %}
        <table class="listing listing--dashboard">
            <col />
            <col width="10%"/>
            <col width="7%"/>
            <col width="10%"/>
            <col width="15%"/>
            <col width="10%"/>
            <col width="10%"/>
            <thead class="w-sr-only">
                <tr>
                    <th class="title">{% trans "Title" %}</th>
                    <th>{% trans "Language" %}</th>
                    <th>{% trans "Privacy and access" %}</th>
                    <th>{% trans "Tasks" %}</th>
                    <th>{% trans "Task submitted by" %}</th>
                    <th>{% trans "Task started" %}</th>
                    <th aria-hidden="true">{% comment %} added for visual alignment only {% endcomment %}</th>
                </tr>
            </thead>
            <tbody>
                {% for state in states %}
                    {% with revision=state.task_state.revision obj=state.obj task_state=state.task_state actions=state.actions workflow_tasks=state.workflow_tasks %}
                        {% is_page obj as is_page %}
                        {% if is_page %}
                            {% page_permissions obj as page_perms %}
                        {% endif %}
                        <tr>
                            <td class="title">
                                <div class="title-wrapper">
                                    {% admin_edit_url obj as edit_url %}
                                    {% if page_perms.can_edit or not is_page and edit_url %}
                                        <a href="{{ edit_url }}" title="{% trans 'Edit' %}">{% latest_str obj %}</a>
                                    {% else %}
                                        {% latest_str obj %}
                                    {% endif %}
                                </div>
                            </td>
                            <td>
                                {% i18n_enabled as show_locale_labels %}
                                {% if show_locale_labels and obj.locale_id %}
                                    {% locale_label_from_id obj.locale_id as locale_label %}
                                    {% status locale_label classname="w-status--label" %}
                                {% endif %}
                            </td>
                            <td>
                                {% if is_page %}
                                    {% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=obj %}
                                {% endif %}
                                {% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=obj %}
                            </td>
                            <td class="tasks">
                                {% for task in workflow_tasks %}
                                    <span data-controller="w-tooltip" data-w-tooltip-content-value="{{ task.name }}: {{ task.status_display }}">
                                        {% if task.status == 'approved' %}
                                            {% icon "success" title=task.status_display classname="default" %}
                                        {% elif task.status == 'rejected' %}
                                            {% icon "error" title=task.status_display classname="default" %}
                                        {% else %}
                                            {% icon "radio-empty" title=status_display classname="default" %}
                                        {% endif %}
                                    </span>
                                {% endfor %}
                            </td>
                            <td>
                                {% if revision.user %}{{ revision.user|user_display_name }}{% endif %}
                            </td>
                            <td>{% human_readable_date task_state.started_at %}</td>
                            <td class="actions-container">
                                {% if actions %}
                                    <ul class="actions">
                                        <li>
                                            {% dropdown toggle_icon="dots-horizontal" toggle_aria_label=_("Actions") hide_on_click=True keep_mounted=True %}
                                                {% for action_name, action_label, modal in actions %}
                                                    <button data-workflow-action-url="{% url state.workflow_action_url_name obj.pk|admin_urlquote action_name task_state.id %}" {% if modal %}data-launch-modal{% endif %}>{{ action_label }}</button>
                                                {% endfor %}
                                                {% if page_perms.can_edit or not is_page and edit_url %}
                                                    <a href="{{ edit_url }}">{% trans 'Edit' %}</a>
                                                {% endif %}
                                                {% if obj.is_previewable %}
                                                    <a href="{% url state.workflow_preview_url_name obj.pk|admin_urlquote task_state.task.id %}" target="_blank" rel="noreferrer">{% trans 'Preview' %}</a>
                                                {% endif %}
                                                {% if state.live_revision_id %}
                                                    <a href="{% url state.revisions_compare_url_name obj.pk|admin_urlquote 'live' revision.id %}">{% trans "Compare with live version" %}</a>
                                                {% endif %}
                                                {% if state.previous_revision_id %}
                                                    <a href="{% url state.revisions_compare_url_name obj.pk|admin_urlquote state.previous_revision_id revision.id %}">{% trans "Compare with previous version" %}</a>
                                                {% endif %}
                                            {% enddropdown %}
                                        </li>
                                    </ul>
                                {% endif %}
                            </td>
                        </tr>
                    {% endwith %}
                {% endfor %}
            </tbody>
        </table>
    {% endpanel %}

    <script src="{% versioned_static 'wagtailadmin/js/workflow-action.js' %}" data-activate="dashboard"></script>
{% endif %}
