{% extends 'panel/base.html' %}

{% block panel_title %}Tłumaczenia{% endblock %}
{% block heading %}Tłumaczenia{% endblock %}
{% block subheading %}
  <p class="text-sm text-slate-500 dark:text-slate-400">
    Każdy wiersz to jedna treść, a kolumna - jeden język. Kliknięcie w odznakę
    otwiera tłumaczenie tej treści.
  </p>
{% endblock %}
{% block actions %}
  <div class="flex flex-wrap gap-2">
    <a class="btn-ghost" href="{% url 'panel:languages:index' %}">Języki</a>
    <a class="btn-ghost" href="{% url 'panel:translation_settings:index' %}">Ustawienia tłumaczeń</a>
  </div>
{% endblock %}

{% block content %}
{% if settings and not settings.enabled %}
  <div class="card">
    <div class="card-body text-sm text-slate-600 dark:text-slate-300">
      Wielojęzyczność jest wyłączona - zapisane tłumaczenia czekają w bazie, a serwis
      pokazuje wyłącznie język oryginału. Włącza się ją w
      <a class="underline" href="{% url 'panel:translation_settings:index' %}">ustawieniach tłumaczeń</a>.
    </div>
  </div>
{% endif %}

{% if languages|length < 2 %}
  <div class="card">
    <div class="card-body text-sm text-slate-600 dark:text-slate-300">
      Nie ma jeszcze drugiego języka - nie ma więc czego tlumaczyc. Języki dodaje się
      w zakładce <a class="underline" href="{% url 'panel:languages:index' %}">Języki</a>.
    </div>
  </div>
{% endif %}

<form method="get" class="flex flex-wrap gap-2">
  <select class="input max-w-[16rem]" name="rodzaj">
    {% for value, name in kinds %}
      <option value="{{ value }}" {% if value == label %}selected{% endif %}>{{ name }}</option>
    {% endfor %}
  </select>
  <input class="input max-w-xs" type="search" name="q" value="{{ query }}" placeholder="Szukaj w tytułach">
  <button class="btn-ghost" type="submit">Pokaż</button>
  {% if query %}<a class="btn-ghost" href="{% url 'panel:translations:index' %}?rodzaj={{ label }}">Wyczyść</a>{% endif %}
</form>

<section class="card overflow-hidden">
  <div class="overflow-x-auto">
    <table class="table">
      <thead class="bg-slate-50 dark:bg-slate-900/60">
        <tr>
          <th class="th">{{ kind_name|default:"Tresc" }}</th>
          {% for language in languages %}
            <th class="th">{{ language.short }}<span class="ml-1 text-xs font-normal text-slate-400">{{ language.label }}</span></th>
          {% endfor %}
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
        {% for row in rows %}
          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
            <td class="td">
              <span class="block font-medium">{{ row.title }}</span>
              <span class="text-xs text-slate-400">{{ kind_name }} &middot; #{{ row.object.pk }}</span>
            </td>
            {% for cell in row.cells %}
              <td class="td">
                {% if cell.state == 'original' %}
                  <span class="badge bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-slate-300">Oryginał</span>
                {% else %}
                  <a class="inline-flex items-center gap-2"
                     href="{% url 'panel:translations:edit' label=label object_id=row.object.pk code=cell.language.code %}">
                    {% if cell.state == 'ready' %}
                      <span class="badge bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-100">Gotowe</span>
                    {% elif cell.state == 'partial' %}
                      <span class="badge bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-100">{{ cell.filled }} z {{ cell.total }}</span>
                    {% elif cell.state == 'hidden' %}
                      <span class="badge bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-slate-300">Ukryte</span>
                    {% else %}
                      <span class="badge bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-200">Brak</span>
                    {% endif %}
                  </a>
                {% endif %}
              </td>
            {% endfor %}
          </tr>
        {% empty %}
          {% include 'panel/partials/empty.html' with colspan=languages|length|add:1 title="Nie ma treści tego rodzaju." hint="Tłumaczy się to, co już jest w serwisie - strony, wpisy, kategorie, pozycje menu i stopki. Dodaj najpierw treść, a wróci tu sama." %}
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if page_obj.paginator.num_pages > 1 %}
    <nav class="flex items-center justify-between gap-4 border-t border-slate-200 px-4 py-3 text-sm dark:border-slate-800">
      <span class="text-slate-500 dark:text-slate-400">Strona {{ page_obj.number }} z {{ page_obj.paginator.num_pages }}</span>
      <div class="flex gap-2">
        {% if page_obj.has_previous %}<a class="btn-ghost !px-3 !py-1" href="?page={{ page_obj.previous_page_number }}&amp;{{ query_string }}">Poprzednia</a>{% endif %}
        {% if page_obj.has_next %}<a class="btn-ghost !px-3 !py-1" href="?page={{ page_obj.next_page_number }}&amp;{{ query_string }}">Następna</a>{% endif %}
      </div>
    </nav>
  {% endif %}
</section>
{% endblock %}