{% extends "base.html" %}

{% set card_title = card.title or (_("Carte #%(id)s", id=card.id)) %}

{% block title %}{{ card_title }} - {{ _("Cartes postales") }}{% endblock %}

{% block head %}
{# Données structurées schema.org : aident Google à comprendre le
   contenu de la page (image + fil d'Ariane) en vue de rich results. #}
<script type="application/ld+json">{{ structured_data | tojson }}</script>
<script type="application/ld+json">{{ breadcrumb_data | tojson }}</script>
{% endblock %}

{% block content %}
<div class="card-detail">
    {% if back_url %}
    <a class="back-link" href="{{ back_url }}">&larr; {{ back_label or _("Retour") }}</a>
    {% else %}
    <a class="back-link" href="{{ url_for('home.index') }}">&larr; {{ _("Retour au diaporama") }}</a>
    {% endif %}

    <div class="card-image-wrapper" id="image-wrapper" title="{{ _("Cliquer pour agrandir") }}">
        <img id="img-recto"
             class="face-image"
             src="{{ url_for('home.images', filename=images.recto) }}"
             alt="{{ recto_alt }}">
        {% if config.POSTCARDS_VERSO %}
        <img id="img-verso"
             class="face-image hidden-face"
             src="{{ url_for('home.images', filename=images.verso) }}"
             alt="{{ _("Verso de la carte %(id)s", id=card.id) }}">

        <div class="face-toggle" id="face-toggle" title="{{ _("Afficher l'autre face") }}">
            <img id="toggle-thumb"
                 src="{{ url_for('home.images', filename=images_small.verso) }}"
                 alt="{{ _("Aperçu de l'autre face") }}">
        </div>
        {% endif %}
    </div>

    <div class="fullscreen-overlay" id="fullscreen-overlay">
        <img id="fullscreen-img" alt="">
    </div>

    <div class="card-meta">
        <h1>{{ card_title }}</h1>
        {% if card.title2 %}
        <h2>{{ card.title2 }}</h2>
        {% endif %}

        {% if card.description %}
        <p>{{ card.description }}</p>
        {% endif %}

        {% if card.collections %}
        <div class="collections">
            {% for c in card.collections %}
            <span>{{ c }}</span>
            {% endfor %}
        </div>
        {% endif %}

        {% if card.coord and card.coord[0] is not none and card.coord[1] is not none %}
        {% set lat = card.coord[0] %}
        {% set lon = card.coord[1] %}
        <div class="card-gps-links">
            <a class="gps-link"
               href="https://www.openstreetmap.org/?mlat={{ lat }}&mlon={{ lon }}&zoom=15"
               target="_blank" rel="noopener noreferrer">
                {{ _("OpenStreetMap") }}
            </a>
            <a class="gps-link"
               href="https://www.google.com/maps?q={{ lat }},{{ lon }}"
               target="_blank" rel="noopener noreferrer">
                {{ _("Google Maps") }}
            </a>
            <a class="gps-link"
               href="https://www.google.com/maps?layer=c&cbll={{ lat }},{{ lon }}"
               target="_blank" rel="noopener noreferrer">
                {{ _("Street View") }}
            </a>
        </div>
        {% endif %}

        {# canonical_url est désormais calculée côté vue (home.card_detail)
           et passée directement au template, sans ?back=. #}
        {% set share_url = canonical_url | urlencode %}
        {% set share_text = card_title | urlencode %}
        {% set share_text_with_url = (card_title ~ " " ~ canonical_url) | urlencode %}
        {% set share_image = (og_image | urlencode) if og_image else "" %}

        <div class="card-share">
            <span class="card-share__label">{{ _("Partager") }}</span>
            <div class="card-share-links">
                <button type="button"
                        class="gps-link share-link share-link--native"
                        id="share-native" hidden>
                    {{ _("Partager…") }}
                </button>
                <a class="gps-link share-link share-link--facebook"
                   href="https://www.facebook.com/sharer/sharer.php?u={{ share_url }}"
                   target="_blank" rel="noopener noreferrer"
                   title="{{ _("Partager sur Facebook") }}">
                    Facebook
                </a>
                <a class="gps-link share-link share-link--x"
                   href="https://twitter.com/intent/tweet?url={{ share_url }}&amp;text={{ share_text }}"
                   target="_blank" rel="noopener noreferrer"
                   title="{{ _("Partager sur X") }}">
                    X
                </a>
                <a class="gps-link share-link share-link--bluesky"
                   href="https://bsky.app/intent/compose?text={{ share_text_with_url }}"
                   target="_blank" rel="noopener noreferrer"
                   title="{{ _("Partager sur Bluesky") }}">
                    Bluesky
                </a>
                <button type="button"
                        class="gps-link share-link share-link--mastodon"
                        id="share-mastodon"
                        data-text="{{ card_title }}"
                        data-url="{{ canonical_url }}"
                        title="{{ _("Partager sur Mastodon") }}">
                    Mastodon
                </button>
                <a class="gps-link share-link share-link--whatsapp"
                   href="https://wa.me/?text={{ share_text }}%20{{ share_url }}"
                   target="_blank" rel="noopener noreferrer"
                   title="{{ _("Partager sur WhatsApp") }}">
                    WhatsApp
                </a>
                <a class="gps-link share-link share-link--pinterest"
                   href="https://pinterest.com/pin/create/button/?url={{ share_url }}&amp;media={{ share_image }}&amp;description={{ share_text }}"
                   target="_blank" rel="noopener noreferrer"
                   title="{{ _("Épingler sur Pinterest") }}">
                    Pinterest
                </a>
                <a class="gps-link share-link share-link--email"
                   href="mailto:?subject={{ share_text }}&amp;body={{ share_url }}"
                   title="{{ _("Partager par e-mail") }}">
                    {{ _("E-mail") }}
                </a>
                <button type="button"
                        class="gps-link share-link share-link--copy"
                        id="share-copy"
                        data-url="{{ canonical_url }}"
                        title="{{ _("Copier le lien") }}">
                    {{ _("Copier le lien") }}
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    (function () {
        "use strict";

        var i18n = {
            rectoPreview: "{{ _("Aperçu du recto") }}",
            versoPreview: "{{ _("Aperçu du verso") }}",
            copyLink: "{{ _("Copier le lien") }}",
            linkCopied: "{{ _("Lien copié !") }}",
            share: "{{ _("Partager…") }}",
            shareTitle: {{ card_title | tojson }},
            mastodonPrompt: "{{ _("Sur quelle instance Mastodon avez-vous un compte ? (ex. mastodon.social)") }}"
        };

        var rectoUrl = "{{ url_for('home.images', filename=images.recto) }}";
        var rectoThumbUrl = "{{ url_for('home.images', filename=images_small.recto) }}";
        {% if config.POSTCARDS_VERSO %}
        var versoUrl = "{{ url_for('home.images', filename=images.verso) }}";
        var versoThumbUrl = "{{ url_for('home.images', filename=images_small.verso) }}";
        {% else %}
        var versoUrl = null;
        var versoThumbUrl = null;
        {% endif %}

        var imgRecto = document.getElementById("img-recto");
        var imgVerso = document.getElementById("img-verso");
        var toggle = document.getElementById("face-toggle");
        var thumb = document.getElementById("toggle-thumb");
        var wrapper = document.getElementById("image-wrapper");
        var overlay = document.getElementById("fullscreen-overlay");
        var overlayImg = document.getElementById("fullscreen-img");

        var showingVerso = false;

        // Absent si [DEFAULT] postcards_verso = false (bascule vers le
        // verso non rendue dans le template).
        if (toggle) {
            toggle.addEventListener("click", function (event) {
                event.stopPropagation();
                showingVerso = !showingVerso;

                if (showingVerso) {
                    imgRecto.classList.add("hidden-face");
                    imgVerso.classList.remove("hidden-face");
                    thumb.src = rectoThumbUrl;
                    thumb.alt = i18n.rectoPreview;
                } else {
                    imgVerso.classList.add("hidden-face");
                    imgRecto.classList.remove("hidden-face");
                    thumb.src = versoThumbUrl;
                    thumb.alt = i18n.versoPreview;
                }
            });
        }

        // Plein écran : clic sur l'image principale
        wrapper.addEventListener("click", function () {
            var currentUrl = showingVerso ? versoUrl : rectoUrl;
            var currentAlt = showingVerso ? imgVerso.alt : imgRecto.alt;
            overlayImg.src = currentUrl;
            overlayImg.alt = currentAlt;
            overlay.classList.add("visible");
        });

        overlay.addEventListener("click", function () {
            overlay.classList.remove("visible");
        });

        document.addEventListener("keydown", function (event) {
            if (event.key === "Escape") {
                overlay.classList.remove("visible");
            }
        });

        // Partage natif (mobile principalement) : affiché seulement si l'API
        // est disponible, en plus des liens réseaux sociaux classiques.
        var nativeShareBtn = document.getElementById("share-native");
        var copyBtn = document.getElementById("share-copy");

        if (nativeShareBtn && navigator.share) {
            nativeShareBtn.hidden = false;
            nativeShareBtn.addEventListener("click", function () {
                navigator.share({
                    title: i18n.shareTitle,
                    url: copyBtn ? copyBtn.getAttribute("data-url") : window.location.href
                }).catch(function () {
                    // Annulation par l'utilisateur ou erreur : rien à faire.
                });
            });
        }

        if (copyBtn) {
            copyBtn.addEventListener("click", function () {
                var url = copyBtn.getAttribute("data-url") || window.location.href;

                function showCopied() {
                    copyBtn.textContent = i18n.linkCopied;
                    copyBtn.classList.add("share-link--copied");
                    setTimeout(function () {
                        copyBtn.textContent = i18n.copyLink;
                        copyBtn.classList.remove("share-link--copied");
                    }, 2000);
                }

                if (navigator.clipboard && navigator.clipboard.writeText) {
                    navigator.clipboard.writeText(url).then(showCopied).catch(function () {
                        window.prompt(i18n.copyLink, url);
                    });
                } else {
                    window.prompt(i18n.copyLink, url);
                }
            });
        }

        // Mastodon est fédéré : il n'existe pas d'URL de partage unique
        // valable pour tout le monde. On demande l'instance de
        // l'utilisateur (mémorisée pour les partages suivants) puis on
        // ouvre son formulaire de partage sur cette instance.
        var mastodonBtn = document.getElementById("share-mastodon");
        var MASTODON_STORAGE_KEY = "flpostcards:mastodonInstance";

        function sanitizeInstance(raw) {
            if (!raw) {
                return "";
            }
            var value = raw.trim().replace(/^https?:\/\//i, "");
            value = value.split("/")[0];
            return value;
        }

        if (mastodonBtn) {
            mastodonBtn.addEventListener("click", function () {
                var savedInstance = "";
                try {
                    savedInstance = window.localStorage.getItem(MASTODON_STORAGE_KEY) || "";
                } catch (e) {
                    savedInstance = "";
                }

                var input = window.prompt(i18n.mastodonPrompt, savedInstance || "mastodon.social");
                var instance = sanitizeInstance(input);
                if (!instance) {
                    return;
                }

                try {
                    window.localStorage.setItem(MASTODON_STORAGE_KEY, instance);
                } catch (e) {
                    // Stockage indisponible (navigation privée, etc.) : tant pis.
                }

                var text = mastodonBtn.getAttribute("data-text") + " " + mastodonBtn.getAttribute("data-url");
                var shareUrl = "https://" + instance + "/share?text=" + encodeURIComponent(text);
                window.open(shareUrl, "_blank", "noopener,noreferrer");
            });
        }
    })();
</script>
{% endblock %}