{% macro link(url, select, select_colours='', highlight=True, _class='', aclass='') %}
    {% set href=url|host%}
    <div class="relative nav-group {{_class}}">
      <a
        href="{{ href }}"
        hx-get="{{ href }}"
        hx-target="#main-panel"
        hx-select="{{select}}"
        hx-swap="outerHTML"
        hx-push-url="true"
        aria-selected="{{ 'true' if (request.path|host).startswith(href) else 'false' }}"
        {% if aclass %}
          class="{{aclass}}"
        {% elif select_colours %}
          class="whitespace-normal flex gap-2 px-3 py-2 rounded
            text-center break-words leading-snug
            bg-stone-200 text-black
            {{select_colours if highlight else ''}}
          "
        {% else %}
          class="w-full whitespace-normal flex items-center gap-2 font-bold text-2xl px-3 py-2"
        {% endif %}
      >
        {{ caller() }}
      </a>
    </div>
{% endmacro %}


{% macro menu_row(id=False, oob=False) %}
  <div
    {% if id %}
      id="{{id}}"
    {% endif %}
    {% if oob %}
      hx-swap-oob="outerHTML"
    {% endif %}
    class="flex flex-col items-center md:flex-row justify-center md:justify-between w-full p-1 bg-{{menu_colour}}-{{(500-(level()*100))|string}}"
  >
    {{ caller() }}
  </div>
  {{level_up()}}
{% endmacro %}

{% macro desktop_nav() %}
  <nav class="hidden md:flex gap-4 text-sm ml-2 justify-end items-center flex-0">
    {{ caller() }}
  </nav>
{% endmacro %}

{% macro admin() %}
  <i class="fa fa-cog" aria-hidden="true"></i>
  <div>
    settings
  </div>

{% endmacro %}