{% macro share_buttons(page_url, title, summary=None) %}
<div class="social-share-container" style="display:inline-block;">
    <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="shareDropdown-{{ title|replace(' ', '_')|truncate(10, true, '') }}" data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fas fa-share-alt"></i> Compartir
        </button>
        <ul class="dropdown-menu" aria-labelledby="shareDropdown-{{ title|replace(' ', '_')|truncate(10, true, '') }}">
            <li><a class="dropdown-item" href="https://www.facebook.com/sharer/sharer.php?u={{ page_url }}" onclick="window.open(this.href, '_blank', 'width=600,height=400'); return false;"><i class="fab fa-facebook-f" style="color:#3b5998; margin-right:8px;"></i> Facebook</a></li>
            <li><a class="dropdown-item" href="https://twitter.com/intent/tweet?url={{ page_url }}&text={{ title }}" onclick="window.open(this.href, '_blank', 'width=600,height=400'); return false;"><i class="fab fa-x-twitter" style="color:#1DA1F2; margin-right:8px;"></i> Twitter</a></li>
            <li><a class="dropdown-item" href="https://www.linkedin.com/sharing/share-offsite/?url={{ page_url }}" onclick="window.open(this.href, '_blank', 'width=600,height=400'); return false;"><i class="fab fa-linkedin-in" style="color:#0077b5; margin-right:8px;"></i> LinkedIn</a></li>
            <li><a class="dropdown-item" href="https://wa.me/?text={{ title }} {{ page_url }}" onclick="window.open(this.href, '_blank', 'width=600,height=400'); return false;"><i class="fab fa-whatsapp" style="color:#25D366; margin-right:8px;"></i> WhatsApp</a></li>
            <li><a class="dropdown-item" href="https://t.me/share/url?url={{ page_url }}&text={{ title }}" onclick="window.open(this.href, '_blank', 'width=600,height=400'); return false;"><i class="fab fa-telegram-plane" style="color:#0088cc; margin-right:8px;"></i> Telegram</a></li>
            <li><a class="dropdown-item" href="mailto:?subject={{ title }}&body={{ page_url }}"><i class="fas fa-envelope" style="color:#666666; margin-right:8px;"></i> Email</a></li>
            <li class="dropdown-divider"></li>
            <li><a class="dropdown-item share-copy-link" href="#" data-url="{{ page_url }}" onclick="copyToClipboard('{{ page_url }}'); return false;"><i class="fas fa-link" style="color:#6c757d; margin-right:8px;"></i> Copiar enlace</a></li>
        </ul>
    </div>
</div>

<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text)
        .then(() => {
            // Crear la notificación toast
            const toast = document.createElement('div');
            toast.className = 'share-toast';
            toast.innerHTML = `
                <div class="share-toast-content">
                    <i class="fas fa-check-circle"></i>
                    <span>Enlace copiado al portapapeles</span>
                </div>
            `;
            document.body.appendChild(toast);
            
            // Mostrar y luego ocultar
            setTimeout(() => toast.classList.add('show'), 100);
            setTimeout(() => {
                toast.classList.remove('show');
                setTimeout(() => document.body.removeChild(toast), 300);
            }, 3000);
        })
        .catch(err => {
            console.error('No se pudo copiar el texto: ', err);
            alert('No se pudo copiar el enlace. Por favor, inténtalo de nuevo.');
        });
}
</script>

<style>
    .social-share-container .dropdown-item:hover {
        background-color: #f8f9fa;
    }
    
    .social-share-container .dropdown-item i {
        min-width: 16px;
    }
    
    /* Estilo para la notificación toast */
    .share-toast {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%) translateY(100%);
        background-color: #333;
        color: #fff;
        padding: 12px 20px;
        border-radius: 4px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        z-index: 9999;
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
    .share-toast.show {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
    
    .share-toast-content {
        display: flex;
        align-items: center;
    }
    
    .share-toast i {
        margin-right: 8px;
        color: #4CAF50;
    }
</style>
{% endmacro %}