{% extends 'generic/form.html' %}

{% load i18n %}

{% block above_form %}
<h1>{% blocktrans with policy=policy %}Test policy {{ policy }}{% endblocktrans %}</h1>
{% endblock %}

{% block action %}
{% trans 'Test' %}
{% endblock %}

{% block beneath_form %}
<div class="pf-c-form__group pf-m-action" style="display: none;" id="loading">
    <div class="pf-c-form__horizontal-group">
        <span class="pf-c-spinner" role="progressbar" aria-valuetext="Loading...">
            <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>
</div>
{% endblock %}

{% block scripts %}
{{ block.super }}
<script>
document.querySelector("form").addEventListener("submit", (e) => {
    document.getElementById("loading").removeAttribute("style");
});
</script>
{% endblock %}