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

{% browserid_info %}
<div id="container">
    <p><strong>{% trans "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 "Log in" %}</button>
      </div>
    </form>

  </div>
  <div class="mm_login_b">
    <a rel="nofollow" id="browserid" href="#">
      <img src="{% static 'postorius/img/sign_in_blue.png' %}"
           alt="{% trans 'Login using BrowserID' %}" />
    </a>
    <p>{% trans "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">
        {% trans "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>
<script src="{% static 'browserid/api.js' %}" type="text/javascript"></script>
<script src="{% static 'browserid/browserid.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) {
        django_browserid.login().then(function(verifyResult) {
          window.location = verifyResult.redirect;
        }, function(jqXHR) {
          window.alert('There was an error logging in, please try again.');
        });
      });
    });
</script>
<!-- end browserid stuff -->
{% endblock additionaljs %}