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

{% block panel_title %}Szablony{% endblock %}
{% block heading %}Szablony{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Szablony stron i układów serwisu.</p>{% endblock %}

{% block content %}
<div class="card max-w-3xl">
  <div class="card-body space-y-2 text-sm text-slate-500 dark:text-slate-400">
    <p>
      Szablon to zestaw plików wyglądu serwisu w katalogu <code>templates/&lt;katalog&gt;/</code>.
      CMS nie ma żadnego szablonu wbudowanego: bez szablonu serwis stoi na wyglądzie
      własnym projektu i to jest stan domyślny. Kolory i typografię ustawia się wtedy
      w <strong>Wygląd &gt; Kolory i typografia</strong>, a nie tutaj.
    </p>
    <p>
      {% if archive_form %}
        Gotowy szablon instaluje się z paczki <code>.zip</code> poniżej. Można też wgrać katalog
        szablonu prosto do <code>templates/</code> na serwerze - panel wykryje go sam.
      {% else %}
        Gotowy szablon wgrywa się katalogiem prosto do <code>templates/</code> na serwerze -
        panel wykryje go sam.
      {% endif %}
      Pliki, których szablon nie nadpisuje, brane są ze szkieletu <code>templates/public/</code>
      i z modułów, więc szablon może zmieniać sam nagłówek.
    </p>
  </div>
</div>

{% comment %}
  Paczka szablonu niesie pliki .html i .js renderowane na całej witrynie -
  formularz instalacji dostaje tylko właściciel serwisu (widok podaje
  wtedy archive_form). Reszta zakładki zostaje w zasięgu ról.
{% endcomment %}
{% if archive_form %}
<section class="card max-w-3xl">
  <div class="card-body space-y-4">
    <div class="space-y-1">
      <h2 class="text-base font-semibold text-slate-800 dark:text-slate-100">Wgraj i zainstaluj szablon</h2>
      <p class="help">
        Paczka .zip do {{ max_archive_mb }} MB. W jej korzeniu (albo w jednym katalogu w środku)
        musi leżeć <code>template.json</code> lub <code>public/base.html</code>.
        Pliki wykonywalne i inne rozszerzenia spoza listy dozwolonych są pomijane.
      </p>
    </div>
    <form method="post" enctype="multipart/form-data" class="space-y-4">
      {% csrf_token %}
      {% with form=archive_form %}{% include 'panel/partials/form.html' %}{% endwith %}
      <div class="flex justify-end">
        <button class="btn-primary" type="submit" name="action" value="install">Zainstaluj szablon</button>
      </div>
    </form>
  </div>
</section>
{% endif %}

<section class="card max-w-3xl">
  <div class="card-body space-y-4">
    <div class="space-y-1">
      <h2 class="text-base font-semibold text-slate-800 dark:text-slate-100">Nowy, pusty szablon</h2>
      <p class="help">
        Zakłada katalog z samym manifestem - pusty szablon nic nie podmienia, więc do
        czasu dołożenia plików serwis wygląda tak jak bez szablonu. Pierwszy plik do
        podmiany to zwykle <code>public/partials/header.html</code> albo cały
        <code>public/base.html</code>.
      </p>
    </div>
    <form method="post" class="space-y-4">
      {% csrf_token %}
      {% include 'panel/partials/form.html' %}
      <div class="flex justify-end">
        <button class="btn-primary" type="submit" name="action" value="copy">Utwórz szablon</button>
      </div>
    </form>
  </div>
</section>

<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">Nazwa</th>
          <th class="th">Katalog</th>
          <th class="th">Status</th>
          <th class="th text-right">Akcje</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
        {% comment %}
          Pierwszy wiersz to brak szablonu - pelnoprawny wybor, a nie puste
          miejsce na liscie. Bez niego raz wlaczonego szablonu nie dałoby sie
          zdjac z serwisu.
        {% endcomment %}
        <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
          <td class="td">
            <span class="block font-medium">Bez szablonu</span>
            <span class="text-xs text-slate-400">
              Wygląd własny projektu: szkielet <code>templates/public/</code> i widoki modułów.
            </span>
          </td>
          <td class="td"><span class="text-xs text-slate-400">-</span></td>
          <td class="td">
            {% if own_look_active %}
              <span class="badge bg-brand-100 text-brand-800 dark:bg-brand-950 dark:text-brand-200">aktywny</span>
            {% else %}
              <span class="badge bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200">nieaktywny</span>
            {% endif %}
          </td>
          <td class="td">
            <div class="flex justify-end gap-2">
              {% if not own_look_active %}
                <form method="post" action="{% url 'panel:site_templates:deactivate' %}"
                      data-confirm="Wyłączyć szablon i wrócić do wyglądu własnego projektu?">
                  {% csrf_token %}
                  <button class="btn-ghost !px-3 !py-1 text-xs" type="submit">Aktywuj</button>
                </form>
              {% endif %}
            </div>
          </td>
        </tr>
        {% 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.template.name }}</span>
              {% if item.template.description %}
                <span class="text-xs text-slate-400">{{ item.template.description }}</span>
              {% endif %}
            </td>
            <td class="td"><code class="text-xs">{{ item.template.directory }}</code></td>
            <td class="td">
              {% if item.is_active %}
                <span class="badge bg-brand-100 text-brand-800 dark:bg-brand-950 dark:text-brand-200">aktywny</span>
              {% else %}
                <span class="badge bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-200">nieaktywny</span>
              {% endif %}
            </td>
            <td class="td">
              <div class="flex justify-end gap-2">
                {% if not item.is_active %}
                  <form method="post" action="{% url 'panel:site_templates:activate' item.template.slug %}">
                    {% csrf_token %}
                    <button class="btn-ghost !px-3 !py-1 text-xs" type="submit">Aktywuj</button>
                  </form>
                  <form method="post" action="{% url 'panel:site_templates:delete' item.template.slug %}"
                        data-confirm="Usunąć szablon {{ item.template.name }} razem z katalogiem {{ item.template.directory }}?">
                    {% csrf_token %}
                    <button class="btn-danger !px-3 !py-1 text-xs" type="submit">Usuń</button>
                  </form>
                {% endif %}
              </div>
            </td>
          </tr>
        {% empty %}
          <tr><td class="td py-6 text-sm text-slate-500" colspan="4">
            W katalogu <code>templates/</code> nie ma żadnego szablonu, więc serwis stoi na
            wyglądzie własnym projektu. Żeby to zmienić:
            {% if archive_form %}
              wgraj paczkę <code>.zip</code> formularzem wyżej,
            {% else %}
              poproś administratora serwisu o wgranie paczki <code>.zip</code>,
            {% endif %}
            skopiuj katalog szablonu prosto do <code>templates/</code> na serwerze albo
            utwórz pusty szablon formularzem wyżej i dołóż do niego własne pliki.
          </td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
{% endblock %}