<nav class="navbar mb-4 has-background-white-ter" aria-label="main navigation">
    <div class="navbar-brand">
        <a class="navbar-item" href="/">
            <h3 class="title is-3">storage-app</h3>
        </a>
        <button class="navbar-burger" aria-label="menu" aria-expanded="false">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </button>
    </div>
    <div class="navbar-start">

    </div>
    <div class="navbar-end">
        {{#if user}} <!-- TODO: only show w/ route is library/files --> 
        <div class="navbar-item" style="width:300px">
            <div class="field" style="width:100%" >
                <p class="control has-icons-left">
                    <input class="input is-small" type="search" placeholder="Search files (CTRL + K)"></input>
                    <span class="icon is-small is-left">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </span>
                </p>
            </div>
        </div>
        {{/if}}
        {{#if user}}
        <div class="navbar-item">
            <a class="icon  has-text-black">
                <i class="far fa-bell"></i>
                <span class="ml-2" >0</span>
            </a>
            
        </div>
        <div class="navbar-item has-dropdown is-hoverable">
            <a class="navbar-link">
                <img src="/static/img/default_user.png" alt="User Image" />
                {{ debug user }}
            </a>
        
            <div class="navbar-dropdown">
                <div class="dropdown-content">
                    <div class="block px-4 py-4">
                        <b>Quota</b>
                        <progress class="progress" min=0 value=20 max=100 />
                    </div>

                    <a class="navbar-item" href="/help/about">
                        About
                    </a>
                    <a class="navbar-item">
                        Contact
                    </a>
                    <hr class="navbar-divider">
                    <a class="navbar-item">
                        Report an issue
                    </a>
                </div>
     
            </div>
        </div>
        {{/if}}
    </div>
</nav>