<h2 mat-dialog-title>Ordenamiento de prioridad</h2>
<mat-dialog-content>

    <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
        @for (items of arrItems; track items; let index = $index) {
            <div class="example-box" cdkDrag>
                <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
                <div style="display: flex; align-items: center;">
                    <div style="height: 100px; width: 100px; padding: 8px; display: flex; justify-content: center; align-items: center;">
                        <img [src]="setImage(items)" [alt]="setAlt(items)" style="max-height: 100px; max-width: 100px;">
                    </div>
                    <div>
                        <div style="display: flex; flex-direction: row;">
                            <div style="width: 20px; height: 20px; background-color: #002984; border-radius: 20px; color: #FFFFFF; text-align: center; padding: 2px; margin-right: 4px;">{{ index + 1 }}</div>
                            <div style="color: #002984; font-weight: 500;">{{ items.PROVEEDOR }} ({{ items.NUMERO_PROVEEDOR }})</div>
                        </div>
                        <div>
                            {{ items.DESCRIPCION }}
                        </div>
                    </div>
                </div>
            </div>
        }
    </div>


</mat-dialog-content>
<mat-dialog-actions align="end">
    <button mat-button [mat-dialog-close]="false">Cerrar</button>
    <button mat-button [mat-dialog-close]="true">Aceptar</button>
</mat-dialog-actions>
