{% extends "albums/_base.html" %}
{% from "components/page_header.html" import page_header %}

{% block title %}{{ _("Albums - Yaffo") }}{% endblock %}

{% block albums_content %}
{% call page_header(_("Albums")) %}
    {{ _("Curated collections you can browse and share with your other devices.") }}
{% endcall %}

{% if albums %}
<div class="album-tiles">
    {% for album in albums %}
    <a class="album-tile" href="{{ url_for('albums_show', album_id=album.id) }}">
        <div class="album-tile-cover">
            {% if not album.cover %}
            <img src="{{ url_for('placeholder') }}" alt="{{ _('Empty album') }}">
            {% elif album.cover.media_type == 'video' %}
            {# /media/<id> serves the ORIGINAL file, so a video there would stream an
               MP4 into an <img> and fail. Videos are drawn from their poster, as on
               the home grid. #}
            <img src="{{ album.cover.poster_path and url_for('media_poster', media_item_id=album.cover.id) or url_for('static', filename='video_placeholder.svg') }}"
                 data-fallback="{{ url_for('static', filename='video_placeholder.svg') }}"
                 alt="{{ _('Cover of %(album)s', album=album.name) }}">
            {% else %}
            <img src="{{ url_for('media', media_item_id=album.cover.id) }}"
                 data-fallback="{{ url_for('placeholder') }}"
                 alt="{{ _('Cover of %(album)s', album=album.name) }}">
            {% endif %}
        </div>
        <div class="album-tile-body">
            <span class="album-tile-name">{{ album.name }}</span>
            <div class="album-tile-meta">
                <span class="chip">{{ _("%(count)s photos", count=album.item_count | format_integer) }}</span>
                {% if album.is_shared %}<span class="chip chip-accent">{{ _("Shared") }}</span>{% endif %}
            </div>
        </div>
    </a>
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <h2>{{ _("No albums yet") }}</h2>
    <p>{{ _("An album is a collection you curate by hand — create one, then add photos to it.") }}</p>
</div>
{% endif %}
{% endblock %}