{% load crispy_forms_tags %}

{{ form.media }}
<form hx-post="{% url 'generic:exam_collection_add_author' collection_id %}" hx-target="#add-user" hx-swap="innerHTML" hx-indicator="#add-author-indicator" action="" method="post" enctype="multipart/form-data" id="user-form" class="inline-form">
    {% csrf_token %}

    {{ form|crispy }}
    {% comment %} Use a normal submit so the form data is included in the HTMX request {% endcomment %}
    <button type="submit" class="btn btn-primary">Submit</button>

    <span id="add-author-indicator" class="ms-2" aria-hidden="true">
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
    </span>

</form>

<style>
    /* Hide indicator by default; HTMX will add the `htmx-request` class during requests */
    #add-author-indicator { display: none; }
    #add-author-indicator.htmx-request { display: inline-flex; align-items: center; }
</style>