<!doctype html>
<html <?php language_attributes(); ?> class="no-js">
	<head>
		<meta charset="<?php bloginfo('charset'); ?>">
		<title><?php wp_title(''); ?></title>

		<link href="//www.google-analytics.com" rel="dns-prefetch">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- fix for woocommerce remove if not needed
			<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
			<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
			<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
		fix for woocommerce remove if not needed -->

		<?php wp_head(); ?>

		<link rel="preconnect" href="https://fonts.googleapis.com">
		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
		<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">

		<script>
        conditionizr.config({
            assets: '<?php echo get_template_directory_uri(); ?>',
            tests: {}
        });
        </script>

	</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

		<div class="wrapper">

<div id="mobile_nav" uk-offcanvas="flip: true">
	<div class="uk-offcanvas-bar">
		<?php html5blank_nav(); ?>
		<ul>
			<li><a href="<?php echo home_url(); ?>/contact">Contact Us</a></li>
		</ul>
	</div>
</div>

			<header class="header clear" role="banner" uk-sticky="start: 200; animation: uk-animation-slide-top" uk-scrollspy="cls: uk-animation-fade; delay: 300">
				<div class="uk-container uk-container-large">
					<div class="uk-flex uk-flex-middle" uk-grid>

						<div class="uk-width-1-2 uk-width-1-3@m uk-visible@l ">
							<nav class="nav uk-visible@l" role="navigation">
								<?php html5blank_nav(); ?>
							</nav>
						</div>

						<div class="uk-width-1-3">
							<div class="uk-text-center">
								<a href="<?php echo home_url(); ?>">
									<img class="logo" src="<?php echo get_template_directory_uri(); ?>/images/jewelhouse-canada-logo.webp" alt="Logo">
								</a>
							</div>
						</div>

						<div class="uk-width-1-2 uk-width-1-3@m">
							<div class="uk-text-right uk-visible@l uk-flex uk-flex-middle uk-flex-right">
								<nav class="nav uk-visible@l" role="navigation">
									<ul>
										<li>
											<a href="<?php echo home_url(); ?>/contact">Contact Us</a>
										</li>
									</ul>
								</nav>

								<?php
								// Check if the correct password cookie is set
								if ( isset( $_COOKIE['custom_password'] ) && $_COOKIE['custom_password'] === get_field('password_field', 7) ) {
						    ?>
								<a href="<?php echo home_url(); ?>/collections" class=" yellow-btn yellow-blue">Our Jewellery <i class="fa-kit fa-diamond-icon"></i></a>

								<?php
								} else { ?>
									<a href="#" uk-toggle="target: #login" class=" yellow-btn yellow-blue">Login <i class="fa-kit fa-diamond-icon"></i></a>
								<?php }
								?>
								</div>
							</div>

							<a class="uk-float-right uk-hidden@l menu_pointer" href="#mobile_nav" uk-toggle>
								<i class="far fa-bars fa-2x"></i>
							</a>
						</div>
					</div>
				</div>
			</header>


			<div id="login" uk-modal>
		    <div class="uk-modal-dialog white-bg">
		        <div class="blue-bg uk-padding">
		            <h2 class="white small uk-text-center">Register to become a dealer or log into your account</h2>
		        </div>
		        <div class="uk-padding">
		            <div class="uk-child-width-1-2@m uk-grid-large" uk-grid uk-height-match="target: > div > .matchie">
		                <div>
		                    <div class="matchie uk-margin-medium-bottom">
		                        <h3 class="uk-text-center">Already have an account? <br>Login here.</h3>
		                    </div>

		                    <!-- Custom Password Form -->
		                    <form id="passwordForm">
		                        <label for="password_field">Enter Password</label>
		                        <input type="password" id="password_field" name="password_field" required>
		                        <button type="submit" class="uk-button uk-button-primary uk-width-1-1">Sign In</button>
		                        <p id="error-message" style="color:red;display:none;">Incorrect password. Please try again.</p>
		                    </form>

		                </div>

		                <div>
		                    <div class="matchie uk-margin-medium-bottom">
		                        <h3 class="uk-text-center">Need an account? Register here.</h3>
		                    </div>
		                    <?php gravity_form( 2, false, false, false, '', true ); ?>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
