{% extends "base.html" %}

{% block title %}{{ file_name }} - Yaffo{% endblock %}

{% block extra_styles %}
    <link rel="stylesheet" href="{{ url_for('static', filename='media/view.css') }}">
{% endblock %}

{% from "components/modal.html" import render_modal %}

{% block content %}
    <div class="photo-viewer">
        <div class="photo-sidebar">
            <div class="sidebar-header">
                <h2>{{ _("Photo Details") }}</h2>
            </div>

            <div class="sidebar-content thin-scrollbar">
                <div class="detail-section">
                    <h3>{{ _("File Information") }}</h3>
                    <div class="detail-item">
                        <label>{{ _("Name:") }}</label>
                        <span class="detail-value">{{ file_name }}</span>
                    </div>
                    <div class="detail-item">
                        <label>{{ _("Folder:") }}</label>
                        <span class="detail-value">{{ absolute_folder_path if absolute_folder_path else '/' }}</span>
                    </div>
                    {% if media_item.date_taken %}
                        <div class="detail-item">
                            <label>{{ _("Date Taken:") }}</label>
                            <span class="detail-value">{{ media_item.date_taken | format_date ("datetime") }}</span>
                        </div>
                    {% endif %}
                    {% if media_item.device %}
                        <div class="detail-item">
                            <label>{{ _("Device:") }}</label>
                            <span class="detail-value">{{ media_item.device }}</span>
                        </div>
                    {% endif %}
                    {% if media_item.media_type == 'video' %}
                        {% if media_item.duration_seconds %}
                            <div class="detail-item">
                                <label>{{ _("Duration:") }}</label>
                                <span class="detail-value">{{ media_item.duration_seconds | format_duration }}</span>
                            </div>
                        {% endif %}
                        {% if media_item.width and media_item.height %}
                            <div class="detail-item">
                                <label>{{ _("Resolution:") }}</label>
                                <span class="detail-value">{{ media_item.width }} × {{ media_item.height }}</span>
                            </div>
                        {% endif %}
                        {% if media_item.video_codec %}
                            <div class="detail-item">
                                <label>{{ _("Codec:") }}</label>
                                <span class="detail-value">{{ media_item.video_codec }}</span>
                            </div>
                        {% endif %}
                    {% endif %}
                    <div class="detail-actions">
                        <button onclick="window.PHOTO_ORGANIZER.VIEW_PHOTO.photoView.openFile('{{ absolute_file_path }}')"
                                class="action-button">
                            {{ _("Open File") }}
                        </button>
                        <button onclick="window.PHOTO_ORGANIZER.VIEW_PHOTO.photoView.openFolder('{{ absolute_folder_path }}')"
                                class="action-button">
                            {{ _("Open Folder") }}
                        </button>
                    </div>
                </div>

                <div class="detail-section">
                    <h3>{{ _("Location") }}</h3>
                    {% if media_item.location_name or media_item.latitude is not none or media_item.longitude is not none %}
                        <div class="location-details">
                            {% if media_item.location_name %}
                                <div class="detail-item">
                                    <label>{{ _("Name:") }}</label>
                                    <span class="detail-value">{{ media_item.location_name }}</span>
                                </div>
                            {% endif %}
                            {% if media_item.latitude is not none and media_item.longitude is not none %}
                                <div class="detail-item">
                                    <label>{{ _("Coordinates:") }}</label>
                                    <span class="detail-value">
                            {{ media_item.latitude | format_coordinate }}, {{ media_item.longitude | format_coordinate }}
                        </span>
                                </div>
                                <div class="detail-actions">
                                    <a href="https://www.google.com/maps?q={{ media_item.latitude }},{{ media_item.longitude }}"
                                       target="_blank"
                                       class="action-button">
                                        {{ _("View on Map") }}
                                    </a>
                                </div>
                            {% endif %}
                        </div>
                    {% else %}
                        <p class="no-data">{{ _("No location information") }}</p>
                    {% endif %}
                </div>

                <div class="detail-section">
                    <h3>{% trans trimmed count=people|length %}Person ({{ count }}){% pluralize %}People ({{ count }}){% endtrans %}</h3>
                    {% if people %}
                        <div class="people-list">
                            {% for person in people %}
                                <a href="{{ url_for('person_faces', person_id=person.id) }}" class="person-link">
                                    {{ person.name }}
                                </a>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="no-data">{{ _("No people assigned to this photo") }}</p>
                    {% endif %}
                </div>

                <div class="detail-section">
                    <h3>{% trans trimmed count=media_item.faces|length %}Face ({{ count }}){% pluralize %}Faces ({{ count }}){% endtrans %}</h3>
                    {% if media_item.faces %}
                        <div class="faces-grid">
                            {% for face in media_item.faces %}
                                <div class="face-thumbnail"
                                     id="face-thumbnail-{{ face.id }}"
                                     data-face-id="{{ face.id }}"
                                     onmouseenter="window.PHOTO_ORGANIZER.VIEW_PHOTO.photoView.highlightFace({{ face.id }})"
                                     onmouseleave="window.PHOTO_ORGANIZER.VIEW_PHOTO.photoView.clearHighlights()">
                                    <img src="{{ url_for('face_thumbnail', face_id=face.id) }}"
                                         data-fallback="{{ url_for('placeholder') }}" alt="{{ _('Face') }}">
                                    {% if face.people %}
                                        <div class="face-label">
                                            {% for person in face.people %}
                                                {{ person.name }}{% if not loop.last %}, {% endif %}
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="no-data">{{ _("No faces detected") }}</p>
                    {% endif %}
                </div>

                <div class="detail-section">
                    <h3>{% trans trimmed count=media_item.labels|length %}Label ({{ count }}){% pluralize %}Labels ({{ count }}){% endtrans %}</h3>
                    {% if media_item.labels %}
                        <div class="labels-chips">
                            {% for media_label in media_item.labels %}
                                <span class="label-chip" title="{{ _('Confidence: %(value)s', value=media_label.confidence | format_percent(2)) }}">
                                    {{ media_label.label.name }}
                                </span>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="no-data">{{ _("No labels") }}</p>
                    {% endif %}
                </div>

                <div class="detail-section">
                    <h3>{% trans trimmed count=media_item.tags|length %}Tag ({{ count }}){% pluralize %}Tags ({{ count }}){% endtrans %}</h3>
                    {% if media_item.tags %}
                        <div class="tags-list">
                            {% for tag in media_item.tags %}
                                <div class="tag-item">
                                    <span class="tag-name">{{ tag.tag_name }}</span>
                                    {% if tag.tag_value %}
                                        <span class="tag-separator">:</span>
                                        <span class="tag-value">{{ tag.tag_value }}</span>
                                    {% endif %}
                                </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <p class="no-data">{{ _("No tags") }}</p>
                    {% endif %}
                    <div class="detail-actions">
                        <button onclick="window.PHOTO_ORGANIZER.VIEW_PHOTO.photoTags.openEditModal()"
                                class="action-button">
                            {{ _("Edit Tags") }}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="photo-container">
            <div class="photo-wrapper">
                <div class="photo-image-container">
                    {% if media_item.media_type == 'video' and not file_exists %}
                        <div class="media-missing">
                            <p>{{ _("This video is no longer available on disk.") }}</p>
                            <p class="media-missing-name">{{ file_name }}</p>
                        </div>
                    {% elif media_item.media_type == 'video' and not playable %}
                        {# Poster rendered like a photo so the container hugs it and the
                           favorite heart lands on its corner; the "can't play" notice +
                           open-externally action overlay the bottom of the poster. #}
                        <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="{{ file_name }}" class="photo-main">
                        <div class="video-unplayable">
                            <span>{{ _("This format can't play in the browser.") }}</span>
                            <button onclick="window.PHOTO_ORGANIZER.VIEW_PHOTO.photoView.openFile('{{ absolute_file_path }}')"
                                    class="action-button">{{ _("Open in default player") }}</button>
                        </div>
                    {% elif media_item.media_type == 'video' %}
                        <video src="{{ url_for('media', media_item_id=media_item.id) }}"
                               class="photo-main video-main"
                               id="mainVideo"
                               controls preload="metadata"></video>
                    {% else %}
                        <img src="{{ url_for('media', media_item_id=media_item.id) }}"
                             data-fallback="{{ url_for('placeholder') }}"
                             alt="{{ file_name }}"
                             class="photo-main"
                             id="mainPhoto">
                    {% endif %}
                    <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' %}
                        <canvas id="faceCanvas" class="face-overlay"></canvas>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    {% macro render_modal_edit_tags_form() %}
        <div id="tags-editor-container">
            <div id="tags-editor-list" class="thin-scrollbar"></div>

            <div class="tag-add-section">
                <h4>{{ _("Add New Tag") }}</h4>
                <div class="tag-add-row">
                    <input type="text" id="modal-new-tag-name" placeholder="{{ _('Tag name') }}" class="tag-input">
                    <input type="text" id="modal-new-tag-value" placeholder="{{ _('Tag value (optional)') }}" class="tag-input">
                    <button type="button" class="btn btn-secondary"
                            onclick="window.PHOTO_ORGANIZER.VIEW_PHOTO.photoTags.addTagToList()">+ {{ _("Add Tag") }}</button>
                </div>
            </div>
        </div>
    {% endmacro %}

    {{ render_modal('tagsModal', _("Edit Tags"), "", render_modal_edit_tags_form, _("Save Changes"), "btn-primary", size_class="modal-lg", posts=false) }}

{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='components/modal.js') }}"></script>
    <script src="{{ url_for('static', filename='media/view.js') }}"></script>
    <script src="{{ url_for('static', filename='media/favorite.js') }}"></script>
    <script src="{{ url_for('static', filename='media/tags.js') }}"></script>
    <script src="{{ url_for('static', filename='media/face-reassign.js') }}"></script>
    <script>
        window.PHOTO_ORGANIZER.i18nReady.then((i18n) => {
            window.PHOTO_ORGANIZER.initFavoriteToggles(i18n, window.APP_CONFIG);
            window.PHOTO_ORGANIZER.VIEW_PHOTO.photoView = window.PHOTO_ORGANIZER.VIEW_PHOTO.initPhotoView(
                {{ faces_with_locations | tojson }},
                {{ absolute_file_path | tojson }},
                {{ absolute_folder_path | tojson }},
                i18n,
                window.APP_CONFIG
            );
            window.PHOTO_ORGANIZER.VIEW_PHOTO.photoTags = window.PHOTO_ORGANIZER.VIEW_PHOTO.initPhotoTags(
                {{ media_item.id }},
                {{ tags_data | tojson }},
                i18n,
                window.APP_CONFIG
            );
            window.PHOTO_ORGANIZER.VIEW_PHOTO.faceReassign = window.PHOTO_ORGANIZER.VIEW_PHOTO.initFaceReassign(
                {{ all_people | tojson }},
                i18n,
                window.APP_CONFIG
            );
        });
    </script>
{% endblock %}