{# Boutons de partage d'une conférence.

   Variables :
     url   — adresse absolue et publique de la page à partager
     title — titre de la conférence

   Ce sont de simples liens vers les URL de partage officielles : aucun
   script WhatsApp, Facebook ou Telegram n'est chargé sur le site, ces
   plateformes n'apprennent donc rien de la visite tant que le visiteur ne
   clique pas. Le rendu est fait côté serveur : les boutons fonctionnent
   même sans JavaScript.

   TikTok n'expose aucune URL de partage web (son kit de partage est réservé
   aux applications mobiles) : sur téléphone, le bouton « Plus » ouvre la
   feuille de partage du système, qui propose TikTok s'il est installé. #}
{% set share_text = 'Écoutez « ' ~ title ~ ' » — conférence de Serigne Sam Mbaye' %}

<div class="flex flex-wrap items-center gap-2">
    <span class="mr-1 text-xs font-semibold uppercase tracking-wider text-sand-dim">Partager</span>

    <a class="pp-btn h-10 w-10 hover:text-[#25D366]" title="Partager sur WhatsApp" aria-label="Partager sur WhatsApp"
       href="https://wa.me/?text={{ (share_text ~ ' ' ~ url)|url_encode }}" target="_blank" rel="noopener noreferrer">
        <svg viewBox="0 0 24 24" width="19" height="19" aria-hidden="true"><path fill="currentColor" d="M12 2a10 10 0 0 0-8.6 15L2 22l5.2-1.4A10 10 0 1 0 12 2zm0 1.8a8.2 8.2 0 1 1-4.2 15.2l-.3-.2-3 .8.8-3-.2-.3A8.2 8.2 0 0 1 12 3.8zm-3.4 4c-.2 0-.5.1-.7.4-.3.3-.9.9-.9 2.1s.9 2.4 1 2.6c.1.2 1.7 2.8 4.3 3.8 2.1.8 2.5.7 3 .6.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2l-.6-.3-1.5-.7c-.2-.1-.4-.1-.5.1l-.7.9c-.1.2-.3.2-.5.1a6.6 6.6 0 0 1-3.3-2.9c-.1-.2 0-.4.1-.5l.4-.5c.1-.2.2-.3.3-.5v-.4l-.7-1.7c-.2-.4-.4-.4-.5-.4z"/></svg>
    </a>

    <a class="pp-btn h-10 w-10 hover:text-[#1877F2]" title="Partager sur Facebook" aria-label="Partager sur Facebook"
       href="https://www.facebook.com/sharer/sharer.php?u={{ url|url_encode }}" target="_blank" rel="noopener noreferrer">
        <svg viewBox="0 0 24 24" width="19" height="19" aria-hidden="true"><path fill="currentColor" d="M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12z"/></svg>
    </a>

    <a class="pp-btn h-10 w-10 hover:text-[#229ED9]" title="Partager sur Telegram" aria-label="Partager sur Telegram"
       href="https://t.me/share/url?url={{ url|url_encode }}&text={{ share_text|url_encode }}" target="_blank" rel="noopener noreferrer">
        <svg viewBox="0 0 24 24" width="19" height="19" aria-hidden="true"><path fill="currentColor" d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm4.6 6.8-1.6 7.4c-.1.5-.4.7-.9.4l-2.4-1.8-1.2 1.1c-.1.1-.2.2-.5.2l.2-2.5 4.5-4c.2-.2 0-.3-.3-.1l-5.5 3.5-2.4-.7c-.5-.2-.5-.5.1-.8l9.4-3.6c.4-.2.8.1.6.9z"/></svg>
    </a>

    {# Copie du lien et feuille de partage du système : pilotées par
       public/js/podcast-player.js, qui n'agit que si JavaScript est actif. #}
    <button type="button" class="pp-btn h-10 w-10" data-share-copy="{{ url }}"
            title="Copier le lien" aria-label="Copier le lien">
        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 13a5 5 0 0 0 7.5.5l2-2a5 5 0 0 0-7-7l-1.2 1.1"/><path d="M14 11a5 5 0 0 0-7.5-.5l-2 2a5 5 0 0 0 7 7l1.2-1.1"/></svg>
    </button>
</div>