{% extends 'login/base_full.html' %}

{% load static %}
{% load i18n %}

{% block head %}
{{ block.super }}
<script>
"use strict";

let redirecting = false;

async function checkAuth() {
    if (redirecting) {
        console.debug(
            "authentik/policies/buffer: Already authenticating in another tab. This page will refresh once authentication is completed.",
        );

        return true;
    }

    const url = "{{ check_auth_url }}";
    console.debug("authentik/policies/buffer: Checking authentication...");

    return fetch(url, {
        method: "HEAD",
    })
        .then((response) => {
            if (response.status >= 400) {
                return false;
            }

            console.debug("authentik/policies/buffer: Continuing");

            if ("{{ auth_req_method }}" === "post") {
                document.querySelector("form")?.submit();
                return true;
            }

            window.location.assign("{{ continue_url|escapejs }}");

            return true;
        })
        .catch((error) => {
            console.warn("authentik/policies/buffer: Error checking authentication.", error);
            return false;
        })
}

const offset = 20;

let timeoutID = -1;
let timeout = 100;
let attempts = 0;

async function main() {
    window.clearTimeout(timeoutID);

    attempts += 1;

    redirecting = await checkAuth();

    console.debug(`authentik/policies/buffer: Waiting ${timeout}ms...`);

    timeoutID = window.setTimeout(main, timeout);

    timeout += offset * attempts;

    if (timeout >= 2000) {
        timeout = 2000;
    }
}

document.addEventListener("visibilitychange", async () => {
    if (document.hidden) return;

    console.debug("authentik/policies/buffer: Checking authentication on tab activate...");

    redirecting = await checkAuth();
});

main();
</script>
{% endblock %}

{% block title %}
{% trans 'Waiting for authentication...' %} - {{ brand.branding_title }}
{% endblock %}

{% block card_title %}
{% trans 'Waiting for authentication...' %}
{% endblock %}

{% block card %}
<form class="pf-c-form" method="{{ auth_req_method }}" action="{{ continue_url }}">
  {% if auth_req_method == "post" %}
    {% for key, value in auth_req_body.items %}
      <input type="hidden" name="{{ key }}" value="{{ value }}" />
    {% endfor %}
  {% endif %}
  <div class="pf-c-empty-state">
    <div class="pf-c-empty-state__content">
      <div class="pf-c-empty-state__icon">
        <span class="pf-c-spinner pf-m-xl" role="progressbar">
          <span class="pf-c-spinner__clipper"></span>
          <span class="pf-c-spinner__lead-ball"></span>
          <span class="pf-c-spinner__tail-ball"></span>
        </span>
      </div>
      <h1 class="pf-c-title pf-m-lg">
        {% trans "You're already authenticating in another tab. This page will refresh once authentication is completed." %}
      </h1>
    </div>
  </div>
  <div class="pf-c-form__group pf-m-action">
    <a href="{{ auth_req_url }}" class="pf-c-button pf-m-primary pf-m-block">
      {% trans "Authenticate in this tab" %}
    </a>
  </div>
</form>
{% endblock %}