{% macro header_item(name, base_url) %}
<div class="group relative z-50">
  <a href="{{ base_url }}" class="header-dropdown-link">{{ name }}</a>
  <div class="group-hover:block absolute hidden group-hover:border bg-white rounded drop-shadow-sm">
    {{ caller() }}
  </div>
</div>
{% endmacro %}

<div id="header" class='flex flex-wrap justify-between gap-y-4 mb-5 w-full text-lg font-light'>
  <div class='flex space-x-8'>
    <a href="{{ batch_base_url }}/">
      <b>/</b>
    </a>

    {% if userdata['is_developer'] == 1 %}
    {% call header_item('Auth', auth_base_url) %}
    <a class=" block hover:bg-slate-100 px-2 py-1" href="{{ auth_base_url }}/roles">Roles</a>
    <a class="block hover:bg-slate-100 px-2 py-1" href="{{ auth_base_url }}/users">Users</a>
    {% endcall %}
    {% endif %}

    {% call header_item('Batch', batch_base_url) %}
    {% if userdata['is_developer'] == 1 %}
    <a class="block hover:bg-slate-100 px-2 py-1" href="{{ batch_driver_base_url }}">Driver</a>
    <a class="block hover:bg-slate-100 px-2 py-1" href="{{ batch_base_url }}/billing_projects">Billing Projects</a>
    {% endif %}

    {% if userdata['username'] %}
    <a class="block hover:bg-slate-100 px-2 py-1" href="{{ batch_base_url}}/billing_limits">Billing Limits</a>
    <a class="block hover:bg-slate-100 px-2 py-1" href="{{ batch_base_url }}/billing">Billing</a>
    {% endif %}

    {% if userdata['is_developer'] == 1 %}
    <a class="block hover:bg-slate-100 px-2 py-1" href="{{ batch_driver_base_url }}/user_resources">User Resources</a>
    <a class="block hover:bg-slate-100 px-2 py-1" href="{{ batch_driver_base_url }}/quotas">Quotas</a>
    {% endif %}
    <a class="block hover:bg-slate-100 px-2 py-1" href="{{ www_base_url }}/docs/batch/">Docs</a>
    {% endcall %}

    {% if userdata['is_developer'] == 1 %}
    {% call header_item("CI", ci_base_url) %}
    <a class="block hover:bg-slate-100 px-2 py-1" href="{{ ci_base_url }}/me">Me</a>
    <a class="block hover:bg-slate-100 px-2 py-1" href="{{ ci_base_url }}/namespaces">Namespaces</a>
    <a class="block hover:bg-slate-100 px-2 py-1" href="{{ ci_base_url }}/flaky_tests">Flaky Tests</a>
    {% endcall %}
    {% endif %}

    {% if userdata['is_developer'] == 1 %}
    {% call header_item("Monitoring", monitoring_base_url) %}
    <a class="block hover:bg-slate-100 px-2 py-1" href="{{ grafana_base_url }}">Grafana</a>
    <a target="_blank" class="block hover:bg-slate-100 px-2 py-1" href="https://console.cloud.google.com/logs/query;query=resource.labels.namespace_name%3D%22{{ k8s_namespace }}%22">
      Log Viewer<i class="material-icons text-icon">open_in_new</i>
    </a>
    <a class="block hover:bg-slate-100 px-2 py-1" href="{{ monitoring_base_url }}/billing">Billing</a>
    {% endcall %}
    {% endif %}
  </div>

  <div class='flex space-x-4'>
    {% if userdata %}
    <a href="{{ auth_base_url }}/user">
      <b class='font-semibold'>{{ userdata["username"] }}</b>
    </a>
    {% else %}
  <a class="header-link" href="{{ auth_base_url }}/user">
    Log in or sign up
  </a>
    {% endif %}
  </div>
</div>