{% extends '@Communication/communication/layout.html.twig' %}

{% block communication_title %}Médiathèque · Communication{% endblock %}
{% block communication_header %}{% endblock %}

{% block communication_content %}
{% set typeLabels = {image:'Image',video:'Vidéo',document:'Document',vector:'Vectoriel',other:'Fichier'} %}
{% set typeIcons = {image:'solar:gallery-bold-duotone',video:'solar:videocamera-record-bold-duotone',document:'solar:file-text-bold-duotone',vector:'solar:layers-bold-duotone',other:'solar:file-bold-duotone'} %}
{% set usedGb = library.storage.usedBytes / 1073741824 %}
{% set quotaGb = library.storage.quotaBytes / 1073741824 %}
{% set remainingGb = (library.storage.quotaBytes - library.storage.usedBytes) / 1073741824 %}

<div 
     data-controller="communication-media-library">
    <header class="cmedia-header capsule-heading">
        <div class="capsule-heading-main">
            <div class="capsule-heading-content">
                <h1 class="capsule-heading-title">Médiathèque</h1>
                <p class="capsule-heading-subtitle">Gérez vos ressources, images, vidéos et documents.</p>
            </div>
        </div>
        {% if is_granted('COMMUNICATION_CREATE') %}
            <button class="capsule-button capsule-button--primary" type="button" data-action="communication-media-library#openPicker">
                <iconify-icon icon="solar:cloud-upload-bold-duotone"></iconify-icon>Téléverser des médias
            </button>
        {% endif %}
    </header>

    <div class="cmedia-layout">
        <aside class="cmedia-sidebar">
            <section class="cmedia-storage">
                <div><strong>Stockage</strong><b>{{ usedGb|number_format(2, ',', ' ') }} / {{ quotaGb|number_format(0, ',', ' ') }} Go</b></div>
                <span><i style="width: {{ library.storage.percent }}%"></i></span>
                <small>{{ remainingGb > 0 ? remainingGb|number_format(2, ',', ' ') ~ ' Go disponibles' : 'Quota atteint' }}</small>
            </section>

            <section class="cmedia-side-section">
                <header>
                    <h2>Dossiers</h2>
                    {% if is_granted('COMMUNICATION_CREATE') %}
                        <button type="button" aria-label="Créer un dossier" data-action="communication-media-library#openFolderForm">
                            <iconify-icon icon="solar:add-circle-linear"></iconify-icon>
                        </button>
                    {% endif %}
                </header>
                <div class="cmedia-folder-list">
                    <button class="is-active" type="button" data-folder="" data-folder-id="" data-action="communication-media-library#folderFilter">
                        <iconify-icon icon="solar:layers-bold-duotone"></iconify-icon><span>Tous les médias</span><b>{{ library.total }}</b>
                    </button>
                    {% for item in library.folders %}
                        <button type="button"
                                data-folder="{{ item.folder.idtoken }}"
                                data-folder-id="{{ item.folder.id }}"
                                data-action="communication-media-library#folderFilter">
                            <iconify-icon icon="solar:folder-bold-duotone"></iconify-icon>
                            <span>{{ item.folder.name }}</span><b>{{ item.count }}</b>
                        </button>
                    {% endfor %}
                    <button type="button" data-folder="none" data-folder-id="" data-action="communication-media-library#folderFilter">
                        <iconify-icon icon="solar:folder-error-bold-duotone"></iconify-icon><span>Sans dossier</span>
                    </button>
                </div>
            </section>

            <section class="cmedia-side-section">
                <header><h2>Filtrer par type</h2></header>
                <div class="cmedia-type-list">
                    {% for type,label in {image:'Images',video:'Vidéos',document:'Documents PDF / Word',vector:'Fichiers vectoriels',other:'Autres fichiers'} %}
                        <label>
                            <input type="checkbox" value="{{ type }}" checked data-communication-media-library-target="type" data-action="change->communication-media-library#filter">
                            <iconify-icon icon="{{ typeIcons[type] }}"></iconify-icon>
                            <span>{{ label }}</span><b>{{ library.typeCounts[type] }}</b>
                        </label>
                    {% endfor %}
                </div>
            </section>

            <section class="cmedia-side-section">
                <header><h2>Date d’ajout</h2></header>
                <div class="cmedia-date-list">
                    <button type="button" data-date="today" data-action="communication-media-library#dateFilter">Aujourd’hui</button>
                    <button type="button" data-date="week" data-action="communication-media-library#dateFilter">Cette semaine</button>
                    <button type="button" data-date="month" data-action="communication-media-library#dateFilter">Ce mois-ci</button>
                    <button class="is-active" type="button" data-date="all" data-action="communication-media-library#dateFilter">Toutes les dates</button>
                </div>
            </section>

            {% if library.tags %}
                <section class="cmedia-side-section">
                    <header><h2>Tags</h2></header>
                    <div class="cmedia-tags-filter">
                        {% for item in library.tags %}
                            <button type="button" data-tag="{{ item.tag.idtoken }}" data-action="communication-media-library#tagFilter">{{ item.tag.name }}</button>
                        {% endfor %}
                        <button type="button" data-tag="" data-action="communication-media-library#tagFilter">Tous</button>
                    </div>
                </section>
            {% endif %}
        </aside>

        <main class="cmedia-main">
            <section class="cmedia-toolbar">
                <label class="cmedia-search">
                    <iconify-icon icon="solar:magnifer-linear"></iconify-icon>
                    <input type="search"
                           placeholder="Rechercher un média…"
                           aria-label="Rechercher un média"
                           data-communication-media-library-target="search"
                           data-action="input->communication-media-library#filter">
                </label>
                <label class="cmedia-sort">
                    <span class="visually-hidden">Trier les médias</span>
                    <select data-communication-media-library-target="sort" data-action="change->communication-media-library#sort">
                        <option value="newest">Plus récents</option>
                        <option value="oldest">Plus anciens</option>
                        <option value="name">Nom du fichier</option>
                        <option value="size">Taille du fichier</option>
                    </select>
                </label>
                <div class="cmedia-view-switch">
                    <button class="is-active" type="button" data-view="grid" data-action="communication-media-library#changeView" aria-label="Affichage en grille"><iconify-icon icon="solar:widget-4-linear"></iconify-icon></button>
                    <button type="button" data-view="list" data-action="communication-media-library#changeView" aria-label="Affichage en liste"><iconify-icon icon="solar:list-linear"></iconify-icon></button>
                </div>
                <span class="cmedia-visible-count" data-communication-media-library-target="count">{{ library.total }} média{{ library.total > 1 ? 's' }}</span>
                <button class="cmedia-select-all" type="button" data-action="communication-media-library#selectAll">
                    <iconify-icon icon="solar:check-read-linear"></iconify-icon>Tout sélectionner
                </button>
            </section>

            {% if is_granted('COMMUNICATION_CREATE') %}
                <form id="cmedia-upload-form"
                      class="cmedia-dropzone"
                      method="post"
                      enctype="multipart/form-data"
                      action="{{ path('communication_media_upload') }}"
                      data-communication-media-library-target="uploadForm"
                      data-action="dragenter->communication-media-library#dragEnter dragover->communication-media-library#dragOver dragleave->communication-media-library#dragLeave drop->communication-media-library#drop submit->communication-media-library#uploadStarted">
                    <input type="hidden" name="_token" value="{{ csrf_token('communication_media_upload') }}">
                    <input type="hidden" name="media[folderId]" value="" data-communication-media-library-target="uploadFolder">
                    <input type="file"
                           name="media[files][]"
                           multiple
                           accept=".png,.jpg,.jpeg,.webp,.gif,.svg,.mp4,.pdf,.doc,.docx"
                           hidden
                           data-communication-media-library-target="fileInput"
                           data-action="change->communication-media-library#filesSelected">
                    <i><iconify-icon icon="solar:cloud-upload-bold-duotone"></iconify-icon></i>
                    <div>
                        <strong>Glissez-déposez vos fichiers ici ou <button type="button" data-action="communication-media-library#openPicker">parcourez vos fichiers</button></strong>
                        <span>PNG, JPG, GIF, SVG, MP4, PDF et Word — 50 Mo maximum par fichier</span>
                    </div>
                    <button class="cmedia-browse" type="button" data-action="communication-media-library#openPicker">Parcourir</button>
                    <div class="cmedia-upload-progress" hidden data-communication-media-library-target="uploadProgress"><i></i><span>Envoi en cours…</span></div>
                </form>
            {% endif %}

            {% set recentRows = library.rows|filter(row => row.recent) %}
            {% set olderRows = library.rows|filter(row => not row.recent) %}
            {% for groupLabel,rows in {'Ajouts récents':recentRows,'Médias plus anciens':olderRows} %}
                <section class="cmedia-group" data-communication-media-library-target="group">
                    <h2>{{ groupLabel }}</h2>
                    <div class="cmedia-grid" data-communication-media-library-target="grid">
                        {% for row in rows %}
                            {% set media = row.media %}
                            {% set extension = media.originalFilename|split('.')|last|upper %}
                            {% set folderToken = media.folder ? media.folder.idtoken : 'none' %}
                            <article class="cmedia-card is-{{ row.type }}"
                                     data-communication-media-library-target="card"
                                     data-type="{{ row.type }}"
                                     data-folder="{{ folderToken }}"
                                     data-tags="{% for tag in media.tags %}{{ tag.idtoken }} {% endfor %}"
                                     data-search="{{ media.title }} {{ media.originalFilename }} {{ media.description }} {% for tag in media.tags %}{{ tag.name }} {% endfor %}"
                                     data-name="{{ media.title ?: media.originalFilename }}"
                                     data-date="{{ media.createdAt|date('U') }}"
                                     data-size="{{ media.fileSize }}">
                                <label class="cmedia-card-select">
                                    <input type="checkbox" data-communication-media-library-target="checkbox" data-action="change->communication-media-library#selectionChanged">
                                    <span class="visually-hidden">Sélectionner {{ media.title ?: media.originalFilename }}</span>
                                </label>
                                <span class="cmedia-extension">{{ extension|slice(0, 5) }}</span>
                                <a class="cmedia-preview" href="{{ path('communication_media_edit', {idtoken:media.idtoken}) }}">
                                    {% if row.type == 'image' and media.mimeType != 'image/svg+xml' %}
                                        <img src="{{ path('communication_media_preview', {idtoken:media.idtoken}) }}" alt="{{ media.altText ?: media.title ?: media.originalFilename }}" loading="lazy">
                                    {% elseif row.type == 'video' %}
                                        <video src="{{ path('communication_media_preview', {idtoken:media.idtoken}) }}" preload="metadata" muted></video>
                                        <i class="cmedia-play"><iconify-icon icon="solar:play-bold"></iconify-icon></i>
                                        {% if media.durationSeconds %}<time>{{ media.durationSeconds }} s</time>{% endif %}
                                    {% else %}
                                        <i class="cmedia-file-icon"><iconify-icon icon="{{ typeIcons[row.type] }}"></iconify-icon><span>{{ typeLabels[row.type] }}</span></i>
                                    {% endif %}
                                </a>
                                <div class="cmedia-card-body">
                                    <a class="cmedia-filename" href="{{ path('communication_media_edit', {idtoken:media.idtoken}) }}">{{ media.title ?: media.originalFilename }}</a>
                                    <div class="cmedia-card-tags">
                                        {% for tag in media.tags|slice(0, 3) %}<span>{{ tag.name }}</span>{% endfor %}
                                    </div>
                                    <footer>
                                        <span><iconify-icon icon="solar:folder-bold-duotone"></iconify-icon>{{ media.folder ? media.folder.name : 'Sans dossier' }}</span>
                                        <span title="{{ row.usageCount }} utilisation(s)"><iconify-icon icon="solar:link-round-angle-linear"></iconify-icon>{{ row.usageCount }}</span>
                                    </footer>
                                </div>
                                <div class="cmedia-card-actions">
                                    <a href="{{ path('communication_media_download', {idtoken:media.idtoken}) }}" aria-label="Télécharger"><iconify-icon icon="solar:download-linear"></iconify-icon></a>
                                    <a href="{{ path('communication_media_edit', {idtoken:media.idtoken}) }}" aria-label="Modifier"><iconify-icon icon="solar:pen-linear"></iconify-icon></a>
                                </div>
                            </article>
                        {% endfor %}
                    </div>
                </section>
            {% endfor %}

            <div class="cmedia-empty" hidden data-communication-media-library-target="empty">
                <iconify-icon icon="solar:gallery-wide-linear"></iconify-icon>
                <strong>Aucun média trouvé</strong>
                <span>Modifiez vos filtres ou ajoutez un nouveau fichier.</span>
            </div>
        </main>
    </div>

    {% if is_granted('COMMUNICATION_CREATE') %}
        <div class="cmedia-modal" hidden data-communication-media-library-target="folderModal" data-action="click->communication-media-library#closeFolderOnBackdrop">
            <form method="post" action="{{ path('communication_media_folder_new') }}">
                <input type="hidden" name="_token" value="{{ csrf_token('communication_media_folder_new') }}">
                <header><h2>Nouveau dossier</h2><button type="button" data-action="communication-media-library#closeFolderForm"><iconify-icon icon="solar:close-circle-linear"></iconify-icon></button></header>
                <label>Nom du dossier<input type="text" name="folder[name]" required maxlength="140" placeholder="Ex. Identité visuelle"></label>
                <label>Dossier parent<select name="folder[parentId]"><option value="">Aucun dossier parent</option>{% for item in library.folders %}<option value="{{ item.folder.id }}">{{ item.folder.name }}</option>{% endfor %}</select></label>
                <footer><button type="button" data-action="communication-media-library#closeFolderForm">Annuler</button><button type="submit">Créer le dossier</button></footer>
            </form>
        </div>
    {% endif %}
</div>
{% endblock %}