{% extends 'index.html' %}
 {% load static %}


 {% block content %}
     <form id="form-container" method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        {{form.as_p}}
        {{formset.management_form}}
        {% for photo in formset %}
        <div class="image-form">
            {{photo.image}} {{photo.main_image}} 
        </div>
        {% endfor %}
        
        <button id="add-form" type="button">Dodaj kolejne zdjęcie</button> <button id="delete-form" type="button">Usuń pole</button> 
        <div> <button style="background-color:black; color:white" class="btn btn-outline-info" type="submit">Create Offer </button></div>
    </form>
<script>
        let imageForm = document.querySelectorAll(".image-form")
        let container = document.querySelector("#form-container")
        let addButton = document.querySelector("#add-form")
        let deleteButton = document.querySelector("#delete-form")
        let totalForms = document.querySelector("#id_form-TOTAL_FORMS")

        let formNum = imageForm .length-1
        addButton.addEventListener('click', addForm)
        deleteButton.addEventListener('click', removeForm)
        
        function addForm(e){
            e.preventDefault()

            let newForm = imageForm[0].cloneNode(true)
            let formRegex = RegExp(`form-(\\d){1}-`,'g')

            formNum++
            newForm.innerHTML = newForm.innerHTML.replace(formRegex, `form-${formNum}-`)
            container.insertBefore(newForm, addButton)
            
            totalForms.setAttribute('value', `${formNum+1}`)
        }
  
    </script>
 {% endblock content %}