<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>Frog Login</title>
        <link rel="stylesheet" href="{{MEDIA_URL}}frog/c/style.css">
    </head>
    <body>
        <div role="main">
            <div id='frog_login'>
                <header> Frog login</header>
                <section>
                    <form method='post' action='/frog/login'>
                        {% csrf_token %}
                        <p>
                            <label for='frog_login_email'>Username:</label>
                            <input id='frog_login_email' type='text' name='email' autofocus='autofocus' required='required' />
                        </p>
                        <p>
                            <label for='frog_login_first_name'>Password:</label>
                            <input id='frog_login_first_name' type='password' name='password' required='required' />
                        </p>
                        <p>
                            <input id='frog_login_button' type='submit' value='Login' class='disabled1' />
                        </p>
                    </form>
                    {% if message %}
                    <div id='msg-div' style='position: relative; top: -8px;'>
                        <div class='msg alert-danger'>{{message}}</div>
                    </div>
                    {% endif %}
                </section>
            </div>
        </div>
    </body>
</html>