{namespace m=Neos\Media\ViewHelpers}
{namespace mediaBrowser=Neos\Media\Browser\ViewHelpers}
{namespace neos=Neos\Neos\ViewHelpers}
<mediaBrowser:paginate queryResult="{assetProxies}" as="paginatedAssetProxies" configuration="{itemsPerPage: 30, maximumNumberOfLinks: 7}">
    <ul class="neos-thumbnails asset-list">
        <f:alias map="{
            'editLabel': '{neos:backend.translate(id: \'edit\', package: \'Neos.Neos\')}',
            'replaceLabel': '{neos:backend.translate(id: \'replace\', package: \'Neos.Media.Browser\')}',
            'editAssetLabel': '{neos:backend.translate(id: \'editAsset\', package: \'Neos.Media.Browser\')}',
            'replaceAssetResourceLabel': '{neos:backend.translate(id: \'replaceAssetResource\', package: \'Neos.Media.Browser\')}',
            'deleteLabel': '{neos:backend.translate(id: \'delete\', package: \'Neos.Neos\')}',
            'deleteAssetLabel': '{neos:backend.translate(id: \'deleteAsset\', package: \'Neos.Media.Browser\')}'
		}">
            <f:for each="{paginatedAssetProxies}" as="assetProxy">
                <li class="asset">
                    <f:if condition="!{activeAssetSource.readOnly}">
                        <f:then>
                            <f:link.action action="edit" class="neos-thumbnail" arguments="{assetSourceIdentifier: activeAssetSource.identifier, assetProxyIdentifier: assetProxy.identifier}" addQueryString="true" data="{asset-identifier: '{assetProxy.identifier}', local-asset-identifier: '{assetProxy.localAssetIdentifier}', asset-source-identifier: '{assetProxy.assetSource.identifier}'}">
                                <div class="neos-img-container draggable-asset {f:if(condition: '{assetProxy.asset.tags -> f:count()} === 0', then: ' neos-media-untagged')}">
                                    <f:if condition="{assetProxy.thumbnailUri}">
                                        <f:then><img src="{assetProxy.thumbnailUri}" alt="" width="250" height="250"/></f:then>
                                        <f:else><img src="{f:uri.resource(path:'Images/dummy-image.svg', package:'Neos.Neos')}" alt="" width="250" height="250"/></f:else>
                                    </f:if>
                                </div>
                            </f:link.action>
                        </f:then>
                        <f:else>
                            <f:link.action action="show" class="neos-thumbnail" arguments="{assetSourceIdentifier: activeAssetSource.identifier, assetProxyIdentifier: assetProxy.identifier}" addQueryString="true" data="{asset-identifier: '{assetProxy.identifier}', local-asset-identifier: '{assetProxy.localAssetIdentifier}', asset-source-identifier: '{assetProxy.assetSource.identifier}'}">
                                <div class="neos-img-container">
                                    <f:if condition="{assetProxy.thumbnailUri}">
                                        <f:then><img src="{assetProxy.thumbnailUri}" alt="" width="250" height="250"/></f:then>
                                        <f:else><img src="{f:uri.resource(path:'Images/dummy-image.svg', package:'Neos.Neos')}" alt="" width="250" height="250"/></f:else>
                                    </f:if>
                                </div>
                            </f:link.action>
                        </f:else>
                    </f:if>
                    <div class="neos-img-label">
                        <m:fileTypeIcon filename="{assetProxy.filename}" height="32"/>
                        <f:if condition="!{activeAssetSource.readOnly}">
                            <div class="neos-dropdown neos-pull-right" id="neos-asset-actionmenu-{assetProxy.identifier}">
                                <a class="dropdown-toggle neos-button" href="#" data-neos-toggle="dropdown" data-target="#neos-asset-actionmenu-{assetProxy.identifier}">
                                    <i class="fas fa-ellipsis-h"></i>
                                </a>
                                <div class="neos-dropdown-menu-list neos-pull-right" role="menu">
                                    <ul>
                                        <li>
                                            <f:link.action action="edit" arguments="{assetSourceIdentifier: activeAssetSource.identifier, assetProxyIdentifier: assetProxy.identifier}" addQueryString="true" title="{editAssetLabel}" data="{neos-toggle: 'tooltip', placement: 'left'}">
                                                <i class="fas fa-edit icon-white"></i> {editLabel}
                                            </f:link.action>
                                        </li>
                                        <f:security.ifAccess privilegeTarget="Neos.Media.Browser:ReplaceAssetResource">
                                            <li>
                                                <f:link.action action="replaceAssetResource" arguments="{asset: assetProxy.asset}" title="{replaceAssetResourceLabel}" addQueryString="true" data="{neos-toggle: 'tooltip', placement: 'left'}">
                                                    <i class="fas fa-random icon-white"></i> {replaceLabel}
                                                </f:link.action>
                                            </li>
                                        </f:security.ifAccess>
                                        <li>
                                            <a href="#" class="neos-media-delete" title="{deleteAssetLabel}"
                                               data-neos-toggle="tooltip" data-placement="left"
                                               data-modal="delete-asset-modal"
                                               data-label="{assetProxy.label -> f:format.crop(maxCharacters: 50)}"
                                               data-object-identifier="{assetProxy.identifier}">
                                                <i class="fas fa-trash icon-white"></i> {deleteLabel}
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </f:if>
                        <span class="neos-caption asset-label" title="{assetProxy.label}" data-neos-toggle="tooltip"><f:format.crop maxCharacters="100">{assetProxy.label}</f:format.crop></span>
                    </div>
                </li>
            </f:for>
        </f:alias>
    </ul>
</mediaBrowser:paginate>