{% extends "base.html" %}

{% load i18n %}
{% load account %}

{% block pageTitle %}{% trans "Sign In" %}{% endblock %}

{% block style %}
    <style>
        #login-dialog { max-width: 800px; }
        h1, h4 { text-align: center; }
        @media (min-width: 992px) { #login-local { border-left: 1px solid lightgray; } }
        .list-group-item { font-weight: bold; text-align: center; }
        #signup-button { margin-left: 5px; }
        #forgot-pwd-button { position: absolute; right: 15px; font-size: small; }
    </style>
{% endblock %}

{% block content %}
    <div id="login-dialog" class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h1>{% trans "Sign In" %}</h1>
            </div>
            <div class="panel-body">

                <div class="row">
                    <div id="login-social" class="col-md-6">
                        <h4>{% trans "Sign in using your social account" %}</h4>

                        <p>
                            {% if socialaccount.providers %}
                                <div class="list-group">
                                    {% include "socialaccount/snippets/provider_list.html" with process="login" %}
                                </div>

                                {% include "socialaccount/snippets/login_extra.html" %}
                            {% endif %}
                        </p>
                    </div>
                    <div id="login-local" class="col-md-6">
                        <h4>{% trans "Or your personal local account" %}</h4>

                        <form class="login" method="POST" action="{% url 'account_login' %}">
                            {% include "dcbase/form.html" %}

                            {% if redirect_field_value %}
                                <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}"/>
                            {% endif %}

                            <button id="sign-in-btn" class="btn btn-primary" type="submit">{% trans "Sign In" %}</button>
                            <a id="signup-button" class="btn btn-success" href="{{ signup_url }}">{% trans "Sign Up" %}</a>
                            <a id="forgot-pwd-button" class="" href="{% url 'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
                        </form>
                    </div>

                </div>
            </div>
        </div>
    </div>

{% endblock %}
