<!DOCTYPE html>
<html>

<head>
    <title>Html Template Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
    <style>
        html, body {
            height: 100%;
        }
    </style>
</head>
<body >
    <div class="container d-flex flex-column h-100">
        <div class="d-flex flex-wrap justify-content-center py-3 m-4 border-bottom">
            <a href="https://www.b4x.com/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
                <img class="rounded-circle" src="https://www.b4x.com/android/forum/favicon-32x32.png" alt="logo" style="width:32px;margin-left: 20px;">
                <span class="fs-4 ms-3">Html Template Example</span>
            </a>
            <ul class="nav nav-pills">
		{% for menu in menus %}
                <li class="nav-item"><a href={{menu.href}} class="nav-link {{ menu.active }}">{{menu.item}}</a></li>
		{% endfor %}
{%if isLogin %}
           <li class="nav-item "><a href="/logout" class="nav-link active"">LOGOUT</a></li>   
{% else %}
 	   <li class="nav-item "><a href="/login" class="nav-link active">LOGIN</a></li>	
{% endif %}
            </ul>
        </div>