<div id="navbar">
<a href="/">Home</a> &diam;
<a href="/famous/">Famous Dragons</a> &diam;
<a href="/blog/">Blog</a> &diam;
<span id="navwelcome">Greetings, <a href="/login">stranger</a>.</span>
</div>


<script>

$(function() {

    var name = "<%=data.username %>";

    if(name!="") $('#navwelcome').html("Welcome, "+name);

    // var greetNewcomer = "<input type='text'/><button>Tell me your name</button>";

    // const sayYourName = function() {
    //     var visitorName = $('#navwelcome > input').val();
    //         $.ajax({
    //             url: '/welcome',
    //             type: 'POST',
    //             data: {
    //                 'nombre': visitorName
    //             },
    //             success: (data) => {
    //                 if(data=='SUCCESS') $('#navwelcome').html("Welcome, "+visitorName+"!");
    //             }
    //         });
    // }

    // if(name=="") {
    //     $('#navwelcome').html(greetNewcomer);
    //     $('#navwelcome > button').on('click', sayYourName);
    //     $('#navwelcome > input').on('keyup', (key) => {
    //         if(key.keyCode==13) sayYourName();
    //     });
    // }
    // else {
    //     $('#navwelcome').html("Welcome, "+name+"!");
    // }    
});


</script>