{% extends postorius_base_template %}
{% load i18n %}
{% load staticfiles %}
{% load browserid %}
{% load bootstrap_tags %}

{% block subtitle %}
{% trans 'Login' %}
{% endblock %}

{% block main %}

    <div class="page-header">
        <h3>{% trans 'Login with username and password or with Mozilla Persona' %}</h3>
    </div>

    <div class="row">
        <div class="col-md-6">
            <form action="" method="post" class="well form-horizontal">
                {% render_form_horizontal form 4 8 'Log in' %}
            </form>
        </div>
        <div class="col-md-6 text-center persona-login">
            {% browserid_info %}
            <a rel="nofollow" class="browserid-login persona-button" id="browserid" href="#">
                <img src="{% static 'postorius/img/sign_in_blue.png' %}" alt="{% trans 'Login using BrowserID' %}" />
            </a>
            <p>
                {% blocktrans %}
                    Mozilla Persona is an easy way to sign into multiple websites, while still controlling your personal data.
                    For more information see the <a href="http://www.mozilla.org/en-US/persona">Mozilla website</a>.
                {% endblocktrans %}
            </p>
            <noscript>
                <p class="text-error">
                    {% trans 'Mozilla Persona requires the use of JavaScript.' %}
                </p>
            </noscript>
        </div>
    </div>

{% endblock %}

{% block additionaljs %}
    {% browserid_js %}
{% endblock additionaljs %}
