{% load sso_tags %}
{% load show_form %}


{% define_sso_providers as sso_providers %}

<style>
    .login-box {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding-top: 20px;
    }

    .btn-content {
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<div class="login-box">
    <div class="login-btn-area">
        {% for provider in sso_providers %}
            <div class="{{ provider.name }}-login-btn">
                <a class="btn-content" href="{{ provider.login_url }}" role="button">
                    <div class="{{ provider.name }}-btn-logo">
                        <img width="20px" alt="{{ provider.name }} sign-in"
                             src="{{ provider.logo_url }}"/>
                    </div>
                    <div class="{{ provider.name }}-btn-label">{{ provider.text }}</div>
                </a>
            </div>
        {% endfor %}
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(".btn-content").click(function (event) {
        const queryString = window.location.search;
        const urlParams = new URLSearchParams(queryString);
        event.originalEvent.currentTarget.href = event.originalEvent.currentTarget.href + "?next=" + urlParams.get('next');
    });
</script>
