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

{% block panel_title %}Treści{% endblock %}
{% block heading %}Treści{% endblock %}
{% block subheading %}<p class="text-sm text-slate-500 dark:text-slate-400">Sekcje treści serwisu i ich ustawienia.</p>{% endblock %}

{% block content %}
{% for entry in entries %}
<section class="card">
  <div class="flex items-center justify-between border-b border-slate-200 px-5 py-3 dark:border-slate-800">
    <h2 class="flex items-center gap-2 font-semibold">
      {% include 'partials/icon.html' with icon=entry.module.icon %}
      {{ entry.module.title }}
    </h2>
    {% if entry.module.has_url %}
      <a class="text-sm font-medium text-brand-600 hover:underline" href="{% url entry.module.menu_url_name %}">Otwórz</a>
    {% endif %}
  </div>
  <div class="card-body">
    <p class="text-sm text-slate-500 dark:text-slate-400">{{ entry.module.description }}</p>
    {% if entry.sections %}
      <ul class="mt-4 grid gap-3 sm:grid-cols-2">
        {% for link in entry.sections %}
          <li>
            <a href="{% url link.url_name %}"
               class="block border border-slate-200 px-4 py-3 hover:border-brand-300 hover:bg-brand-50 dark:border-slate-800 dark:hover:border-brand-800 dark:hover:bg-slate-800">
              <span class="block text-sm font-medium">{{ link.title }}</span>
              <span class="mt-1 block text-xs text-slate-500 dark:text-slate-400">{{ link.description }}</span>
            </a>
          </li>
        {% endfor %}
      </ul>
    {% endif %}
  </div>
</section>
{% empty %}
<p class="text-sm text-slate-500 dark:text-slate-400">Nie ma jeszcze żadnego modułu treści.</p>
{% endfor %}
{% endblock %}