{% extends 'base.html' %}
{% load custom_filters %}
{% block title %}Shiriki Taarifa{% endblock %}

{% block content %}
<style>
    .share-container {
        min-height: calc(100vh - 200px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
    }
    
    .share-card {
        background: var(--white);
        max-width: 600px;
        width: 100%;
        padding: 2rem;
        border-radius: 1.5rem;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    }
    
    .share-card h2 {
        color: var(--primary);
        margin-bottom: 1rem;
    }
    
    .message-box {
        background: #F5F5F5;
        padding: 1rem;
        border-radius: 1rem;
        margin: 1rem 0;
        white-space: pre-wrap;
        font-family: monospace;
        font-size: 0.9rem;
        border: 1px solid var(--light-gray);
    }
    
    .btn-whatsapp {
        background: #25D366;
        color: white;
        padding: 0.8rem;
        border-radius: 0.75rem;
        font-weight: 600;
        text-align: center;
        display: inline-block;
        width: 48%;
        text-decoration: none;
    }
    
    .btn-copy {
        background: var(--primary);
        color: white;
        padding: 0.8rem;
        border-radius: 0.75rem;
        font-weight: 600;
        text-align: center;
        display: inline-block;
        width: 48%;
        border: none;
        cursor: pointer;
    }
</style>

<div class="share-container">
    <div class="share-card">
        <h2><i class="fas fa-share-alt"></i> Shiriki Taarifa</h2>
        <p>Nakili ujumbe huu au utume kwa WhatsApp:</p>
        
        <div class="message-box" id="messageBox">
            {{ message|linebreaks }}
        </div>
        
        <div style="display: flex; gap: 1rem; justify-content: space-between;">
            <button class="btn-copy" onclick="copyMessage()">
                <i class="fas fa-copy"></i> Nakili
            </button>
            <a href="https://wa.me/?text={{ message|urlencode }}" target="_blank" class="btn-whatsapp">
                <i class="fab fa-whatsapp"></i> Tuma WhatsApp
            </a>
        </div>
        
        <div style="margin-top: 1rem; text-align: center;">
            <a href="javascript:history.back()" style="color: var(--gray);">← Rudi nyuma</a>
        </div>
    </div>
</div>

<script>
function copyMessage() {
    const messageBox = document.getElementById('messageBox');
    const text = messageBox.innerText;
    
    navigator.clipboard.writeText(text).then(() => {
        alert('Ujumbe umenakiliwa! Sasa unaweza kubandika kwenye SMS au WhatsApp.');
    });
}
</script>
{% endblock %}