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

{% block panel_title %}Usługi objęte zgoda{% endblock %}
{% block heading %}Usługi objęte zgoda{% endblock %}
{% block subheading %}
<p class="text-sm text-slate-500 dark:text-slate-400">
  Sklep nie uruchamia żadnej usługi z tej listy, dopóki odwiedzający nie podejmie
  decyzji w banerze. Brak decyzji to brak zgody - nie ładują się skrypty, nie
  zapisują się pliki cookie, nie wychodzą piksele w wiadomościach.
</p>
{% endblock %}

{% block actions %}<a class="btn-primary" href="{% url 'panel:consents:add' %}">Dodaj usługę własną</a>{% endblock %}

{% block content %}

<section class="grid gap-4 sm:grid-cols-3">
  <div class="card"><div class="card-body">
    <p class="text-xs uppercase text-slate-400">Włączone usługi</p>
    <p class="text-2xl font-semibold">{{ enabled_count }}</p>
  </div></div>
  <div class="card"><div class="card-body">
    <p class="text-xs uppercase text-slate-400">Baner pyta o</p>
    <p class="text-sm font-medium text-slate-700 dark:text-slate-200">
      {% for title in asked %}{{ title|lower }}{% if not forloop.last %}, {% endif %}{% empty %}nic{% endfor %}
    </p>
  </div></div>
  <div class="card"><div class="card-body">
    <p class="text-xs uppercase text-slate-400">Wersja konfiguracji</p>
    <p class="font-mono text-sm text-slate-700 dark:text-slate-200">{{ version }}</p>
    <p class="help">Zmiana tej wartości każe banerowi zapytać o zgodę jeszcze raz.</p>
  </div></div>
</section>

{% if not enabled_count %}
  <div class="card border-amber-300 dark:border-amber-800">
    <div class="card-body text-sm text-amber-800 dark:text-amber-200">
      Żadna usługa nie jest włączona, więc baner zgod się nie pokazuje - sklep nie ma
      o co pytać. Włącz usługę poniżej, a baner pojawi się automatycznie.
    </div>
  </div>
{% elif not banner.banner_enabled %}
  <div class="card border-red-300 dark:border-red-800">
    <div class="card-body text-sm text-red-700 dark:text-red-300">
      Baner zgody jest wyłączony, więc żadna z włączonych usług nie ruszy - bez pytania
      nie ma zgody. Włącz baner w zakładce
      <a class="underline underline-offset-2" href="{% url 'panel:cookie:index' %}">Baner cookie i RODO</a>.
    </div>
  </div>
{% endif %}

<p class="text-sm text-slate-500 dark:text-slate-400">
  Usługi pogrupowane kategoriami zgody. Kategoria trafia do banera tylko wtedy,
  gdy ma choć jedna włączona usługę.
</p>

{% for group in groups %}
  <section class="card">
    <div class="card-body space-y-4">
      <div class="space-y-1">
        <h2 class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ group.title }}</h2>
        {% if group.description %}<p class="help">{{ group.description }}</p>{% endif %}
        {% if group.optional and group.services and not group.enabled %}
          <p class="help">Brak włączonych usług - baner nie pyta o te kategorie.</p>
        {% endif %}
      </div>

      {% if group.services %}
        <ul class="divide-y divide-slate-100 dark:divide-slate-800">
          {% for service in group.services %}
            <li class="flex flex-wrap items-start justify-between gap-4 py-3">
              <div class="min-w-0">
                <p class="text-sm font-medium text-slate-900 dark:text-slate-100">
                  {{ service.name }}
                  {% if service.is_custom %}<span class="badge bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300">usługa własna</span>{% endif %}
                </p>
                <p class="text-xs text-slate-500 dark:text-slate-400">{{ service.get_kind_display }}</p>
                {% if service.recipient %}
                  <p class="text-xs text-slate-500 dark:text-slate-400">
                    Odbiorca: {{ service.recipient }}{% if service.country %} ({{ service.country }}){% endif %}
                  </p>
                {% endif %}
                {% if service.summary %}
                  <p class="mt-1 font-mono text-xs text-slate-500 dark:text-slate-400">{{ service.summary }}</p>
                {% endif %}
              </div>

              <div class="flex flex-wrap items-center gap-2">
                {% if service.enabled %}
                  <span class="badge bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-200">włączona</span>
                {% else %}
                  <span class="badge bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-300">wyłączona</span>
                {% endif %}
                <form method="post" action="{% url 'panel:consents:toggle' service.slug %}">
                  {% csrf_token %}
                  <button class="{% if service.enabled %}btn-ghost{% else %}btn-primary{% endif %} !px-3 !py-1" type="submit">
                    {% if service.enabled %}Wyłącz{% else %}Włącz{% endif %}
                  </button>
                </form>
                <a class="btn-ghost !px-3 !py-1" href="{% url 'panel:consents:service' service.slug %}">Ustawienia</a>
              </div>
            </li>
          {% endfor %}
        </ul>
      {% else %}
        <p class="text-sm text-slate-500 dark:text-slate-400">Brak usług w tej kategorii.</p>
      {% endif %}
    </div>
  </section>
{% endfor %}

<p class="help">
  Teksty banera i opisy kategorii ustawisz w zakładce
  <a class="underline underline-offset-2" href="{% url 'panel:cookie:index' %}">Baner cookie i RODO</a>,
  a decyzje odwiedzających znajdziesz w
  <a class="underline underline-offset-2" href="{% url 'panel:consents:journal' %}">Dzienniku zgod</a>.
</p>
{% endblock %}