{% extends postorius_base_template %}
{% load url from future %}
{% load i18n %}
{% load staticfiles %}
{% block main %}

<div id="container">
    <p><strong>Login with username and password or with Mozilla Persona</strong></p>

  <div class="mm_login">
    <form action="" method="post" class="login mm_clear well"> {% csrf_token %}
      {{ form.as_p }}
      <div class="field">
	<button class="btn btn-primary" type="submit">{% trans "Login" %}</button>
      </div>
    </form>
  </div>  
  
  <div class="mm_login_b">  
    <form method="post" action="{% url 'socialauth_complete' "browserid" %}"> {% csrf_token %}
      <input type="hidden" name="assertion" value="" />
      <a rel="nofollow" id="browserid" href="#"><img src="{% static 'postorius/img/sign_in_blue.png' %}" alt="Login using BrowserID" /></a>
    </form>
    <p>Mozilla Persona is an easy way to sign into multiple websites, while
still controlling your personal data. For more information <a
href="http://www.mozilla.org/en-US/persona">see the mozilla website</a>.</p>
    <noscript><p class="text-error">Mozilla Persona requires the use of
JavaScript.</p></noscript>
  </div>
<div style="clear:both">
</div>
</div>
{% endblock %}

{% block additionaljs %}
<!-- Include BrowserID JavaScript -->
<script src="https://login.persona.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').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();
                } 
            });
        });
    });
</script>
<!-- end browserid stuff -->
{% endblock additionaljs %}
