{% 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="/admin/uploads/{{ item.media.id }}" data-lightbox="photo">
                    <img src="/admin/uploads/{{ item.media.id }}" alt="" loading="lazy">
                </a>
            {% else %}
                <a href="/admin/uploads/{{ item.media.id }}" data-lightbox="video">
                    <div class="video-thumb">🎬</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 }}/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>
{% 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 .video-thumb {
        width: 100%;
        height: 160px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        background: #f0f0f0;
    }
    .media-info {
        padding: 0.6rem 0.75rem;
    }
    .media-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.85rem;
    }
    @media (max-width: 480px) {
        .media-grid {
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        }
        .media-card img, .media-card .video-thumb {
            height: 120px;
        }
    }
</style>
{% endblock %}