<!DOCTYPE html>

{% load static tailwind_tags %}

<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 %}Podlaski Związek Brydża Sportowego{% endblock %}
    </title>
    <base href="/" />

    {% tailwind_css %}
  </head>

  <body class="antialiased flex flex-col gap-4 bg-stone-50">
    <header class="w-full bg-white shadow-md border-b border-slate-400 pb-1">
      <nav
        class="m-4 container flex flex-col lg:flex-row items-center lg:items-start justify-center mx-auto"
      >
        <div class="self-center">
          <img class="max-h-[200px]" src="{% static 'podlzbs.jpg' %}" alt="" />
        </div>
        <div class="flex flex-col lg:self-end w-full">
          <div class="mb-4 mx-auto p-2 text-center">
            <h1>
              Podlaski Związek <br />
              Brydża Sportowego
            </h1>
          </div>
          {% if nav %}
          <ul
            class="flex flex-wrap justify-center lg:items-end gap-3 text-[15px] leading-5 my-2"
          >
            {% for button in nav %}
            <li>
              <a
                class="nbutton home {% if button.href == '/' %}{{ home }}{% elif button.href in request.path %}active{% endif %}"
                href="{{ button.link }}"
                target="{% if button.blank %}_blank{% else %}_self{% endif %}"
                >{{ button.title }}</a
              >
            </li>
            {% endfor %}
          </ul>
          {% endif %}
        </div>
        {% if uppernav %}
        <ul class="flex flex-wrap justify-center lg:w-40 gap-3 lg:m-0 mt-2">
          {% for button in uppernav %}
          <li title="{{ button.title }}">
            <a
              href="{{ button.href }}"
              target="{% if button.blank %}_blank{% else %}_self{% endif %}"
              ><img
                class="max-h-12"
                src="{{ button.photo.url }}"
                alt="{{ button.title }}"
            /></a>
          </li>
          {% endfor %}
        </ul>
        {% endif %}
      </nav>
    </header>
    <main
      class="container xl:max-w-screen-xl mx-auto p-4 prose-img:my-1 prose-p:my-[0.3em]"
    >
      {% block content %}{% endblock %}
    </main>
    <footer class="footer text-center font-light italic">
      <h6 class="mb-4">&copy; {% now "Y" %} Mikołaj Kubiczek</h6>
    </footer>
  </body>
</html>
