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

{% block titletag %}{% trans "Translation Progress Dashboard" %}{% endblock %}
{% block bodyclass %}listing{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'wagtail_localize_dashboard/css/dashboard.css' %}">
{% endblock %}

{% block content %}
  <div class="w-bg-surface-header w-border-b w-top-0 sm:w-sticky w-z-header">
    <header class="w-sticky w-top-0 w-z-header pl-4em">
      <div class="merged-header__icon icon icon-wagtail-localize-language" aria-hidden="true"></div>
      <h1 class="w-pl-slim-header sm:w-pl-5 w-min-h-slim-header sm:w-pr-2 w-w-full w-flex-1 w-overflow-x-auto w-box-border w-mb-0">
        {% trans "Translation Progress Dashboard" %}
      </h1>
    </header>

    <div class="pl-4em pb-4">
      <form method="get" class="w-flex w-flex-wrap w-gap-4 w-items-end sm:w-pl-5" aria-label="{% trans "Filter translations" %}">
        {% if filter_form.column_filter.value %}
          <input type="hidden" name="column_filter" value="{{ filter_form.column_filter.value }}">
        {% endif %}
        <div class="w-flex w-flex-col">
          {{ filter_form.search.label_tag }}
          {{ filter_form.search }}
        </div>
        <div class="w-flex w-flex-col">
          {{ filter_form.original_language.label_tag }}
          {{ filter_form.original_language }}
        </div>
        <div class="w-flex w-flex-col">
          {{ filter_form.exists_in_language.label_tag }}
          {{ filter_form.exists_in_language }}
        </div>
        <div class="w-flex w-flex-col">
          {{ filter_form.translation_key.label_tag }}
          {{ filter_form.translation_key }}
        </div>
        <div class="w-flex align-items-end">
          <button type="submit" class="button">{% trans "Filter" %}</button>
          {% if filter_form.search.value or filter_form.original_language.value or filter_form.exists_in_language.value or filter_form.translation_key.value or filter_form.column_filter.value %}
            <a href="?" class="button button-secondary">{% trans "Clear" %}</a>
          {% endif %}
        </div>
      </form>
    </div>

    {% if filter_form.column_filter %}
    <div class="pl-4em w-pt-4 pb-4 w-border-t">
      <form method="get" class="sm:w-pl-5" aria-label="{% trans "Filter translation columns" %}">
        <fieldset class="w-flex w-flex-wrap w-gap-4 w-items-end" style="border: none; padding: 0; margin: 0;">
          <legend class="w-sr-only">{% trans "Translation column filter" %}</legend>
          {% if filter_form.search.value %}
            <input type="hidden" name="search" value="{{ filter_form.search.value }}">
          {% endif %}
          {% if filter_form.original_language.value %}
            <input type="hidden" name="original_language" value="{{ filter_form.original_language.value }}">
          {% endif %}
          {% if filter_form.exists_in_language.value %}
            <input type="hidden" name="exists_in_language" value="{{ filter_form.exists_in_language.value }}">
          {% endif %}
          {% if filter_form.translation_key.value %}
            <input type="hidden" name="translation_key" value="{{ filter_form.translation_key.value }}">
          {% endif %}
          <div class="w-flex w-flex-col">
            {{ filter_form.column_filter.label_tag }}
            {{ filter_form.column_filter }}
          </div>
          <div class="w-flex align-items-end">
            <button type="submit" class="button">{% trans "Apply" %}</button>
          </div>
        </fieldset>
      </form>
    </div>
    {% endif %}
  </div>

  <div>
    {% if column_filter_label %}
      <p class="w-pt-4 w-mb-0 text-center"><em>{% blocktrans with label=column_filter_label %}Only showing '{{ label }}' languages.{% endblocktrans %}</em></p>
    {% endif %}
    {% if pages_with_progress %}
      <div class="w-py-6">
        <table class="listing full-width">
          <caption class="w-sr-only">{% trans "Pages with their translation progress" %}</caption>
          <thead>
            <tr class="table-headers">
              <th class="title">{% trans "Page Title" %}</th>
              <th>{% trans "Status" %}</th>
              <th>{% trans "Translations" %}</th>
              <th>{% trans "Actions" %}</th>
            </tr>
          </thead>
          <tbody>
            {% for page_data in pages_with_progress %}
              <tr>
                <td class="title">
                  <div class="title-wrapper">
                    <strong><a href="{{ page_data.edit_url }}">{{ page_data.page.get_admin_display_title }}</a></strong>
                    <div class="page-slug">{{ page_data.page.get_url }}</div>
                  </div>
                </td>
                <td>
                  <span class="w-status {% if page_data.page.live %}w-status--primary{% endif %}" role="status" aria-label="{% blocktrans with status=page_data.page.status_string %}Publication status: {{ status }}{% endblocktrans %}">{{ page_data.page.status_string }}</span>
                </td>
                <td>
                  {% if page_data.translations %}
                    <div class="actions actions-inline-start">
                      {% for translation in page_data.translations %}
                        <a href="{{ translation.edit_url }}"
                           class="button button-small button-secondary {% if translation.percent_translated == 100 %}btn-success{% elif translation.percent_translated >= 80 %}btn-warning{% else %}btn-danger{% endif %}"
                           title="{% blocktrans with locale=translation.locale percent=translation.percent_translated %}Edit {{ locale }} version - {{ percent }}% complete{% endblocktrans %}{% if not translation.live %} ({% trans "draft" %}){% elif translation.has_unpublished_changes %} ({% trans "live + draft" %}){% endif %}">
                          {% if translation.percent_translated == 100 %}
                            {% icon name="circle-check" %}
                            <span class="w-sr-only">{% trans "Complete:" %}</span>
                          {% else %}
                            {% icon name="warning" %}
                            <span class="w-sr-only">{% trans "In progress:" %}</span>
                          {% endif %}
                          {{ translation.locale|upper }} {% if translation.percent_translated != 100 %}{{ translation.percent_translated }}%{% endif %}{% if not translation.live %}
                            <span class="status-icon status-icon--draft">{% icon name="draft" %}</span>
                            <span class="w-sr-only">{% trans "(draft)" %}</span>
                          {% elif translation.has_unpublished_changes %}
                            <span class="status-icon status-icon--live-draft">{% icon name="draft" %}</span>
                            <span class="w-sr-only">{% trans "(live + draft)" %}</span>
                          {% endif %}
                        </a>
                      {% endfor %}
                    </div>
                  {% else %}
                    <span class="no-translations">{% trans "No translations" %}</span>
                  {% endif %}
                </td>
                <td>
                  <div class="actions actions-inline-start">
                    <a href="{{ page_data.edit_url }}" class="button button-small" aria-label="{% blocktrans with title=page_data.page.get_admin_display_title %}Edit {{ title }}{% endblocktrans %}">{% trans "Edit" %}</a>
                    {% if page_data.page.live %}
                      <a href="{{ page_data.view_url }}" class="button button-small button-secondary" target="_blank" rel="noopener noreferrer" aria-label="{% blocktrans with title=page_data.page.get_admin_display_title %}View {{ title }} (opens in new window){% endblocktrans %}">
                        {% trans "View" %} <span class="w-sr-only">{% trans "(opens in new window)" %}</span>
                      </a>
                    {% endif %}
                  </div>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>

        {% if is_paginated %}
          {% include "wagtailadmin/shared/pagination_nav.html" with items=page_obj %}
        {% endif %}
      </div>

    {% else %}
      <p class="pl-4em w-pt-4"><span class="sm:w-pl-5">{% trans "No pages found." %}</span></p>
    {% endif %}
  </div>
{% endblock %}