web-petting/templates/admin/media.html

{% extends "admin/layout.html" %}
{% let active_page = "media" %}

{% block title %}{{ t.media_title }}{% endblock %}

{% block content %}
<div class="page-head">
    <h1>{{ t.media_title }}</h1>
</div>

<!-- Client filter -->
<div class="filter-bar">
    <div class="select is-small">
        <select onchange="window.location.href='/admin/media?lang={{ lang.code() }}' + (this.value ? '&client_id=' + this.value : '')">
            <option value="">{{ t.media_all_clients }}</option>
            {% for c in &clients %}
            <option value="{{ c.id }}" {% if c.id.unwrap() == filter_client_id %}selected{% endif %}>{{ c.name }}</option>
            {% endfor %}
        </select>
    </div>
</div>

{% if items.is_empty() %}
    <p class="empty-state">{{ t.media_empty }}</p>
{% else %}
    <div class="media-grid">
        {% for item in &items %}
        <div class="media-card">
            {% if item.media.file_type == "photo" %}
                <a href="{{ item.media.url }}" data-lightbox="photo">
                    <span class="photo-thumb media-loading-frame is-loading">
                        <img src="{{ item.media.thumbnail_url }}" alt="" loading="lazy" data-media-load>
                    </span>
                </a>
            {% else %}
                <a href="{{ item.media.url }}" data-lightbox="video">
                    <div class="video-thumb media-loading-frame{% if !item.media.thumbnail_url.is_empty() %} is-loading{% endif %}" data-video-preview>
                        {% if !item.media.thumbnail_url.is_empty() %}
                        <img class="video-preview-sprite" src="{{ item.media.thumbnail_url }}" alt="" loading="lazy" data-media-load data-preview-frames="4">
                        {% endif %}
                        <span class="video-play">▶</span>
                    </div>
                </a>
            {% endif %}
            <div class="media-info">
                <div class="media-meta">
                    <strong>{{ item.client_name }}</strong>
                    {% if let Some(d) = item.visit_date.as_deref() %}
                        <span class="feedback-date">{{ d }}</span>
                    {% endif %}
                </div>
                {% if let Some(cap) = item.media.caption.as_deref() %}
                    <div class="media-caption">{{ cap }}</div>
                {% endif %}
                <form method="post" action="/admin/media/{{ item.media.id.unwrap() }}/delete" onsubmit="return confirm('{{ t.media_delete_confirm }}');" class="mt-2">
                    <button class="button is-small is-danger is-outlined btn-sm">{{ t.media_delete }}</button>
                </form>
            </div>
        </div>
        {% endfor %}
    </div>
    {% if total_pages > 1 %}
    <nav class="media-pagination" aria-label="Pagination">
        {% if page > 1 %}
        <a class="button is-small" href="/admin/media?lang={{ lang.code() }}&page={{ page - 1 }}{% if filter_client_id > 0 %}&client_id={{ filter_client_id }}{% endif %}">←</a>
        {% endif %}
        {% for p in 1..=total_pages %}
        <a class="button is-small{% if p == page %} is-link{% endif %}" href="/admin/media?lang={{ lang.code() }}&page={{ p }}{% if filter_client_id > 0 %}&client_id={{ filter_client_id }}{% endif %}">{{ p }}</a>
        {% endfor %}
        {% if page < total_pages %}
        <a class="button is-small" href="/admin/media?lang={{ lang.code() }}&page={{ page + 1 }}{% if filter_client_id > 0 %}&client_id={{ filter_client_id }}{% endif %}">→</a>
        {% endif %}
    </nav>
    {% endif %}
{% endif %}

{% endblock %}