{% extends '@TigrisBase/layout.html.twig' %}
{% import 'component/_utils.html.twig' as utils %}

{% block title %}{{ album.name }}{% endblock %}
{% block main %}
<div id="album-show">
    <header class="album-header">
        <h1>{{ album.name }}</h1>

        
        <div>
            <a href="{{ path('app_album_download', {'id': album.id }) }}" class="btn btn-primary" target="_blank">
                <span class="d-lg-none">{{ '.icon-download'|parse_icons }}</span>
                <span class="d-none d-lg-inline">{{ 'album.download'|trans|parse_icons }}</span>
            </a>
            {% if is_granted('EDIT', album) %}
            <button-action route="app_album_edit" v-on:formsaved="() => {  }" class="btn btn-info ms-2" :route-params="{id: '{{ album.id }}'}" :modal="true" type="primary">
                <span class="d-lg-none">{{ '.icon-pencil'|parse_icons }}</span>
                <span class="d-none d-lg-inline">{{ 'album.edit.edit_infos'|trans|parse_icons }}</span>
            </button-action>
            <a href="{{ path('app_media_add', {'id': album.id}) }}" class="btn btn-info ms-2">
                <span class="d-lg-none">{{ '.icon-upload'|parse_icons }}</span>
                <span class="d-none d-lg-inline">{{ 'album.upload'|trans|parse_icons }}</span>
            </a>
            {% endif %}
        </div>
        
    </header>
    
    <div class="album-infos">
        <div class="album-description">
            {{ album.description|nl2br }}
            <div class="album-place">
                {% if is_granted('EDIT', album) %}
                <button-action class="btn btn-secondary btn-place me-2" dialog-component="PlaceSearch" :dialog-component-props="{albumId: '{{ album.id }}', mediaId: null}" :modal="true">
                    <span v-html="$filters.parseIcons('.icon-location-pen')"></span>
                </button-action>
                {% endif %}
                {# URL to map #}
                {% if album.place is not empty %}
                <a href="https://www.google.com/maps/search/?api=1&query={{ album.place.line1 }}" target="_blank" class="btn btn-link">
                    <span v-html="$filters.parseIcons('.icon-map')"></span> {{ album.place }}
                </a>
                {% endif %}
            </div>
            
            
        </div>
        <div class="album-details">
            <div>{{ 'album.author'|trans }} <span>{{ album.author }}</span></div>
            <div class="album-infos-families">
                {% for family in album.families %}
                    <span class="badge text-bg-secondary ms-1">{{ family.name }}</span>
                {% endfor %}
            </div>
            <div class="album-infos-tags">
                {% for tag in album.tags %}
                    {{ utils.album_tag(tag) }}
                {% endfor %}
            </div>
        </div>
    </div>
    
    <tigris-data-list route="app_album_mediadata" :route-params="{id: '{{ album.id }}'}" :count-per-page="60" update-route="app_media_changepart" :init-filters="{}" v-slot="{entities, filters, countPerPage, order, loading, loadData, sort, begin, end, totalCount, pageCount, updateEntity}">
        <div class="d-flex align-items-center justify-content-between flex-wrap">
            <pagination></pagination>
            <div>
                <em>{{ 'data_count'|trans({'%begin%':'${begin}', '%end%':'${end}', '%total%':'${totalCount}'}) }}</em>
            </div>

        </div>
        <div>
            <div class="media-list" v-if="!loading">
                <div v-for="entity in entities" :key="entity.id" class="media-list-item">
                    <button-action v-on:formsaved="loadData()" dialog-component="MediaViewer" :dialog-component-props="{albumId:'{{ album.id }}', mediaId: entity.id}" :modal="true" modal-size="full" :class="{ loading: loading, 'media-item': true}">
                        <div class="file-preview">
                            <img :src="entity.thumbnailWebPath">
                        </div>
                    </button-action>
                    <div class="media-list-item-actions" v-if="entity.canEdit">
                        <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 v-else class="d-flex justify-content-center p-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Chargement...</span>
                </div>
            </div>
        </div>
        <div class="d-flex align-items-center justify-content-between flex-wrap">
            <pagination></pagination>
            <div>
                <em>{{ 'data_count'|trans({'%begin%':'${begin}', '%end%':'${end}', '%total%':'${totalCount}'}) }}</em>
            </div>

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

    <div class="album-footer d-flex justify-content-end">
        {% if is_granted('EDIT', album) %}
        <a href="{{ path('app_album_delete', {'id': album.id }) }}" class="btn btn-link">{{ 'album.delete.label'|trans }}</a>
        {% endif %}
    </div>
</div>
{% endblock %}