{% for group,documents in grouped_documents %}
    <p><b>{{group}}</b></p>
    {% for document in documents %}
        {% set documentData = document.document.getAsJsonArray() %}
        <div class="d-flex justify-content-between mb-3">
            <span data-id="{{ documentData.id }}">
                {{documentData.detail}}
                <br>
                <span class="small text-muted">{{documentData.createdAt}}</span>
            </span>
            <div>
                <button class="btn btn-sm btn-custom-primary edit-document" title="Editar detalle" data-id="{{documentData.id}}" data-detail="{{documentData.detail}}" data-order-id="{{document.order_id}}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
                        <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.651-.651l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2L3 10.207V13h2.793L14 4.793 11.207 2zM12 1.207L14.793 4 13.5 5.293 10.707 2.5 12 1.207zM1 13.5V16h2.5l10-10-2.5-2.5-10 10z"/>
                    </svg>
                </button>
                <a type="button" class="btn btn-sm btn-custom-primary open-document" title="Abrir documento" style="grid-column: 2;" href="{{documentData.url}}" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/>
                        <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/>
                    </svg>
                </a>
                <button class="btn btn-sm btn-custom-primary remove-document" title="Eliminar documento" data-id="{{documentData.id}}" data-url="{{path('app_order_document_delete',{'documentId': 'DOCUMENT_ID'})}}" style="grid-column: 2;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
                        <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
                    </svg>
                </button>
            </div>
        </div>
    {% endfor %}
{% else %}
<div class="card card-body no-shippings-card text-bg-light p-3 mt-3 text-center">
        No hay documentos asociados a esta venta.
</div>
{% endfor %}