{% extends "base.html" %} {% load i18n %} {% block content %} <div class="row"> <div class="col"> <h3>{{ subtitle }}</h3> </div> </div> <script> function addForm(button) { var formCount = parseInt(document.getElementById('id_form-TOTAL_FORMS').value); var formCopy = $(document.querySelector('#id_form-0-name')).parent().parent().parent()[0].cloneNode(true); formCopy.querySelectorAll('input').forEach(function(input) { var name = input.name.replace(/form-\d+/g, 'form-' + formCount); var id = 'id_' + name; input.name = name; input.id = id; input.value = ''; }); document.getElementById('formset-container').appendChild(formCopy); document.getElementById('id_form-TOTAL_FORMS').value = formCount + 1; } </script> {% load django_bootstrap5 %} <form role="form" method="post"> {% csrf_token %} {% if form.errors %} <div class="alert alert-danger alert-icon alert-icon-border alert-dismissible" role="alert"> <div class="icon"><span class="mdi mdi-close-circle-o"></span></div> <div class="message"> {% for field, error in form.errors.items %} {{ error }}<br /> {% endfor %} <button class="btn-close" type="button" data-dismiss="alert" aria-label="Close"></button> </div> </div> {% endif %} {{ form.management_form }} <div class="container" id="formset-container"> <div class="row mb-2"> <div class="col"> {% bootstrap_field form.0.type %} </div> </div> <div class="row mb-2"> <div class="col"> {% bootstrap_field form.0.amount %} </div> </div> <div class="row mb-2"> <div class="col"> {% bootstrap_field form.0.custom_id %} </div> </div> <div class="row mb-2"> <div class="col-10"> <span class="fw-bold">{% trans 'Component details' %}</span> </div> <div class="col-2 text-center"> <a href="javascript:void()" onclick="addForm(this);" type="button" class="btn btn-green-admin text-nowrap"> <i class="bi bi-plus"></i> {% trans 'Add component' %} </a> </div> </div> {% for f in form %} <div class="row mb-2"> <div class="col"> {% bootstrap_field f.name %} </div> <div class="col"> {% bootstrap_field f.value %} </div> </div> {% endfor %} </div> <div class="container"> <a class="btn btn-grey" href="{% url 'dashboard:unassigned_devices' %}">{% translate "Cancel" %}</a> <input class="btn btn-green-admin" type="submit" name="submit" value="{% translate 'Save' %}" /> </div> </form> {% endblock %}