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

{% block title %}{{ 'media.upload'|trans|parse_icons }}{% endblock %}
{% block main %}
<div id="media-add">
    <tigris-data-list route="app_album_mediadata" :route-params="{id: '{{ album.id }}'}" update-route="app_media_changepart" :init-filters="{}" v-slot="{entities, filters, countPerPage, order, loading, loadData, sort, begin, end, totalCount, pageCount, updateEntity}">
        <header class="album-header">
            <h1>{{ album.name }}</h1>
            <div>
                
                <button-action v-on:formsaved="loadData()" route="app_album_edit" class="btn btn-block btn-primary ms-1" :route-params="{id: '{{ album.id }}'}" type="primary" :modal="true">{{ 'album.edit.edit_infos'|trans|parse_icons }}</button-action>
                <button-action route="app_album_show" class="btn ms-1" :route-params="{id: '{{ album.id }}'}" type="secondary">{{ 'button.return'|trans|parse_icons }}</button-action>
            </div>
            
        </header>
        <div>
            <div class="card">
                <div class="card-body">
                    <file-upload :remove-files-on-complete="true" label="{{ 'media.upload_drop'|trans }}" upload-route="app_media_upload" :upload-route-params="{id: '{{ album.id }}'}" @upload-complete="loadData()">
                    </file-upload>
                </div>
            </div>
            <div class="media-list">
                <div v-for="entity in entities" :key="entity.id" class="media-list-item">
                    <div class="file-preview">
                        <img :src="entity.thumbnailWebPath" :style="'transform:rotate('+entity.angleToRotate+'deg)'">
                    </div>
                    <div class="media-list-item-actions">
                        <button-action v-on:formsaved="loadData()" route="app_media_edit" class="btn btn-block" :route-params="{id:entity.id}" type="primary" :modal="true" title="{{ 'button.edit'|trans }}">{{ '.icon-pencil'|parse_icons }}</button-action>
                        <button-action v-on:formsaved="loadData()" route="app_media_remove" class="btn btn-block" :route-params="{id:entity.id}" type="danger" :modal="true" title="{{ 'button.delete'|trans }}">{{ '.icon-trash'|parse_icons }}</button-action>
                    </div>
                </div>
            </div>

        </div>
    </tigris-data-list>
</div>

{% endblock %}