{% extends "account/base.html" %}

{% load i18n %}

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

{% block inner %}
    <div class="auth-challenge-heading">
        <span class="auth-challenge-icon auth-social-icon" aria-hidden="true"><i class="fas fa-building"></i></span>
        <div>
            <span class="auth-challenge-eyebrow">{% trans "Organization sign-in" %}</span>
            {% if process == "connect" %}
                <h1>{% blocktrans with provider.name as provider %}Connect {{ provider }}{% endblocktrans %}</h1>
                <p>{% blocktrans with provider.name as provider %}Authorize {{ provider }} as another way to access your Ghostwriter account.{% endblocktrans %}</p>
            {% else %}
                <h1>{% blocktrans with provider.name as provider %}Continue with {{ provider }}{% endblocktrans %}</h1>
                <p>{% blocktrans with provider.name as provider %}You will authenticate with your {{ provider }} account before returning to Ghostwriter.{% endblocktrans %}</p>
            {% endif %}
        </div>
    </div>

    {% if process == "connect" %}
        <div class="auth-journey-status">
            <i class="fas fa-link" aria-hidden="true"></i>
            <p>{% trans "The linked account can be removed later from Account Connections." %}</p>
        </div>
    {% else %}
        <div class="auth-journey-status">
            <i class="fas fa-shield-alt" aria-hidden="true"></i>
            <p>{% trans "Ghostwriter will only receive the account information your organization has approved." %}</p>
        </div>
    {% endif %}

    <form class="auth-journey-form" method="post">
        {% csrf_token %}
        <div class="auth-journey-actions">
            <a class="btn btn-outline-secondary" href="{% url 'account_login' %}">{% trans "Cancel" %}</a>
            <button class="btn btn-primary auth-challenge-submit" type="submit">
                <i class="fas fa-arrow-right" aria-hidden="true"></i> {% trans "Continue" %}
            </button>
        </div>
    </form>
{% endblock inner %}