<div class="top-header d-none d-md-block">
    <div class="container-xxl">
        <div class="row g-1">
            <div class="col-md-5">
                <i class="bi bi-heart me-1"></i><small style="font-size:12px;">Experience Kisoro’s Best Kept Secret in Hospitality</small>
            </div>
            <div class="col-md-3"> &nbsp;
            </div>
            <div class="col-md-4">
                <nav class="topmenu">
                <?php
                    $menu = wp_nav_menu(array(
                        'theme_location' => 'top-menu',
                        'container' => false,
                        'menu_class' => '',
                        'fallback_cb' => '__return_false',
                        'items_wrap' => '<ul id="%1$s" class=" ms-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
                        'depth' => 2,
                        'walker' => new bootstrap_5_wp_nav_menu_walker()
                    ));
                ?>
                </nav>
            </div>
        </div>
    </div>
</div>
<div class="menu-section">
    <div class="container-xxl">
        <div class="row g-2">
            <div class="col-lg-7 col-md-8 col-3 align-self-center">
                <nav class="navbar main-menu navbar-expand-lg">
                    <div class="container-fluid">
                    <button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
                        <i class="bi bi-list"></i>
                    </button>
                    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
                    <div class="offcanvas-header">
                        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">MENU</h5>
                        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body">
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <?php
                                $menu = wp_nav_menu(array(
                                    'theme_location' => 'primary',
                                    'container' => false,
                                    'menu_class' => '',
                                    'fallback_cb' => '__return_false',
                                    'items_wrap' => '<ul id="%1$s" class="navbar-nav ms-left mb-2 mb-md-0 %2$s">%3$s</ul>',
                                    'depth' => 2,
                                    'walker' => new bootstrap_5_wp_nav_menu_walker()
                                ));
                            ?>
                        </div>
                    </div>
                    </div>
                    </div>
                </nav>
            </div><!-- menu !-->
            <div class="col-lg-5 col-md-4 col-9 align-self-center">
                <div class="row">
                    <div class="col-md-12">
                        <div class="d-flex bd-highlight">
                            <div class="bd-highlight p-1 flex-grow-1">
                                <?php
                                    $custom_logo_id = get_theme_mod('custom_logo');
                                    $logo_url = wp_get_attachment_image_src($custom_logo_id, 'full');
                                    if ($logo_url) {
                                        echo '<a href="' . esc_url(home_url('/')) . '" class="ps-3"><img src="' . esc_url($logo_url[0]) . '" class="img-fluid logo" alt="' . get_bloginfo('name') . '"></a>';
                                    } else {
                                        echo '<a href="' . esc_url(home_url('/')) . '"><h1>' . get_bloginfo('name') . '</h1></a>';
                                    }
                                ?>
                            </div>
                            <div class="bd-highlight search me-2 align-self-center d-none d-md-block"> 
                                <button type="button" class="btn p-1" data-bs-toggle="modal" data-bs-target="#searchModal">
                                    <i class="bi bi-search"></i>
                                </button>
                            </div>
                            <div class="bd-highlight p-1 header-number align-self-center d-none d-md-block">
                                Reservations <Br/>
                                <span>Tel: +256 762 145 998 </span>
                            </div>
                            <div class="bd-highlight p-1 align-self-center">
                                <a href="<?= home_url('/hotel-room-booking'); ?>" class="header-btn"><i aria-hidden="true" class="fas fa-comment"></i> Book Now</a>
                            </div>
                        </div>
                    </div>
                </div>
                
            </div><!-- logo & btns!-->
            
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade modal-search" id="searchModal" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg bg-transparent">
    <div class="modal-content bg-transparent border-0">
      <div class="modal-body bg-transparent">
        <form method="post" action="">
            <div class="input-group">
                <input id="ajax-search" class="form-control bg-tranparent rounded-0" type="search" placeholder="Search Website here..." aria-label="Search">
                <button id="search-button" class="btn btn-search rounded-0" type="submit">Search</button>
            </div>
        </form>
        <div id="search-results"></div>
      </div>
    </div>
  </div>
</div>