If-then-else conditional in HTML component

Hi all, I need some help.
If I do a html if then else statement in the HTML component it renders as text.

Use case: I would like to show the logged-in username if the user is logged in, and clearly show when a user is not logged-in.

Text I used (source code):

Logged in User: {% if {!loggedInUserFullName!} == null %} NOT LOGGED IN {% else %} {!loggedInUserFullName!} {% endif %} ---  {!currentDate!}


What am I doing wrong?

Adding custom code won’t work in HTML (yet), but you can do this with some Javascript.

Inside the HTMl component add this:
<div id="loggedInStatus">&nbsp;</div>

Then inside the Javascript of the page, add this code, be sure to change the component_4 to the number that represents your HTMl component from above.

TB.render('component_4', function (data) {
    var name = '{loggedInUser.Name}';
    var currentdate = new Date(); 
    var formattedDate = + currentdate.getDate() + "." + (currentdate.getMonth()+1)  + "." + currentdate.getFullYear();

        $('#loggedInStatus').append('<strong>Logged In User: </strong> ' + name + ' --- ' + formattedDate);
    } else {
        $('#loggedInStatus').append('<strong>Not Logged In</strong>');