{% 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.customer_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 %}