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

{% block title %}{{ 'button.view_medias'|trans|parse_icons }}{% endblock %}
{% block main %}
<div id="album-list">
    <tigris-data-list route="app_album_data" :init-filters="{search:'', families: [], year: 0, my: false}" v-slot="{entities, filters, countPerPage, order, loading, loadData, sort, begin, end, totalCount, pageCount}">
        <div class="album-filters filters">
            <form action="" method="GET" class="d-flex">
                <search-filter v-model="filters.search" class="ms-2" :label="false" placeholder="{{ 'search'|trans }}"></search-filter>

                <div class="form-group ms-2">
                    <select class="form-control" multiple data-none-selected-text="Familles" v-model="filters.families">
                    {% for family in app.user.families %}
                        <option value="{{ family.id }}">{{ family.name }}</option>
                    {% endfor %}
                    </select>
                </div>

                <div class="from-group ms-2">
                    <select class="form-control" v-model="filters.tags" multiple="true" data-none-selected-text="Tags">
                        {% for tag in tags %}
                        <option value="{{ tag.name }}" data-html="{{ utils.album_tag(tag)|e('html') }}">{{ tag.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="from-group ms-2">
                    <select class="form-control" v-model="filters.year">
                        <option value="0">{{ 'album.year.all'|trans }}</option>
                        {% for year in years %}
                        <option value="{{ year }}">{{ year }}</option>
                        {% endfor %}
                    </select>
                </div>

                {# My album bootstrap toggle #}
                <div class="form-group ms-2">
                    <div class="form-check form-switch pt-1">
                        <input class="form-check-input" type="checkbox" id="my-album" v-model="filters.my">
                        <label class="form-check-label" for="my-album">{{ 'album.my_albums'|trans }}</label>
                    </div>
                </div>
            </form>

            <a href="{{ path('app_album_add') }}" class="btn btn-primary">
                <span class="d-lg-none">{{ '.icon-rectangle-history-circle-plus'|parse_icons }}</span>
                <span class="d-none d-lg-inline">{{ 'album.add.add'|trans|parse_icons }}</span>
            </a>
        </div>
        <div class="album-list" v-if="!loading">
            <button-action v-for="entity in entities" :key="entity.id" route="app_album_show" class="album-list-item" :route-params="{id: entity.id}">
                <div class="item-content">
                    <div class="item-img" v-if="entity.mediaCount > 0">
                        <img :src="entity.thumbnailWebPath" alt="">
                        <div class="item-overlay">
                            <div class="item-overlay-content">
                                <div class="item-overlay-header">
                                    <div>
                                        <span v-html="$filters.parseIcons('.icon-images')"></span> ${ entity.mediaCount }
                                    </div>
                                    <div>
                                        <span v-if="entity.year">${ entity.year }</span>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <div class="item-overlay-tags">
                                        <span v-for="tag in entity.tags.slice(0, 2)" class="badge text-dark ms-1" :style="{backgroundColor: tag.color }"><span v-html="$filters.parseIcons('.icon-' + tag.icon)"></span> ${ tag.name }</span>
                                        <div v-if="entity.tags.length > 2" class="badge text-bg-light ms-1">+ ${ entity.tags.length - 2 }</div>
                                    </div>
                                    <div class="item-overlay-families">
                                        <span v-for="family in entity.families.slice(0, 3)" class="badge text-bg-secondary ms-1">${ family.name }</span>
                                        <div v-if="entity.families.length > 3" class="badge text-bg-secondary ms-1">+ ${ entity.families.length - 3 }</div>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    <div class="item-title">
                        ${ entity.name }
                    </div>
                </div>   
            </button-action>
        </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>
    </tigris-data-list>
</div>
{% endblock %}