<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>mediHopper</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
        
        <link rel="stylesheet" href="/style.css">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCIdrsF-nr-pEoh4T4V1E56WilzwOyD0Js&callback=initMap&libraries=&v=weekly" async></script>

    </head> 
    <!-- AIzaSyCFWLMNFY6YuUNRWphBPMkfXJodkz_oMAA -->

    <body>
        

        <div class="container">

            <nav class="navbar rounded">
            
                    
                                <a class="navbar-brand" href="/">
                                    <img src="/logo.png" width="150px" />
                                </a>
                                <nav class="nav">
                                    <% if (currentUser) { %>
                                        <a class="nav-link headerlink" 
                                            <% if (currentUser.role === 'patient') { %>
                                                href="/user-profile">
                                            <% } %>
                                            <% if (currentUser.role === 'doctor') { %>
                                                href="/doctor-profile">
                                            <% } %>
                                            <% if (currentUser.role === 'admin') { %>
                                                href="/clinic-admin-profile">
                                            <% } %>
                                            Hello, <b><%= currentUser.dispName() %></b>
                                        </a>
                                        <a class="nav-link headerlink" href="/logout">Log out</a>
                                    <% } else { %>
                                        <a class="nav-link headerlink" href="/login">Log in</a>
                                        <a class="nav-link headerlink" href="/signup">Sign up</a>
                                    <% } %>
                                </nav>
                                
                            
              
            </nav>



            <% errors.forEach(function(error) { %>
                <div class="alert alert-danger" role="alert">
                    <%= error %>
                </div>
            <%  })  %>

            <% infos.forEach(function(info) { %>
                <div class="alert alert-info" role="alert">
                    <%= info %>
                </div>
            <%  })  %>
            