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 style="margin-bottom:1rem;">
    <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="has-text-grey">{{ 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 style="color:#999;">{{ d }}</span>
                    {% endif %}
                </div>
                {% if let Some(cap) = item.media.caption.as_deref() %}
                    <div style="font-size:0.82rem;color:#666;margin-top:0.2rem;">{{ cap }}</div>
                {% endif %}
                <form method="post" action="/admin/media/{{ item.media.id.unwrap() }}/delete" onsubmit="return confirm('{{ t.media_delete_confirm }}');" style="margin-top:0.3rem;">
                    <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 %}

<style>
    .media-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.75rem;
    }
    .media-card {
        background: #fff;
        border-radius: 10px;
        border: 1px solid #eee;
        overflow: hidden;
    }
    .media-card img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        display: block;
    }
    .media-card .photo-thumb {
        width: 100%;
        height: 160px;
    }
    .media-card .video-thumb {
        position: relative;
        width: 100%;
        height: 160px;
        background: #111;
    }
    .media-card .video-play {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 2.5rem;
        line-height: 1;
        text-shadow: 0 1px 5px #000;
        pointer-events: none;
    }
    .media-info {
        padding: 0.6rem 0.75rem;
    }
    .media-pagination {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.35rem;
        margin-top: 1.25rem;
    }
    .media-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.85rem;
        color: #333;
    }
    @media (max-width: 480px) {
        .media-grid {
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        }
        .media-card img, .media-card .photo-thumb, .media-card .video-thumb {
            height: 120px;
        }
    }
</style>
{% endblock %}