{% extends "core/base.html" %}
{% load foundation %}
{% load i18n %}

{% block title %}{% trans "Unregistered ORCiD" %}{% endblock title %}

{% block css %}
<style>
    .login {
        margin-top: 40px;
        margin-bottom: 40px;
    }
</style>
{% endblock css %}

{% block body %}

    <div class="row">
        <h5>{% trans "Unregistered ORCiD" %}</h5>
        <p>{% trans "The ORCiD you logged in with is not currently linked with an account in our system. You can either register a new account, or login with an existing account to link your ORCiD for future use." %}</p>

        <div class="large-4 columns login">

            <form method="POST" action="{% url 'core_login' %}">
                {% csrf_token %}
                <div class="callout">
                    <div class="row column log-in-form">
                        <h5>{% trans "Login" %}</h5>
                        <label>{% trans "Email" %}
                            <input name="user_name" type="text" placeholder="somebody@example.com">
                        </label>
                        <label>{% trans "Password" %}
                            <input type="password" placeholder="Password" name="user_pass">
                        </label>
                        <input name="orcid_token" type="hidden" value="{{ token.token }}">
                        <p><button type="submit" class="button expanded">{% trans 'Log In' %}</button></p>
                        <p class="text-center"><a href="{% url 'core_get_reset_token' %}">{% trans "Forgot your password?" %}</a></p>
                    </div>
                </div>
            </form>

        </div>

        <div class="large-4 columns login">

                <div class="callout">
                    <div class="row column log-in-form">
                        <h5>{% trans "Register" %}</h5>
                        <br />
                        <a href="{% url 'core_register' %}?token={{ token.token }}" class="button expanded">{% trans "Register" %}</a>
                    </div>
                </div>

        </div>
    </div>

{% endblock body %}