{# One library card — used by the home grid and the timeline view, so the
   favorite toggle, hover details, and video affordances can never diverge
   between them. #}
{% macro photo_card(media_item) %}
    <div class="photo-card"
         onclick="window.open('{{ url_for('media_view', media_item_id=media_item.id) }}', '_blank')">
        <div class="photo-thumb">
            <button type="button" data-icon="favorite" data-photo-id="{{ media_item.id }}"
                    class="favorite-toggle {% if media_item.favorite %}is-favorite{% endif %}"
                    aria-pressed="{{ 'true' if media_item.favorite else 'false' }}"
                    title="{{ _('Toggle favorite') }}" aria-label="{{ _('Toggle favorite') }}"></button>
            {% if media_item.media_type == 'video' %}
                <img src="{{ media_item.poster_path and url_for('media_poster', media_item_id=media_item.id) or url_for('static', filename='video_placeholder.svg') }}"
                     data-fallback="{{ url_for('static', filename='video_placeholder.svg') }}"
                     alt="{{ _('Video from %(date)s', date=media_item.date_taken | format_date('date')) }}">
                {# Play badge only on browser-playable videos (it triggers inline
                   play). Non-playable videos show just the poster; the card click
                   opens the detail view, which offers "open externally". #}
                {% if is_browser_playable_video(media_item.full_file_path) %}
                    <button type="button" class="video-play-badge"
                            data-photo-id="{{ media_item.id }}"
                            title="{{ _('Play video') }}" aria-label="{{ _('Play video') }}"></button>
                {% endif %}
                {% if media_item.duration_seconds %}
                    <span class="video-duration">{{ media_item.duration_seconds | format_duration }}</span>
                {% endif %}
            {% else %}
                <img src="{{ url_for('media', media_item_id=media_item.id) }}"
                     data-fallback="{{ url_for('placeholder') }}"
                     alt="{{ _('Photo from %(date)s', date=media_item.date_taken | format_date('date')) }}">
            {% endif %}
            <dl class="photo-hover">
                <div class="photo-hover-row">
                    <dt>{{ _("Name") }}</dt>
                    <dd class="photo-hover-path"
                        title="{{ media_item.full_file_path }}">{{ media_item.file_name }}</dd>
                </div>
                <div class="photo-hover-row">
                    <dt>{{ _("Folder") }}</dt>
                    <dd class="photo-hover-path" title="{{ media_item.folder }}">{{ media_item.folder }}</dd>
                </div>
                <div class="photo-hover-row">
                    <dt>{{ _("Taken") }}</dt>
                    <dd>{{ media_item.date_taken | format_date('datetime') if media_item.date_taken else _("Unknown date") }}</dd>
                </div>
                {% if media_item.location_name %}
                    <div class="photo-hover-row">
                        <dt>{{ _("Location") }}</dt>
                        <dd>{{ media_item.location_name }}</dd>
                    </div>
                {% endif %}
                {% if media_item.latitude is not none and media_item.longitude is not none %}
                    <div class="photo-hover-row">
                        <dt>{{ _("Coordinates") }}</dt>
                        <dd>{{ media_item.latitude | format_coordinate(5) }}, {{ media_item.longitude | format_coordinate(5) }}</dd>
                    </div>
                {% endif %}
                {% if media_item.labels %}
                    <div class="photo-hover-row">
                        <dt>{{ _("Labels") }}</dt>
                        <dd>{{ media_item.labels | map(attribute='label.name') | join(', ') }}</dd>
                    </div>
                {% endif %}

            </dl>
        </div>
        <div class="photo-info">
            <div class="photo-date">{{ media_item.date_taken | format_date("date") if media_item.date_taken else _("Unknown date") }}</div>
            {% if media_item.people|length > 0 %}
                <div class="photo-people">
                    {% for person in media_item.people %}
                        <span class="person-tag">{{ person.name }}</span>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
{% endmacro %}