<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css">
    </head>
    <body>
        <div class="pure-g">
            <div class="pure-u-1-3"></div>
            <div class="pure-u-1-3">
                {% if not username %}
                <h1>Log In</h1>
                <form class="pure-form pure-form-stacked" method="POST">
                    <fieldset>
                        <div class="pure-control-group">
                            <label for="username">Username</label>
                            <input name="username" id="username" type="text">
                        </div>
                        <div class="pure-controls">
                            <label for="remember_me" class="pure-checkbox">
                                <input name="remember_me" id="remember_me" type="checkbox"> Remember me
                            </label>
                            <button name="login" type="submit" class="pure-button pure-button-primary">Log In</button>
                        </div>
                    </fieldset>
                </form>
                {% else %}
                <h1>Welcome, {{ username }}!</h1>
                <form class="pure-form pure-form-stacked" method="POST">
                    <fieldset>
                        <div class="pure-controls">
                            <button name="logout" type="submit" class="pure-button pure-button-primary">Log Out</button>
                        </div>
                    </fieldset>
                </form>
                <p>Try "stealing" the <i>session</i> and/or <i>remember_token</i> cookies to another computer (different IP address) or another browser (different user agent).</p>
                {% endif %}
            </div>
            <div class="pure-u-1-3"></div>
        </div>
    </body>
</html>
