{% extends "oscar/checkout/layout.html" %}

{% load i18n %}
{% load widget_tweaks %}

{% block title %}
    {% trans "Checkout gateway" %} | {{ block.super }}
{% endblock %}

{% block checkout_nav %}
    {% include 'oscar/checkout/nav.html' with step=0 %}
{% endblock %}

{% block checkout_title %}{% trans "Who are you?" %}{% endblock %}

{% block content %}

    <form method="post" class="card card-body bg-light">
        {% csrf_token %}
        {{ form.non_field_errors }}

        {% include "oscar/partials/form_field.html" with field=form.username %}

        <div class="form-group">
            <div class="controls">
                <div class="radio">
                    {{ form.options.0 }}
                </div>
            </div>
        </div>

        <div class="form-group {% if form.password.errors %}error{% endif %}">
            {{ form.options.errors }}
            <div class="controls">
                <div class="radio">
                    {{ form.options.2 }}
                    <div class="form-inline">
                        {% render_field form.password class+="form-control mr-sm-2" %}
                        <small><a href="{% url 'password-reset' %}" tabindex="-1">{% trans "Get a password reminder" %}</a></small>
                        {% for error in form.password.errors %}
                            <span class="error-block">{{ error }}</span>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="controls">
                <div class="radio">
                    {{ form.options.1 }}
                </div>
            </div>
        </div>

        <div class="form-group">
            <div class="row">
                <div class="col-sm-3">
                    <button type="submit" class="btn btn-lg btn-block btn-primary" data-loading-text="{% trans 'Continuing...' %}">{% trans "Continue" %}</button>
                </div>
            </div>
        </div>
    </form>

{% endblock content %}

{% block onbodyload %}
    {{ block.super }}
    oscar.checkout.gateway.init();
{% endblock %}
