{% extends 'base.html' %}
{% load i18n static crispy_forms_filters %}
{% block customcss %}
    <style>
        .htmx-indicator{
            opacity:0;
            transition: opacity 500ms ease-in;
        }
        .htmx-request .htmx-indicator{
            opacity:1;
        }
        .htmx-request.htmx-indicator{
            opacity:1;
        }
    </style>
{% endblock customcss %}

{% block content %}
    <div class="container-fluid">
        <h1>{% if object %}{{ _("Update") }}{% else %}{{ _("Create") }}{% endif %}</h1>
        <div class="row mb-3">
            <div class="col-sm-6 col-md-8">

                <form class="form" method="post">
                    {% csrf_token %}
                    {{ form|crispy }}
                    <div class="d-flex justify-content-start">
                        <button class="btn btn-sm btn-success me-2" type="submit"><i class="fa-solid fa-floppy-disk me-1"></i>
                        <!--<i class="bi bi-save"></i> -->
                            {{ _("Save") }}
                        </button>
                        <a href="{{request.META.HTTP_REFERER}}" class="btn btn-sm btn-danger"><i class="fa-solid fa-ban me-1"></i>{% trans "Cancel" %}</a>
                    </div>
                </form>
            </div>
        </div>

    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // First, create the spinner div (or use the existing one)
            const spinner = document.createElement('div');
            spinner.id = 'spinner';
            spinner.className = 'htmx-indicator spinner-border inline-spinner';
            spinner.setAttribute('role', 'status');
            spinner.innerHTML = '<span class="visually-hidden">Loading...</span>';

            // Find the form field you want to place it next to
            // Replace 'id_your_field_name' with the actual ID of your form field
            const targetField = document.getElementById('div_id_id_car_model');

            if (targetField) {
                // Insert the spinner right after the target field
                targetField.parentNode.insertBefore(spinner, targetField.nextSibling);
            }
        });
    </script>
{% endblock %}