<div class="container py-5 context-main-bg">
    <div class="d-flex justify-content-between align-items-center">
        {ADMIN_BREADCRUMBS}
        <a href="{ROOT_URL}admin/images/upload" class="btn btn-sm btn-primary">Create</a>
    </div>
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
        {LOOP}
            <div class="col">
                <div class="card h-100 shadow-sm context-other-bg">
                    <div class="d-flex justify-content-center align-items-center context-other-bg" style="height: 250px;">
                        <img src="{url}" class="img-fluid p-2" style="max-width: 100%; max-height: 100%; object-fit: contain;">
                    </div>
                    <div class="card-body context-third-bg d-flex flex-column">
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between align-items-center">
                                <div class="">
                                    <a href="{ROOT_URL}admin/images/view?fileLocation={locationSafe}" class="btn btn-sm btn-outline-primary">View</a>
                                    <a href="{url}" class="btn btn-sm btn-outline-primary" target="_blank">Open</a>
                                    <a href="{ROOT_URL}admin/images/rename?fileLocation={locationSafe}" class="btn btn-sm btn-outline-warning">Rename</a>
                                    <a href="{ROOT_URL}admin/images/delete?fileLocation={locationSafe}" class="btn btn-sm btn-outline-danger">Delete</a>
                                </div>
                                <small class="text-muted">{filename}</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {/LOOP}
    </div>
</div>