{% load wagtailsettings_tags wagtailimages_tags wagtailcore_tags %}
{% get_settings use_default_site=True as settings %}

<header class="site-header{% if settings.base.HeaderSettings.logo_light and settings.base.HeaderSettings.logo_dark %} has-logo-variants{% endif %}">
  <div class="site-container">
    <div class="header-inner">
    {% if settings.base.HeaderSettings.logo_light and settings.base.HeaderSettings.logo_dark %}
      <a href="/" class="logo logo--light">
        {% if settings.base.HeaderSettings.site_name %}
          {% image settings.base.HeaderSettings.logo_light fill-217x30 alt=settings.base.HeaderSettings.site_name %}
        {% else %}
          {% image settings.base.HeaderSettings.logo_light fill-217x30 %}
        {% endif %}
      </a>
      <a href="/" class="logo logo--dark">
        {% if settings.base.HeaderSettings.site_name %}
          {% image settings.base.HeaderSettings.logo_dark fill-217x30 alt=settings.base.HeaderSettings.site_name %}
        {% else %}
          {% image settings.base.HeaderSettings.logo_dark fill-217x30 %}
        {% endif %}
      </a>
    {% elif settings.base.HeaderSettings.logo_light %}
      <a href="/" class="logo">
        {% if settings.base.HeaderSettings.site_name %}
          {% image settings.base.HeaderSettings.logo_light fill-217x30 alt=settings.base.HeaderSettings.site_name %}
        {% else %}
          {% image settings.base.HeaderSettings.logo_light fill-217x30 %}
        {% endif %}
      </a>
    {% elif settings.base.HeaderSettings.logo_dark %}
      <a href="/" class="logo">
        {% if settings.base.HeaderSettings.site_name %}
          {% image settings.base.HeaderSettings.logo_dark fill-217x30 alt=settings.base.HeaderSettings.site_name %}
        {% else %}
          {% image settings.base.HeaderSettings.logo_dark fill-217x30 %}
        {% endif %}
      </a>
    {% endif %}

    <nav class="main-nav" id="site-nav">
      <ul class="main-menu" id="main-menu">
        {% wagtail_site as current_site %}
        {% if page %}
          {% with site_root=page.get_site.root_page %}
            {# Top-level menu: direct children of site root #}
            <li class="menu-item">
              <div class="menu-item-header">
                <a href="#">
                  <span class="main-menu-link">最新文章</span>
                </a>
                {% if nav_latest_page or nav_trending_page %}
                  <button class="submenu-toggle" type="button" aria-expanded="false" aria-label="Toggle submenu"></button>
                {% endif %}
              </div>
              {% if nav_latest_page or nav_trending_page %}
                <span class="menu-divider" aria-hidden="true"></span>
                <ul class="submenu">
                  {% if nav_latest_page %}
                    <li class="submenu-item">
                      <a href="{{ nav_latest_page.url }}">
                        <span class="submenu-item-link">{{ nav_latest_page.title }}</span>
                      </a>
                    </li>
                  {% endif %}
                  {% if nav_trending_page %}
                    <li class="submenu-item">
                      <a href="{{ nav_trending_page.url }}">
                        <span class="submenu-item-link">{{ nav_trending_page.title }}</span>
                      </a>
                    </li>
                  {% endif %}
                </ul>
              {% endif %}
            </li>
            {% for menu_page in site_root.get_children.live.in_menu %}
              <li class="menu-item">
                <div class="menu-item-header">
                  <a href="{{ menu_page.url }}">
                    <span class="main-menu-link">{{ menu_page.title }}</span>
                  </a>
                  {% with submenu=menu_page.get_children.live.in_menu %}
                    {% if submenu %}
                      <button class="submenu-toggle" type="button" aria-expanded="false" aria-label="Toggle submenu"></button>
                    {% endif %}
                  {% endwith %}
                </div>
                {# Second-level: direct children of each top-level page #}
                {% with submenu=menu_page.get_children.live.in_menu %}
                  {% if submenu %}
                    <span class="menu-divider" aria-hidden="true"></span>
                    <ul class="submenu">
                      {% for subpage in submenu %}
                        <li class="submenu-item">
                          <a href="{{ subpage.url }}">
                            <span class="submenu-item-link">{{ subpage.title }}</span>
                          </a>
                        </li>
                      {% endfor %}
                    </ul>
                  {% endif %}
                {% endwith %}
              </li>
            {% endfor %}
          {% endwith %}
        {% elif current_site %}
          {% with site_root=current_site.root_page %}
            {# Top-level menu: direct children of site root #}
            <li class="menu-item">
              <div class="menu-item-header">
                <a href="#">
                  <span class="main-menu-link">最新文章</span>
                </a>
                {% if nav_latest_page or nav_trending_page %}
                  <button class="submenu-toggle" type="button" aria-expanded="false" aria-label="Toggle submenu"></button>
                {% endif %}
              </div>
              {% if nav_latest_page or nav_trending_page %}
                <span class="menu-divider" aria-hidden="true"></span>
                <ul class="submenu">
                  {% if nav_latest_page %}
                    <li class="submenu-item">
                      <a href="{{ nav_latest_page.url }}">
                        <span class="submenu-item-link">{{ nav_latest_page.title }}</span>
                      </a>
                    </li>
                  {% endif %}
                  {% if nav_trending_page %}
                    <li class="submenu-item">
                      <a href="{{ nav_trending_page.url }}">
                        <span class="submenu-item-link">{{ nav_trending_page.title }}</span>
                      </a>
                    </li>
                  {% endif %}
                </ul>
              {% endif %}
            </li>
            {% for menu_page in site_root.get_children.live.in_menu %}
              <li class="menu-item">
                <div class="menu-item-header">
                  <a href="{{ menu_page.url }}">
                    <span class="main-menu-link">{{ menu_page.title }}</span>
                  </a>
                  {% with submenu=menu_page.get_children.live.in_menu %}
                    {% if submenu %}
                      <button class="submenu-toggle" type="button" aria-expanded="false" aria-label="Toggle submenu"></button>
                    {% endif %}
                  {% endwith %}
                </div>
                {# Second-level: direct children of each top-level page #}
                {% with submenu=menu_page.get_children.live.in_menu %}
                  {% if submenu %}
                    <span class="menu-divider" aria-hidden="true"></span>
                    <ul class="submenu">
                      {% for subpage in submenu %}
                        <li class="submenu-item">
                          <a href="{{ subpage.url }}">
                            <span class="submenu-item-link">{{ subpage.title }}</span>
                          </a>
                        </li>
                      {% endfor %}
                    </ul>
                  {% endif %}
                {% endwith %}
              </li>
            {% endfor %}
          {% endwith %}
        {% endif %}

        {# Optional extra links from settings #}
        {% if settings.base.HeaderSettings.main_links %}
          {% for item in settings.base.HeaderSettings.main_links %}
            <li class="menu-item">
              <div class="menu-item-header">
                <a href="{{ item.value.url }}">
                  <span class="main-menu-link">{{ item.value.label }}</span>
                </a>
              </div>
            </li>
          {% endfor %}
        {% endif %}
      </ul>
    </nav>

    <form class="header-search" action="{% url 'search' %}" method="get" role="search">
      <div class="search-input">
        <button type="submit" class="search-icon" aria-label="搜尋">
          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 4a6 6 0 104.24 10.24l4.76 4.76 1.42-1.42-4.76-4.76A6 6 0 0010 4zm0 2a4 4 0 110 8 4 4 0 010-8z"/></svg>
        </button>
        <input
          type="search"
          name="query"
          placeholder="搜尋文章"
          value="{{ request.GET.query|default:'' }}"
          aria-label="搜尋文章">
      </div>
    </form>

    <button class="menu-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Toggle menu">
      <span class="menu-toggle-bar"></span>
      <span class="menu-toggle-bar"></span>
      <span class="menu-toggle-bar"></span>
    </button>
    </div>
  </div>
</header>