<!DOCTYPE html>

{% load static tailwind_tags wysiwyg %}

<html lang="pl" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Podlaski Związek Brydża Sportowego" />
    <meta name="author" content="Mikołaj Kubiczek" />

    <link rel="icon" href="{% static 'favicon.ico' %}" type="image/x-icon" />
    <link
      rel="icon"
      type="image/png"
      sizes="192x192"
      href="{% static 'icon-192x192.png' %}"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="512x512"
      href="{% static 'icon-512x512.png' %}"
    />

    <title>{% block title %}{{ t.name }}{% endblock %}</title>
    <base href="/" />

    {% tailwind_css %}
  </head>

  <body class="flex flex-col items-center max-w-full gap-4 antialiased prose">
    <header>{{ t.header | safe}}</header>
    <nav class="p-2 bg-green-100 not-prose tpage-nav">
      <ul class="flex flex-row flex-wrap gap-4 text-xl xl:max-w-screen-xl">
        <li class="{% if page == 'homepage' %}active{% endif %}">
          <a href="{% url 'homepage' t.id %}">Strona główna</a>
        </li>
        {% for key, val in rename.items %}
          {% if val != '' %}
          <li class="{% if page == key %}active{% endif %}">
            <a href="{% url 'page' t.id val.1 %}"
              >{{ val.0 }}</a
            >
          </li>
          {% endif %}
        {% endfor %}
      </ul>
    </nav>
    <main class="flex flex-col">
      <div
        class="container xl:max-w-screen-xl mx-auto p-4 prose-h1:font-medium prose-img:my-1 prose-p:my-[0.3em]"
      >
        {{ content | safe }}
      </div>
      <div class="flex flex-wrap items-center justify-center gap-4">{% buttons content_buttons %}</div>
    </main>
    <footer>{{ t.footer | safe}}</footer>
  </body>
</html>
