@foreach($training->getMedia(\App\Models\File::COLLECTION_CERTIFICATE) as $certificate)
<div class="alert alert-info pe-5" onclick="document.location.href='{{ route($routePrefix . '.trainings.certificates.download', ['certificateId' => $certificate->id, 'training' => $training->id]) }}'">
    {{ $certificate->file_name }}

    <div class="position-absolute" style="top: 15px; right: 0;">
        <i class="fas fa-ellipsis-v dropdown-toggle me-3"
           id="page-dropdown-{{ $certificate->id }}"
           data-bs-toggle="dropdown"
           aria-expanded="false"
           onclick="event.stopPropagation()">
        </i>
        <ul class="dropdown-menu" aria-labelledby="page-dropdown-{{ $certificate->id }}">

            <li>
                <a class="dropdown-item" href="{{ route($routePrefix . '.trainings.certificates.download', ['certificateId' => $certificate->id, 'training' => $training->id]) }}">
                    <span>Download</span>
                </a>
            </li>

            <li>
                <button class="dropdown-item" type="button" data-url="{{ route($routePrefix . '.trainings.certificates.destroy', ['training' => $training->id, 'certificateId' => $certificate->id ]) }}"
                        onclick="AppHelper.deleteCertificate(this)">
                    <span>Delete</span>
                </button>
            </li>
        </ul>
    </div>
</div>
{{--<script>
    function deleteCertificate(element) {

        let title = 'Are you sure that you want to delete this certificate?'
        Swal.fire({
            title: title,
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.value) {
                axios({
                    url: $(element).data('url'),
                    method: 'DELETE'
                }).then((response) => {
                    $(element).closest('.alert.alert-info').remove();
                });
            }
        })
    }

</script>--}}
@endforeach