{% extends "base.html" %}
{% load url from future %}
{% load i18n %}
{% load crispy_forms_tags %}


{% block title %}
{% trans 'Login' %} - {{ app_name|title }}
{% endblock %}

{% block content %}

<div id="login">


<h2>Login with your email</h2>
<ul class="social-login inline">
    {% for backend in backends %}
        <li class="{{ backend }}">
        {% if backend == "browserid" %}
            <form method="post"
                  action="{% url 'socialauth_complete' "browserid" %}?next={{ next }}">
                {% csrf_token %}
                <input type="hidden" name="assertion" value="" />
                <a rel="nofollow" id="browserid" href="#" class="disabled"
                   title="Wait for it..."><img
                   src="{{ STATIC_URL }}hyperkitty/img/login/persona-large-disabled.png"
                   alt="Login using Persona" /></a>
            </form>
        {% elif backend == "openid" %}
            <a class="socialaccount_provider openid" title="OpenID" href="#"><img
               src="{{ STATIC_URL }}hyperkitty/img/login/openid.png" alt="OpenID" /></a>
            <form method="post" class="form-inline openid"
                  action="{% url 'socialauth_begin' "openid" %}?next={{ next }}">
                {% csrf_token %}
                <div class="input-append">
                <input type="text" class="input-large" name="openid_identifier"
                       placeholder="OpenID URL" />
                <button type="submit" class="btn">Login with OpenID</button>
                </div>
            </form>
        {% else %}
            <a title="{{ backend|title }}" class="socialaccount_provider {{ backend }}"
               href="{% url 'socialauth_begin' backend=backend %}?next={{ next }}"><img
               src="{{ STATIC_URL }}hyperkitty/img/login/{{ backend }}.png"
               alt="{{ backend|title }}" /></a>
        {% endif %}
        </li>
    {% endfor %}
</ul>


{% if use_internal_auth %}
<h2>Login with username and password</h2>

<form action="{{ request.path }}?next={{ next|urlencode }}"
      method="post" class="form-horizontal">
    {% csrf_token %}
    {{ form|crispy }}
    <div class="control-group">
        <div class="controls">
            <button type="submit" class="btn btn-primary">{% trans "Login" %}</button>
        </div>
    </div>
</form>
{% endif %}


</div>

{% endblock %}

{% block additionaljs %}
<!-- Include BrowserID JavaScript -->
<script src="https://browserid.org/include.js" type="text/javascript"></script>
<!-- Setup click handler that receives BrowserID assertion code and sends POST data -->
<script type="text/javascript">
    $(function() {
        // BrowserID
        $('#browserid').click(function(e) {
            e.preventDefault();
            var self = $(this);

            navigator.id.get(function(assertion) {
                if (assertion) {
                    self.parent('form').find('input[type=hidden]').attr('value', assertion).end().submit();
                } else {
                    alert('Some error occurred');
                }
            });
        }).each(function() {
            var img = $(this).find("img");
            img.attr("src", img.attr("src").replace(/-disabled/, ""));
            $(this).removeClass("disabled")
                   .tooltip("destroy")
                   .removeAttr("title");
        });
        // OpenID
        $('a.openid').click(function(e) {
            e.preventDefault();
            $("form.openid").slideToggle("fast")
                .filter(":visible")
                .find("input[name='openid_identifier']").focus();
        });
    });
</script>
<!-- end browserid stuff -->
<script type="text/javascript">
    var username = document.getElementById('id_username');
    if (username) { username.focus(); }
</script>
{% endblock additionaljs %}