{% extends "base.html" %}
{% load compress staticfiles %}

{% block content %}
<div class="row">
    <div class="col-sm-6 col-sm-offset-3">
        <div class="hc-dialog">
            {% if bad_link %}
            <h1>Incorrect Login Link</h1>
            <div class="dialog-body">
                <p>The login link you just used is either incorrect or expired.</p>
                <p>Please use the form below to request a fresh login link:</p>
            </div>
            {% else %}
            <h1>Health Checks</h1>
            <div class="dialog-body">
                <p>
                    Please enter your email address.
                    Next, we'll send you an email with log-in instructions!
                </p>
            </div>
            {% endif %}

            {% if bad_credentials %}
            <p class="alert alert-danger">Incorrect email or password.</p>
            {% endif %}

            <form method="post">
                {% csrf_token %}

                <div class="form-group">
                    <div class="input-group input-group-lg">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-user"></span>
                        </div>
                        <input
                            type="text"
                            class="form-control"
                            id="id_email"
                            name="email"
                            value="{{ form.email.value|default:"" }}"
                            placeholder="Email">
                    </div>
                </div>

                {% if not bad_credentials %}
                <div class="checkbox" id="password-toggle">
                    <label>
                        <input type="checkbox"> I want to use a password
                    </label>
                </div>
                {% endif %}


                <div id="password-block" class="form-group {% if not bad_credentials %} hide {% endif %}">
                    <div class="input-group input-group-lg">
                        <div class="input-group-addon">
                            <span class="glyphicon glyphicon-lock"></span>
                        </div>
                        <input
                            type="password"
                            class="form-control"
                            name="password"
                            placeholder="password">
                    </div>
                </div>

                <div class="clearfix">
                    <button type="submit" class="btn btn-lg btn-primary pull-right">
                        Log In
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{% compress js %}
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/login.js' %}"></script>
{% endcompress %}
{% endblock %}