<div id="user_login">
    <span>{{user_name}}</span>
    <button class="btn" type="button" id="login_button" name="login" onclick="UI.users.toggleLogin()">
    Sign in
    </button>
    <button class="btn" type="button" id="logout_button" name="logout" onclick="UI.users.logout()">
    Sign out
    </button>
    <div class="form-popup" id="login_popup">
        <div class="login_content">
        <!–Cancel Button–>
            <div class="close-btn" onclick="UI.users.toggleLogin()">
            ×</div>
        <!–Login Form–>
            <h1>Sign in</h1>
            <form name="signup_form" action="/login" method="POST">
            <div class="input-field"><input id='username' name='username' placeholder="Username" class="validate"></div>
            <div class="input-field"><input type="password" id='password' name='password' placeholder="Password" class="validate"></div>
            <button class="btn" onclick="UI.users.validate_input({username, email, password})">Sign in</button>
             </form>

            <p>Don’t have an account? <a href="/signup">Sign Up</a></p>
        <!–Pop-up Button–>
        </div>
    </div>
</div>
