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

{% block panel_title %}Języki{% endblock %}
{% block heading %}Języki serwisu{% endblock %}
{% block subheading %}
  <p class="text-sm text-slate-500 dark:text-slate-400">
    Kod języka jest przedrostkiem adresu (np. <span class="font-mono">/en/kontakt/</span>)
    i wartością hreflang w nagłówku strony.
  </p>
{% endblock %}
{% block actions %}
  <div class="flex flex-wrap gap-2">
    <a class="btn-ghost" href="{% url 'panel:translation_settings:index' %}">Ustawienia tłumaczeń</a>
    <a class="btn-primary" href="{% url 'panel:languages:create' %}">Nowy język</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 - serwis stoi w jednym języku, a adresy są bez
      przedrostka. Włącza się ją w
      <a class="underline" href="{% url 'panel:translation_settings:index' %}">ustawieniach tłumaczeń</a>.
    </div>
  </div>
{% endif %}

<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">Język</th>
          <th class="th">Przedrostek adresu</th>
          <th class="th">Rola</th>
          <th class="th">Tłumaczenia</th>
          <th class="th">Kolejność</th>
          <th class="th text-right">Akcje</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
        {% for item in items %}
          <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
            <td class="td">
              <span class="block font-medium">{{ item.label }}</span>
              <span class="text-xs text-slate-400">{{ item.code }}</span>
            </td>
            <td class="td font-mono text-sm">/{{ item.code }}/</td>
            <td class="td">
              {% if item.is_default %}
                <span class="badge bg-brand-600 text-white">Domyślny</span>
              {% elif item.is_active %}
                <span class="badge bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-100">Aktywny</span>
              {% else %}
                <span class="badge bg-slate-200 text-slate-700 dark:bg-slate-800 dark:text-slate-300">Wyłączony</span>
              {% endif %}
            </td>
            <td class="td text-sm">{{ item.translation_count }}</td>
            <td class="td">{{ item.order }}</td>
            <td class="td">
              <div class="flex justify-end gap-2">
                <a class="btn-ghost !px-3 !py-1 text-xs" href="{% url 'panel:languages:edit' item.pk %}">Edytuj</a>
                {% if not item.is_default %}
                  <form method="post" action="{% url 'panel:languages:delete' item.pk %}"
                        data-confirm="Usunąć język {{ item.label }} razem z jego tłumaczeniami?">
                    {% csrf_token %}
                    <button class="btn-danger !px-3 !py-1 text-xs" type="submit">Usuń</button>
                  </form>
                {% endif %}
              </div>
            </td>
          </tr>
        {% empty %}
          {% url 'panel:languages:create' as create_url %}
          {% include 'panel/partials/empty.html' with colspan=6 url=create_url action="Nowy język" title="Nie ma jeszcze żadnego języka." hint="Pierwszy dodany język jest językiem domyślnym serwisu - jego kod staje się przedrostkiem adresów i znacznikiem hreflang. Kolejne wchodzą do przełącznika w nagłówku." %}
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>

{% if items and not default_language %}
  <div class="card">
    <div class="card-body text-sm text-slate-600 dark:text-slate-300">
      Żaden język nie jest oznaczony jako domyślny. Domyślny to język treści wpisywanej
      w panelu - bez niego serwis nie wie, co pokazać przy braku tłumaczenia.
    </div>
  </div>
{% endif %}
{% endblock %}