{% extends "admin/login.html" %}
{% load static %}
{% load sso_tags %}
{% load i18n %}

{% block extrastyle %}
    {{ block.super }}
    {% define_sso_providers as sso_providers %}
    {% for provider in sso_providers %}
        <link rel="stylesheet" href="{{ provider.css_url }}">
    {% endfor %}
{% endblock %}

{% block content %}
    {{ block.super }}
    {% 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;
        }

        .login-btn-area {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 295px;
        }

        .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>
{% endblock content %}