<nav class="navbar navbar-expand-lg navbar-dark bg-dark pb-md-2 sticky-top">
    <div class="container p-2 ">
        <a class="navbar-brand" href="/">Zocalos Express OBS MasTV 
            <span class="badge badge-primary"><%= APPID %></span>
        </a>
        <a>
            <div id="MyClockDisplay" class="navbar-text" onload="showTime()"></div>
        </a>
        

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        

        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">Zocalos</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/new-entry">Agregar Zocalos</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/about">About</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<script>

//incluimos un reloj digital
function showTime(){
    var date = new Date();
    var h = date.getHours(); // 0 - 23
    var m = date.getMinutes(); // 0 - 59
    var s = date.getSeconds(); // 0 - 59
    var session = "AM";
    
    if(h == 0){
        h = 12;
    }
    
    if(h > 12){
        h = h - 12;
        session = "PM";
    }
    
    h = (h < 10) ? "0" + h : h;
    m = (m < 10) ? "0" + m : m;
    s = (s < 10) ? "0" + s : s;
    
    var time = h + ":" + m + ":" + s + " " + session;
    document.getElementById("MyClockDisplay").innerText = time;
    document.getElementById("MyClockDisplay").textContent = time;
    
    setTimeout(showTime, 1000);
    
}

showTime();

</script>