<header>
<!-- Mobile navbar: Simple single row with logo, search, and hamburger -->
<nav class="navbar-site d-block d-lg-none" aria-label="Utility navigation">
    <div class="container">
        <div class="mobile-navbar-row d-flex align-items-center">
            <div class="mobile-logo me-2">
                <a href="/" title="Home">
                    <img src="/images/logo_small.png" alt="IEM" height="30">
                </a>
            </div>
            
            <div class="mobile-search flex-fill me-2">
                <form action="/search" method="GET" role="search">
                    <input name="q" aria-label="Search" title="Search" placeholder="Search 'DSM' 'autoplot 100' 'street address'" type="text" class="form-control form-control-sm">
                </form>
            </div>
            
            <div class="mobile-menu d-flex align-items-center">
                <!-- Utility toggler removed per design: keep only primary-nav toggler -->
                <button type="button" class="navbar-toggler p-1 ms-2" data-bs-toggle="collapse" data-bs-target="#navbar-menu-collapse" aria-controls="navbar-menu-collapse" aria-expanded="false" aria-label="Toggle primary navigation">
                    <span class="navbar-toggler-icon"></span>
                    <span class="visually-hidden">Primary navigation</span>
                </button>
            </div>
        </div>
        <!-- Mobile site links (contact, disclaimer, apps) now unified target -->
        <div class="collapse" id="mobile-nav-collapse">
            <ul class="nav navbar-nav mobile-site-nav" aria-label="Utility navigation links">
                <li class="nav-item"><a class="nav-link" href="/info/contacts.php">contact us</a></li>
                <li class="nav-item"><a class="nav-link" href="/disclaimer.php">disclaimer</a></li>
                <li class="nav-item"><a class="nav-link" href="/apps.php">apps</a></li>
            </ul>
        </div>
    </div>
</nav>

<!-- Desktop navbar: ISU wordmark on left, search and links stacked on right -->
<nav class="navbar-site d-none d-lg-block" aria-label="Utility navigation">
    <div class="container">
        <div class="desktop-navbar-row">
            <div class="desktop-wordmark">
                <a href="/" title="Home" class="wordmark-unit">
                    <span class="wordmark-isu">Iowa State University</span>
                    <span class="wordmark-unit-title">Iowa Environmental Mesonet</span>
                </a>
            </div>
            
            <div class="desktop-right">
                <div class="desktop-search">
                    <form action="/search" method="GET" role="search">
                        <input name="q" aria-label="Search" title="Search" placeholder="Search 'DSM' 'autoplot 100' 'street address'" type="text" class="form-control">
                    </form>
                </div>
                
                <div class="desktop-links">
                    <ul class="nav navbar-nav">
                        <li class="nav-item"><a class="nav-link" href="/info/contacts.php">contact us</a></li>
                        <li class="nav-item"><a class="nav-link" href="/disclaimer.php">disclaimer</a></li>
                        <li class="nav-item"><a class="nav-link" href="/apps.php">apps</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
</header>

<!-- Main navigation menu navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white border-bottom" aria-label="Primary navigation">
    <div class="container">
        <!-- Desktop IEM logo (visible in main nav on desktop) -->
        <div class="d-none d-lg-block">
            <a href="/"><img style="height: 50px;" alt="IEM" class="img-fluid float-start" src="/images/logo_small.png" /></a>
        </div>
        
    <!-- Main navigation menu (collapsible on mobile) -->
    <div class="navbar-collapse collapse" id="navbar-menu-collapse">
<?php
$_pages = json_decode(
    file_get_contents(dirname(__FILE__) . "/../../config/navbar.json"),
    $assoc=TRUE
);
$normalizePath = static function(string $path): string {
    $parsedPath = parse_url($path, PHP_URL_PATH);
    if (is_string($parsedPath) && $parsedPath !== "") {
        $path = $parsedPath;
    }
    if ($path === "") {
        return "/";
    }
    if (!str_starts_with($path, "/")) {
        $path = "/{$path}";
    }
    if ($path !== "/") {
        $path = rtrim($path, "/");
    }
    return $path;
};
$lookfor = $normalizePath((string) ($_SERVER["SCRIPT_URL"] ?? "/"));
$homeLinks = [
    [
        "title" => "Iowa Atmospheric Observatory",
        "url" => "/projects/iao/"
    ],
    [
        "title" => "Iowa Environmental Mesonet",
        "url" => "/"
    ],
    [
        "title" => "CoCoRaHS",
        "url" => "https://cocorahs.org"
    ],
    [
        "title" => "Daily Erosion Project",
        "url" => "https://dailyerosion.org"
    ],
    [
        "title" => "Weather.IM Project",
        "url" => "https://weather.im"
    ],
];
$isActiveNavItem = static function(string $currentPath, array $sub)
    use ($normalizePath): bool {
    if (!array_key_exists("url", $sub)) {
        return FALSE;
    }
    $targetPath = $normalizePath((string) $sub["url"]);
    if ($currentPath === $targetPath) {
        return TRUE;
    }
    if ($targetPath !== "/" &&
        str_starts_with($currentPath, "{$targetPath}/")) {
        return TRUE;
    }
    return FALSE;
};
$renderDropdownItems = static function(array $dropdownItems, string $currentPath,
    callable $isActiveNavItem): string {
    $items = "";
    foreach ($dropdownItems as $sub) {
        $type = $sub["type"] ?? "link";
        if ($type === "divider") {
            $items .= "<li><hr class=\"dropdown-divider\"></li>\n";
            continue;
        }
        if ($type === "header") {
            $items .= sprintf(
                "<li><h6 class=\"dropdown-header\">%s</h6></li>\n",
                htmlspecialchars($sub["title"] ?? "", ENT_QUOTES)
            );
            continue;
        }
        $isActive = $isActiveNavItem($currentPath, $sub);
        $items .= sprintf(
            "<li><a class=\"dropdown-item%s\" href=\"%s\">%s</a></li>\n",
            $isActive ? " active" : "",
            htmlspecialchars($sub["url"], ENT_QUOTES),
            htmlspecialchars($sub["title"], ENT_QUOTES)
        );
    }
    return $items;
};
?>
            <div class="d-none d-lg-block">
                <ul class="nav navbar-nav">
                    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
                        href="#" aria-label="Home resources menu"> <i class="bi bi-house-fill" aria-hidden="true"></i><span class="visually-hidden">Home resources</span> </a>
                        <ul class="dropdown-menu">
