<form action='' id="orderingForm" method="POST" enctype="multipart/form-data">
    {% csrf_token %}    
    <div class="row">
        <div class="d-grid gap-1 col-2 mx-auto" style="margin-right: 0 !important">
            <button type="submit" class="btn btn-guardar" name="guardar" id="saveOrdering">Guardar</button>    
        </div>   
    </div>
    <div class="row">
        <div class="child col-4" style="display: inline-block;">
            <p class="agregarMod" id="titulo-mods"> Titulo de la modalidad </p>
            <input type="hidden" name="modalidad_id" value="{{ modalidad.id }}">
            <p>{{ form.nombre }}</p>
        </div>
        <div class="child col-1" style="display: inline-block; padding: 0 20%; ">
            <p class="agregarMod" id="imagen-mods" style="padding-bottom: 5px;"> Imagen </p>
            {{ form.imagen}}
        </div>
    </div>
    <div class="child" style="">
        <p class="agregarMod" id="descripcion-mods" style="padding-top: 5px; padding-bottom: 5px;"> Descripción </p>
        {{ form.descripcion}}
    </div>

    <div class="row" style="padding-top: 40px; ">
        <p class="agregarMod" id="documento-mods" style="display: inline-block; width:auto"> Documentos </p>
        <div class="d-grid gap-1 col-2 mx-auto" style="margin-right: 0 !important">
            <button id = 'add-more' type="button" class="btn btn-guardar" name="agregar">Agregar</button>    
        </div>   
        <div class="row" id='documentos-list'>
            {% if formset %}
            {{ formset.management_form}}
            {% for documento in formset %}
            <div class="documento-form col-sm-4" style="padding-top: 10px; padding-bottom: 10px;">
                <input type="hidden" id="orderingInput" name="ordering" value="{{ documento.id.value }}">
                <div class="card">
                    <div class="card-body" id="documentoMod">                                       
                        <a href="{% url 'modalidades:AConfigEliminarDocumento' modalidad.id documento.id.value %}" id='delete-document' 
                        type="button" class="btn btnEliminar" onclick="return confirm('¿Está seguro que desea eliminar este documento permanentemente?')">X</a>
                        <p class="card-title">{{ documento.as_p }}</p>
                    </div>
                </div>
            </div>
            {% endfor %}
            <div id='empty-form' class="hidden col-sm-4" style="padding-top: 10px; padding-bottom: 10px;">
                <div class="card">
                    <div class="card-body" id="documentoMod">
                        <button id='cancel-document' type="button" class="btn btnEliminar" onclick="cancel_adding_document('form', this)" >X</button>
                        <p class="card-title">{{ formset.empty_form.as_p }}</p>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</form>