<!DOCTYPE html>
<!--- HTML5 -->
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>"/>
        <meta content="width=device-width, initial-scale=1, viewport-fit=cover, shrink-to-fit=no" name="viewport"/>
        <link href="<?php echo get_template_directory_uri(); ?>/icon.png" rel="icon" type="image/png"/>
        <!-- Style Sheets -->
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
        <?php wp_head(); ?>
    </head>
    <body class="overflow-x-hidden <?php echo implode(' ', get_body_class()); ?>">
        <?php if( function_exists( 'wp_body_open' ) ) wp_body_open(); ?>
        <header id="header" class="bg-white shadow-lg w-full z-20">
            <nav class="relative" id="navbar">
                <div class="bg-blue-600 flex justify-end px-4 py-2 space-x-4 text-white lg:pr-32"><a class="flex items-center px-4 space-x-4" href="tel:905-845-2811"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-telephone-fill" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z"/>
                        </svg> <p class="text-sm underline"><?php _e( '905-845-2811', 'leonpharmacy' ); ?></p> </a>
                    <a class="text-sm" href="https://leonpharmacy.erefills.ca/leonpharmacy/centralprofile/signin.php" target="_blank"><?php _e( 'Refill Login', 'leonpharmacy' ); ?></a>
                </div>
                <div class="flex items-center justify-between mx-auto relative lg:items-stretch"><a class="flex h-full items-center p-2 relative skew-x-12 z-30 lg:bg-white lg:left-8 lg:pr-8 lg:py-4 lg:relative" href="<?php echo esc_url( home_url() ); ?>"><img alt="Leon Pharmacy Logo" src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/logo-leon.png" width="170" class="-skew-x-12 hidden lg:block"/><img alt="harplabs logo Logo" src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/logo-leon-icon.png" class="-skew-x-12 lg:hidden" width="50"/></a>
                    <div class="absolute bg-blue-500 flex-1 left-0 overflow-hidden top-full w-full z-20 lg:left-4 lg:relative" id="menu_wrapper">
                        <div class="lg:flex lg:h-full">
                            <ul class="lg:flex lg:items-center lg:justify-end lg:px-16 lg:py-0 lg:space-y-0 mx-auto p-4 space-y-1 text-center w-full xl:pr-16 z-50" id="main_menu">
                                <?php if ( has_nav_menu( 'primary' ) ) : ?>
                                    <?php
                                        PG_Smart_Walker_Nav_Menu::init();
                                        PG_Smart_Walker_Nav_Menu::$options['template'] = '<li class="flex flex-col justify-center relative w-full {CLASSES}" id="{ID}">
                                                                                <a class="font-medium hover:text-blue-100 inline-block main-link min-w-max mx-auto relative text-white uppercase" {ATTRS}>{TITLE}</a>
                                                                                <ul class="capitalize hidden lg:rounded-md list-none md:absolute md:left-0 md:w-max z-50">
                                                                                    <li class="max-w-max mx-auto relative">
                                                                                        <a class="hover:text-yellow-500 inline-block main-link min-w-max mx-auto relative text-white" href="#services">Home</a>
                                                                                    </li>
                                                                                </ul>
                                                                            </li>';
                                        
                                        PG_Smart_Walker_Nav_Menu::$options['template_item_with_sublevel'] = '<li class="flex flex-col justify-center relative w-full {CLASSES}" id="{ID}">
                                                                                <a class="font-medium hover:text-blue-100 inline-block main-link min-w-max mx-auto relative text-white uppercase" {ATTRS}>{TITLE}</a>
                                                                                <ul class="capitalize hidden lg:rounded-md list-none md:absolute md:left-0 md:w-max z-50">{SUB}</ul>
                                                                            </li>';
                                        PG_Smart_Walker_Nav_Menu::$options['template_sublevel'] = '{SUB}';
                                        PG_Smart_Walker_Nav_Menu::$options['template_subitem'] = '<li class="max-w-max mx-auto relative {CLASSES}" id="{ID}">
                                                                                        <a class="hover:text-yellow-500 inline-block main-link min-w-max mx-auto relative text-white" {ATTRS}>{TITLE}</a>
                                                                                    </li>';
                                        
                                        wp_nav_menu( array(
                                            'container' => '',
                                            'theme_location' => 'primary',
                                            'items_wrap' => '<span class="%2$s lg:flex lg:mr-2 lg:space-x-5 lg:space-y-0 space-y-4" id="%1$s">%3$s</span>',
                                            'walker' => new PG_Smart_Walker_Nav_Menu()
                                    ) ); ?>
                                <?php endif; ?>
                            </ul>
                        </div>
                    </div><a onclick="toggleMenu()" class="mr-4 toggle-menu lg:hidden" href="#"> <i></i> <i></i><i></i> </a>
                </div>
            </nav>
        </header>
        <main>