<?php
foreach ($homeLinks as $link) {
    echo sprintf(
        "<li><a class=\"dropdown-item\" href=\"%s\">%s</a></li>\n",
        htmlspecialchars($link["url"], ENT_QUOTES),
        htmlspecialchars($link["title"], ENT_QUOTES)
    );
}
?>
                        </ul>
                    </li>
<?php
foreach ($_pages["tabs"] as $tabIndex => $tab) {
    $hit = FALSE;
    foreach ($tab["subs"] as $sub) {
        if ($isActiveNavItem($lookfor, $sub)) {
            $hit = TRUE;
            break;
        }
    }
    $tabTitle = htmlspecialchars($tab["title"], ENT_QUOTES);
    $tabIcon = $tab["icon"] ?? NULL;
    $tabLabel = $tabTitle;
    if (is_string($tabIcon) && $tabIcon !== "") {
        $tabLabel = sprintf(
            "<i class=\"%s me-1\" aria-hidden=\"true\"></i><span>%s</span>",
            htmlspecialchars($tabIcon, ENT_QUOTES),
            $tabTitle
        );
    }
    echo sprintf(
        "<li class=\"nav-item dropdown%s\"><a class=\"nav-link dropdown-toggle\" ".
        "data-bs-toggle=\"dropdown\" href=\"#\">%s</a><ul class=\"dropdown-menu\">",
        $hit ? " active" : "",
        $tabLabel
    );
    echo $renderDropdownItems($tab["subs"], $lookfor, $isActiveNavItem);
    echo "</ul></li>\n";
}
?>
                </ul>
            </div>
            <div class="d-lg-none py-2">
                <div class="accordion" id="mobile-primary-nav-accordion">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="mobile-nav-home-heading">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#mobile-nav-home-collapse" aria-expanded="false"
                                aria-controls="mobile-nav-home-collapse">Home</button>
                        </h2>
                        <div id="mobile-nav-home-collapse" class="accordion-collapse collapse"
                            aria-labelledby="mobile-nav-home-heading" data-bs-parent="#mobile-primary-nav-accordion">
                            <div class="accordion-body py-2">
<?php
foreach ($homeLinks as $link) {
    echo sprintf(
        "<a class=\"d-block py-1 text-decoration-none\" href=\"%s\">%s</a>\n",
        htmlspecialchars($link["url"], ENT_QUOTES),
        htmlspecialchars($link["title"], ENT_QUOTES)
    );
}
?>
                            </div>
                        </div>
                    </div>
<?php
foreach ($_pages["tabs"] as $tabIndex => $tab) {
    $tabId = sprintf("mobile-nav-tab-%s", (int) $tabIndex);
    $headingId = "{$tabId}-heading";
    $collapseId = "{$tabId}-collapse";
    $tabTitle = htmlspecialchars($tab["title"], ENT_QUOTES);
    $tabIcon = $tab["icon"] ?? NULL;
    $buttonLabel = $tabTitle;
    if (is_string($tabIcon) && $tabIcon !== "") {
        $buttonLabel = sprintf(
            "<i class=\"%s me-1\" aria-hidden=\"true\"></i><span>%s</span>",
            htmlspecialchars($tabIcon, ENT_QUOTES),
            $tabTitle
        );
    }
    echo sprintf(
        "<div class=\"accordion-item\"><h2 class=\"accordion-header\" id=\"%s\">".
        "<button class=\"accordion-button collapsed\" type=\"button\" ".
        "data-bs-toggle=\"collapse\" data-bs-target=\"#%s\" aria-expanded=\"false\" ".
        "aria-controls=\"%s\">%s</button></h2>".
        "<div id=\"%s\" class=\"accordion-collapse collapse\" aria-labelledby=\"%s\" ".
        "data-bs-parent=\"#mobile-primary-nav-accordion\"><div class=\"accordion-body py-2\">",
        $headingId,
        $collapseId,
        $collapseId,
        $buttonLabel,
        $collapseId,
        $headingId
    );
    foreach ($tab["subs"] as $sub) {
        $type = $sub["type"] ?? "link";
        if ($type === "divider") {
            echo "<hr class=\"my-2\">";
            continue;
        }
        if ($type === "header") {
            echo sprintf(
                "<div class=\"text-muted text-uppercase small fw-semibold mt-1\">%s</div>",
                htmlspecialchars($sub["title"] ?? "", ENT_QUOTES)
            );
            continue;
        }
        $activeClass = $isActiveNavItem($lookfor, $sub)
            ? " fw-semibold text-primary" : "";
        echo sprintf(
            "<a class=\"d-block py-1 text-decoration-none%s\" href=\"%s\">%s</a>\n",
            $activeClass,
            htmlspecialchars($sub["url"], ENT_QUOTES),
            htmlspecialchars($sub["title"], ENT_QUOTES)
        );
    }
    echo "</div></div></div>\n";
}
?>
                </div>
            </div>
        </div>
    </div>
</nav>
