{% extends '@TigrisBase/layout.html.twig' %}

{% block title %}{{ 'menu.my_identifications'|trans|parse_icons }}{% endblock %}
{% block main %}
<h1>{{ 'menu.my_identifications'|trans|parse_icons }}</h1>

<tigris-data-list route="app_identification_data" :init-filters="{}" v-slot="{entities, filters, countPerPage, order, loading, loadData, sort, begin, end, totalCount, pageCount}">
    <div class="d-flex align-items-center justify-content-between">
        <pagination></pagination>
        <div>
            <em>{{ 'data_count'|trans({'%begin%':'${begin}', '%end%':'${end}', '%total%':'${totalCount}'}) }}</em>
        </div>

    </div>
    <div>
        <div class="media-list">
            <div v-for="entity in entities" :key="entity.id" class="d-flex flex-column justify-content-center">
                <button-action v-on:formsaved="loadData()" dialog-component="MediaViewer" class="media-list-item" :dialog-component-props="{mediaId:entity.media.id, albumId: entity.id}" :modal="true" modal-size="full" :class="{ loading: loading}">
                    <div class="file-preview">
                        <img :src="entity.media.thumbnailWebPath">
                    </div>
                </button-action>
                <button-action class="album-name" route="app_album_show" :route-params="{id: entity.media.albumId}">${ entity.media.albumName }</button-action>
            </div>
            
        </div>
    </div>
    <div class="d-flex align-items-center justify-content-between">
        <pagination></pagination>
        <div>
            <em>{{ 'data_count'|trans({'%begin%':'${begin}', '%end%':'${end}', '%total%':'${totalCount}'}) }}</em>
        </div>

    </div>
</tigris-data-list>
{% endblock %}