{% load wagtailcore_tags wagtailimages_tags %}

<nav class="enap-dynav" aria-label="Navegação principal">

  {# ── MODO GLOBAL (home) ──────────────────────────────────────────────── #}
  {% if nav_mode == 'global' %}

    <div class="enap-dynav__global">

      {# Logo / link home #}
      <a href="{% pageurl root_page %}" class="enap-dynav__logo" aria-label="Ir para a home da ENAP">
        <span class="enap-dynav__logo-text">ENAP</span>
      </a>

      {# Itens do menu global #}
      <ul class="enap-dynav__menu" role="list">
        {% for item in value.nav_items %}
          {% with section=item.page label=item.custom_label|default:item.page.title %}
            <li class="enap-dynav__menu-item">
              <button
                class="enap-dynav__menu-btn"
                type="button"
                aria-expanded="false"
                aria-controls="dropdown-{{ section.id }}"
                onclick="enapdynav_toggleDropdown(this, 'dropdown-{{ section.id }}')"
              >
                {% if item.icon %}<span class="material-icons" aria-hidden="true">{{ item.icon }}</span>{% endif %}
                {{ label }}
                <span class="material-icons enap-dynav__chevron" aria-hidden="true">expand_more</span>
              </button>

              {# Dropdown: filhas da seção #}
              <div id="dropdown-{{ section.id }}" class="enap-dynav__dropdown" hidden>
                <ul role="list">
                  {% include "enap_designsystem/blocks/dynamic_nav/render_children.html" with parent=section depth=block.value.show_children_depth %}
                </ul>
              </div>
            </li>
          {% endwith %}
        {% endfor %}
      </ul>

    </div>

  {# ── MODO SECTION / SUBSECTION ──────────────────────────────────────── #}
  {% else %}

    <div class="enap-dynav__local">

      {# Botão ENAP — abre o menu global como overlay #}
      <button
        class="enap-dynav__enap-btn"
        type="button"
        aria-expanded="false"
        aria-controls="enap-global-overlay"
        onclick="enapdynav_toggleOverlay()"
        aria-label="Abrir menu global da ENAP"
      >
        <span class="enap-dynav__logo-text">ENAP</span>
        <span class="material-icons enap-dynav__chevron" aria-hidden="true">expand_more</span>
      </button>

      {# Navegação local: filhas (section) ou irmãs (subsection) #}
      <ul class="enap-dynav__local-menu" role="list">
        {% for pg in local_pages %}
          <li class="enap-dynav__local-item{% if pg.id == current_page.id %} enap-dynav__local-item--active{% endif %}">
            <a href="{% pageurl pg %}" {% if pg.id == current_page.id %}aria-current="page"{% endif %}>
              {{ pg.title }}
            </a>
          </li>
        {% endfor %}
      </ul>

    </div>

    {# Overlay do menu global (disparado pelo botão ENAP) #}
    <div id="enap-global-overlay" class="enap-dynav__overlay" hidden aria-modal="true" role="dialog" aria-label="Menu global da ENAP">
      <div class="enap-dynav__overlay-inner">

        <button
          class="enap-dynav__overlay-close"
          type="button"
          onclick="enapdynav_toggleOverlay()"
          aria-label="Fechar menu global"
        >
          <span class="material-icons" aria-hidden="true">close</span>
        </button>

        <ul class="enap-dynav__overlay-menu" role="list">
          {% for item in value.nav_items %}
            {% with section=item.page label=item.custom_label|default:item.page.title %}
              <li class="enap-dynav__overlay-section">

                <a href="{% pageurl section %}" class="enap-dynav__overlay-section-title">
                  {% if item.icon %}<span class="material-icons" aria-hidden="true">{{ item.icon }}</span>{% endif %}
                  {{ label }}
                </a>

                <ul class="enap-dynav__overlay-children" role="list">
                  {% include "enap_designsystem/blocks/dynamic_nav/render_children.html" with parent=section depth=block.value.show_children_depth %}
                </ul>

              </li>
            {% endwith %}
          {% endfor %}
        </ul>

      </div>
    </div>

  {% endif %}

</nav>


<style>
/* ── Navegação Dinâmica ENAP ── base minimalista para testes ────────────── */
.enap-dynav {
  background: #024248;
  color: #fff;
  font-family: inherit;
}

/* Global */
.enap-dynav__global {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1142px;
  margin: 0 auto;
  padding: 0 1rem;
  height: 56px;
}

.enap-dynav__logo {
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  white-space: nowrap;
}
.enap-dynav__logo-text { letter-spacing: .05em; }

.enap-dynav__menu {
  display: flex;
  gap: .25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.enap-dynav__menu-btn {
  display: flex;
  align-items: center;
  gap: .25rem;
  background: none;
  border: none;
  color: #fff;
  font-size: .9rem;
  padding: .5rem .75rem;
  cursor: pointer;
  border-radius: 4px;
  transition: background .15s;
}
.enap-dynav__menu-btn:hover,
.enap-dynav__menu-btn[aria-expanded="true"] {
  background: rgba(255,255,255,.12);
}

.enap-dynav__chevron {
  font-size: 1.1rem;
  transition: transform .2s;
}
[aria-expanded="true"] .enap-dynav__chevron { transform: rotate(180deg); }

/* Dropdown */
.enap-dynav__menu-item { position: relative; }

.enap-dynav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 1000;
  padding: .5rem 0;
}
.enap-dynav__dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.enap-dynav__dropdown-link {
  display: block;
  padding: .5rem 1rem;
  color: #024248;
  text-decoration: none;
  font-size: .9rem;
}
.enap-dynav__dropdown-link:hover { background: #f0f7f7; }

/* Local (section / subsection) */
.enap-dynav__local {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1142px;
  margin: 0 auto;
  padding: 0 1rem;
  height: 56px;
}

.enap-dynav__enap-btn {
  display: flex;
  align-items: center;
  gap: .25rem;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  padding: .4rem .8rem;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.enap-dynav__enap-btn:hover,
.enap-dynav__enap-btn[aria-expanded="true"] {
  background: rgba(255,255,255,.25);
}

.enap-dynav__local-menu {
  display: flex;
  gap: .125rem;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}

.enap-dynav__local-item a {
  display: block;
  padding: .4rem .75rem;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-size: .9rem;
  border-radius: 4px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.enap-dynav__local-item a:hover { color: #fff; background: rgba(255,255,255,.1); }
.enap-dynav__local-item--active a {
  color: #fff;
  border-bottom: 2px solid #70E0DF;
}

/* Overlay */
.enap-dynav__overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.enap-dynav__overlay[hidden] { display: none; }

.enap-dynav__overlay-inner {
  background: #fff;
  width: min(480px, 100%);
  height: 100%;
  overflow-y: auto;
  padding: 2rem 1.5rem;
  position: relative;
}

.enap-dynav__overlay-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #024248;
  font-size: 1.5rem;
}

.enap-dynav__overlay-menu {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.enap-dynav__overlay-section-title {
  display: flex;
  align-items: center;
  gap: .4rem;
  color: #024248;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  margin-bottom: .5rem;
}
.enap-dynav__overlay-section-title:hover { color: #007D7A; }

.enap-dynav__overlay-children {
  list-style: none;
  padding: 0 0 0 1rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.enap-dynav__overlay-child-link {
  color: #525258;
  text-decoration: none;
  font-size: .9rem;
}
.enap-dynav__overlay-child-link:hover { color: #007D7A; }
</style>


<script>
/* ── Navegação Dinâmica ENAP — JS mínimo ─────────────────────────────────── */
function enapdynav_toggleDropdown(btn, id) {
  var dropdown = document.getElementById(id);
  var isOpen = btn.getAttribute('aria-expanded') === 'true';

  // Fecha todos os outros dropdowns abertos
  document.querySelectorAll('.enap-dynav__menu-btn[aria-expanded="true"]').forEach(function(b) {
    b.setAttribute('aria-expanded', 'false');
    var otherId = b.getAttribute('aria-controls');
    var other = document.getElementById(otherId);
    if (other) other.hidden = true;
  });

  btn.setAttribute('aria-expanded', String(!isOpen));
  dropdown.hidden = isOpen;
}

function enapdynav_toggleOverlay() {
  var overlay = document.getElementById('enap-global-overlay');
  var btn = document.querySelector('.enap-dynav__enap-btn');
  if (!overlay) return;

  var isOpen = !overlay.hidden;
  overlay.hidden = isOpen;
  if (btn) btn.setAttribute('aria-expanded', String(!isOpen));

  if (!isOpen) {
    // Foca o botão fechar ao abrir
    var closeBtn = overlay.querySelector('.enap-dynav__overlay-close');
    if (closeBtn) closeBtn.focus();
  }
}

// Fecha dropdown ao clicar fora
document.addEventListener('click', function(e) {
  if (!e.target.closest('.enap-dynav__menu-item')) {
    document.querySelectorAll('.enap-dynav__menu-btn[aria-expanded="true"]').forEach(function(b) {
      b.setAttribute('aria-expanded', 'false');
      var id = b.getAttribute('aria-controls');
      var el = document.getElementById(id);
      if (el) el.hidden = true;
    });
  }
});

// Fecha overlay com Escape
document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    var overlay = document.getElementById('enap-global-overlay');
    if (overlay && !overlay.hidden) enapdynav_toggleOverlay();
  }
});
</script>