Django Auth Login Form Not Working - Clicking Button Not Attempt To Submit

Question

Attempting to leverage the Django Authentication System. I cannot get the log in form to attempt a submission.

60 Second Video of Issue

Its like the button is not being clicked

I have added the django.contrib.auth.urls to the root URL Conf, added a created a template with a form to a registration/login.html in templates.

I get the template and form to render, but the form fails to submit, like the button is not being clicked. Not a rejected login, but complete non-action.

The other templates and forms associated with the django.contrib.auth.urls such as password_reset, are working as expected.

Template

{% extends "layouts/base-layout.html" %}
{% load static %}
{% block TITLE %}Login{% endblock TITLE %}

{% block MAIN %}
<!-- Sign In Start -->
    <div class="container-fluid">
        <div class="row h-100 align-items-center justify-content-center"
             style="min-height: 100vh;">
            <div class="col-12 col-sm-8 col-md-6 col-lg-5 col-xl-4">

                    <div class="bg-secondary rounded p-4 p-sm-5 my-4 mx-3">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                                <h3 class="text-primary"><i class="fa fa-user-edit me-2" aria-hidden="true"></i>
                                    <span id="learnosity">Learnosity</span> Support<br/> Engineer Log-In</h3>
                        </div>
                        {% if form.errors %}
                            <div class="message-container">
                                    <div class="alert alert-danger d-flex align-items-center" role="alert">
                                        <i class="fa-solid fa-circle-xmark"></i>                                        
                                        <div>
                                            <p>Invaild Inputs</p>
                                        </div>
                                    </div>
                      </div>
                        {% endif %}
                        {% if next %}
                            <div class="alert alert-danger d-flex align-items-center" role="alert">
                                <i class="fa-solid fa-triangle-exclamation fa-xl"></i>
                                <div>
                                    <p>        You Are Not Allowed To View This Page. Please login.</p>
                                </div>
                            </div>
                        {% endif %}
                        <form action="{% url 'login' %}" method="post">
                            {% csrf_token %}
                            <div id="div_id_username" class="mb-3">
                                <label for="id_username" class="form-label requiredField">Username<span class="asteriskField">*</span> </label>
                                {{form.username}}
                            </div>
                            <div id="div_id_password" class="mb-3">
                                <label for="id_password" class="form-label requiredField">Password<span class="asteriskField">*</span> </label>
                                {{ form.password}}
                            </div>
                            <div class="row ">
                                <div class="d-flex">
                                    <div class="modal-footer">
                                        <input type="button" name="submit" value="Login" class="btn btn btn-success" id="button-id-submit"/>
                                        <a class="btn btn-danger" href="{% url 'password_reset' %}">Forgot Password</a>
                                    </div>
                                </div>

                            </div>
                        </form>

                    </div>

            </div>
        </div>
    </div>
{% endblock MAIN %}

Rendered HTML

<form action="/login/" method="post">
                            <input type="hidden" name="csrfmiddlewaretoken" value="Ved4DrBRmjAZYXQpPRMvVuk2qQYokPyX9EFLszA04b1s6lj8fBBqUzxKyYjZsT7I">
                            <div id="div_id_username" class="mb-3">
                                <label for="id_username" class="form-label requiredField">Username<span class="asteriskField">*</span> </label>
                                <input type="text" name="username" autofocus="" autocapitalize="none" autocomplete="username" maxlength="150" required="" id="id_username">
                            </div>
                            <div id="div_id_password" class="mb-3">
                                <label for="id_password" class="form-label requiredField">Password<span class="asteriskField">*</span> </label>
                                <input type="password" name="password" autocomplete="current-password" required="" id="id_password">
                            </div>
                            <div class="row ">
                                <div class="d-flex">
                                    <div class="modal-footer">
                                        <input type="button" name="submit" value="Login" class="btn btn btn-success" id="button-id-submit">
                                        <a class="btn btn-danger" href="/password_reset/">Forgot Password</a>
                                    </div>
                                </div>

                            </div>
                        </form>

I have tried rendering the form fields as paragraph approach {{ form.as_p }} - in my current attempt, I am rendering each field explicitly.