{% from "navbar-item.html" import navbarItem %}
{% import "icons.html" as icons %}
{% extends "base.html" %}

{% block body %}
  <div id="screen" class="relative flex min-h-screen flex-col">
    <header class="border-b">
      <div
        class="flex items-center justify-between overflow-auto md:container md:mx-auto mx-4"
      >
        <nav
          hx-boost="true"
          hx-select="#screen"
          hx-target="#screen"
          hx-swap="outerHTML"
          class="flex"
        >
          <a href="/" class="mr-6 flex items-center space-x-2">
            {% include "logo.html" %}

            <span class="hidden font-bold sm:inline-block lg:text-base"
              >{{ global.title }}</span
            >
          </a>
          {% with uri=uri | default(page.uri) %}
            {{ navbarItem(label=t("scoreboard"), href="/scoreboard", uri=uri) }}
            {% if user %}
              {{ navbarItem(label=t("challenges"), href="/challenges", uri=uri) }}
              {{ navbarItem(label=t("team"), href="/team", uri=uri) }}
              {{ navbarItem(label=t("account"), href="/account", uri=uri) }}
            {% else %}
              {{ navbarItem(label=t("sign-in"), href="/signin", uri=uri) }}
            {% endif %}
          {% endwith %}
        </nav>
        {% include "command-palette.html" %}
      </div>
    </header>
    <div class="flex flex-1">
      {% block content %}
      {% endblock %}
    </div>
    {% include "footer.html" %}
  </div>
{% endblock %}