#{extends 'Secure/layout.html' /}

<div id="login">

        <h1>&{'secure.title'}</h1>

        #{form @authenticate()}

                #{if flash.error}
                        <p class="error">
                                &{flash.error}
                        </p>
                #{/if}
                #{if flash.success}
                        <p class="success">
                                &{flash.success}
                        </p>
                #{/if}

                <p id="username-field">
                        <label for="username">&{'secure.username'}</label>
                        <input type="text" name="username" id="username" value="${flash.username}" />
                </p>
                <p id="password-field">
                        <label for="password">&{'secure.password'}</label>
                        <input type="password" name="password" id="password" value="" />
                </p>
                <p id="remember-field">
                        <input type="checkbox" name="remember" id="remember" value="true" ${flash.remember ? 'checked="true"' : ''} />
                        <label for="remember">&{'secure.remember'}</label>
                </p>
                <p id="signin-field">
                        <input type="submit" id="signin" value="&{'secure.signin'}" />
                </p>
        #{/form}
</div>

<div style="border: 2px solid #ff0000; padding: 5px;">
<h3>Important!</h3>
    You can log in as the following users - no password is required.
    <ul>
        <li>steve</li>
        <li>greet</li>
        <li>ansje</li>
        <li>christophe</li>
    </ul>
    <div>There is no error checking, so if you type the login name incorrectly then expect bad things to happen!</div>
</div>