<%@ taglib uri="http://www.springframework.org/security/tags" prefix="security"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib  prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>


<!-- top bar -->
<section class="topbar">
    <div class="top_bar">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-sm-12">
                    <ul>
                        <li>
                            <a href="tel:+917987379206" title="Call Now">
                                <i class="fa fa-phone"></i> : +91 - 7987 379 206,
                            </a>
                            <a href="tel:+917225021672" title="Call Now">
                                8982 346 936
                            </a>
                                                    
                        </li>
                        <li class="none space">
                            <a href="mailto:customercare@blissmeal.com" title="Mail us">
                                <i class="fa fa-envelope"></i> : customercare@blissmeal.com
                            </a>
                        </li>                            
                        
                        <li>
                            <a href="https://play.google.com/store/apps/details?id=com.mit.blissmeal&hl=en" title="Download Android App" target="_blank">
                                <span class="white">Download App</span>
                                
                                <i class="fa fa-android fa-2x"></i>
                            </a>
                            
                            <a href="javascript:void(0);" title="Download IOS App">
                                <i class="fa fa-apple fa-2x"></i>
                            </a>                            
                        </li>                          
                    </ul>
                </div>
                
                <div class="col-md-4 col-sm-12 none">
                    <ul class="social__icon pull-right">
                        <li><a href="https://www.facebook.com/BlissfulMealIndia" target="_blank" title="Follow on Facebook"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="https://www.youtube.com/channel/UCFSvGejMi2LisuhXzUkVwsA" target="_blank" title="Follow on You Tube"><i class="fa fa-youtube"></i></a></li>
                        <li><a href="https://www.instagram.com/blissful.meal" target="_blank" title="Follow on Instagram"><i class="fa fa-instagram"></i></a></li>
                        <li><a href="https://twitter.com/BlissfulMeal" target="_blank" title="Follow on Twitter"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="https://in.pinterest.com/blissfulmeal/blissful-meal" target="_blank" title="Follow on Pinterest"><i class="fa fa-pinterest"></i></a></li>
                        <li><a href="https://www.linkedin.com/company/blissful-meal" target="_blank" title="Follow on Linkedin"><i class="fa fa-linkedin"></i></a></li>
                        <!-- <li><a href="javascript:void(0);" target="_blank" title="Follow on Flickr"><i class="fa fa-flickr"></i></a></li>  -->
                    </ul>
                </div>                
            </div>
        </div>
    </div>
</section>

<!-- Start Header Area -->
<header class="htc__header bg--orange">
    <!-- Start Mainmenu Area -->
    <div id="sticky-header-with-topbar" class="mainmenu__wrap sticky__header">
        <div class="container">
            <div class="row">
                <div class="col-md-4 col-sm-4">
                    <div class="logo">
                        <a href="https://blissmeal.com">
                            <img src="${pageContext.request.contextPath}/images/logo/BlissMeal-logo.png" alt="BlissMeal-logo" />
                            <h2>Blissful Meal</h2>
                        </a>
                    </div>
                </div>
                <div class="col-md-7 col-sm-8">
                    <security:authorize access="isAuthenticated()">
                        <nav class="main__menu__nav d-none d-lg-block">
                            <ul class="mainmenu">
                                <li><a href="https://blissmeal.com">Home</a></li>
                                <li><a href="${pageContext.request.contextPath}/aboutus">About Us</a></li>
                                <li><a href="${pageContext.request.contextPath}/product/menus">Menu List</a></li>
                                <li><a href="${pageContext.request.contextPath}/blog">Blog</a></li>
                                <li><a href="${pageContext.request.contextPath}/contactus">Contact</a></li>  
                                <li><a href="${pageContext.request.contextPath}/location">Location</a></li>                                
                                <li class="drop">
                                    <a href="javascript:void(0);" title="${pageContext.request.userPrincipal.name}">
                                        <img src="${pageContext.request.contextPath}/images/user.png" alt="${pageContext.request.userPrincipal.name}" />
                                    </a>
                                    <ul class="dropdown__menu">
                                        <li><a href="${pageContext.request.contextPath}/profile"><i class="fa fa-user-circle-o"></i> ${pageContext.request.userPrincipal.name}</a></li>
                                        <li><a href="${pageContext.request.contextPath}/logout"><i class="fa fa-sign-out"></i> logout</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </nav> 
                        <div class="header__right f-right d-flex justify-content-end pull-right">
                            <div class="shopping__cart shopping__cart_login">
                                <a class="minicart-trigger" href="#"><i class="fa fa-shopping-basket"></i></a>
                                <div class="shop__qun shop__qun_login">
                                    <span id="item_count">${fn:length(sessionScope.cartItems)}</span>
                                </div>
                            </div>
                        </div>                                    
                    </security:authorize>                  
                    <security:authorize access="!isAuthenticated()">
                        <nav class="main__menu__nav d-none d-lg-block">
                            <ul class="mainmenu">
                                <li><a href="https://blissmeal.com">Home</a></li>
                                <li><a href="${pageContext.request.contextPath}/aboutus">About Us</a></li>
                                <li><a href="${pageContext.request.contextPath}/product/menus">Menu List</a></li>
                                <li><a href="${pageContext.request.contextPath}/blog">Blog</a></li>
                                <li><a href="${pageContext.request.contextPath}/contactus">Contact</a></li>  
                                <li><a href="${pageContext.request.contextPath}/location">Location</a></li>
                            </ul>
                        </nav>                            
                        <div class="header__right f-right d-flex justify-content-end pull-right basket">
                            <div class="shopping__cart shopping__cart_login">
                                <a class="minicart-trigger" href="#"><i class="fa fa-shopping-basket"></i></a>
                                <div class="shop__qun shop__qun_login">
                                    <span id="item_count">${fn:length(sessionScope.cartItems)}</span>
                                </div>
                            </div>                              
                        </div>
                    </security:authorize>          
                </div>
                
            </div>
            <!-- Mobile Menu -->
            <div class="mobile-menu d-block d-lg-none"></div>
            <!-- Mobile Menu -->
        </div>
    </div>
    <!-- End Mainmenu Area -->
</header>
<!-- End Header Area -->