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

{% block titletag %}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">
        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="Filter translations">
        <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">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 %}
            <a href="?" class="button button-secondary">Clear</a>
          {% endif %}
        </div>
      </form>
    </div>
  </div>

  <div>
    {% if pages_with_progress %}
      <div class="w-py-6">
        <table class="listing full-width">
          <caption class="w-sr-only">Pages with their translation progress</caption>
          <thead>
            <tr class="table-headers">
              <th class="title">Page Title</th>
              <th>Status</th>
              <th>Translations</th>
              <th>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>
                  {% if page_data.page.live %}
                    <span class="status-tag primary status-published" role="status" aria-label="Publication status: Published">Published</span>
                  {% else %}
                    <span class="status-tag status-draft" role="status" aria-label="Publication status: Draft">Draft</span>
                  {% endif %}
                </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="Edit {{ translation.locale }} version - {{ translation.percent_translated }}% complete">
                          {% if translation.percent_translated == 100 %}
                            {% icon name="circle-check" %}
                            <span class="w-sr-only">Complete:</span>
                          {% else %}
                            {% icon name="warning" %}
                            <span class="w-sr-only">In progress:</span>
                          {% endif %}
                          {{ translation.locale|upper }} {% if translation.percent_translated != 100 %}{{ translation.percent_translated }}%{% endif %}
                        </a>
                      {% endfor %}
                    </div>
                  {% else %}
                    <span class="no-translations">No translations</span>
                  {% endif %}
                </td>
                <td>
                  <div class="actions actions-inline-start">
                    <a href="{{ page_data.edit_url }}" class="button button-small" aria-label="Edit {{ page_data.page.get_admin_display_title }}">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="View {{ page_data.page.get_admin_display_title }} (opens in new window)">
                        View <span class="w-sr-only">(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">No pages found.</span></p>
    {% endif %}
  </div>
{% endblock %}