{% extends 'public/base.html' %}
{% load static %}

{% block title %}{{ announcement.title }} - {{ website_settings.site_name|default:'Desa Pulosarok' }}{% endblock %}

{% block meta_description %}{{ announcement.excerpt|default:announcement.content|truncatewords:20 }}{% endblock %}

{% block og_title %}{{ announcement.title }}{% endblock %}
{% block og_description %}{{ announcement.excerpt|default:announcement.content|truncatewords:20 }}{% endblock %}

{% block extra_css %}
<style>
    .announcement-content {
        line-height: 1.8;
    }
    
    .announcement-content h1, .announcement-content h2, .announcement-content h3, .announcement-content h4, .announcement-content h5, .announcement-content h6 {
        margin-top: 2rem;
        margin-bottom: 1rem;
        font-weight: 600;
        color: var(--primary-color);
    }
    
    .announcement-content p {
        margin-bottom: 1.5rem;
    }
    
    .announcement-content img {
        max-width: 100%;
        height: auto;
        border-radius: 8px;
        margin: 1.5rem 0;
    }
    
    .announcement-content blockquote {
        border-left: 4px solid var(--primary-color);
        padding-left: 1.5rem;
        margin: 1.5rem 0;
        font-style: italic;
        background-color: rgba(59, 130, 246, 0.05);
        padding: 1rem 1.5rem;
        border-radius: 0 8px 8px 0;
    }
    
    .announcement-content ul, .announcement-content ol {
        margin: 1rem 0;
        padding-left: 2rem;
    }
    
    .announcement-content li {
        margin-bottom: 0.5rem;
    }
    
    .type-indicator {
        border-left: 4px solid;
    }
    
    .type-indicator.info {
        border-left-color: #3B82F6;
    }
    
    .type-indicator.warning {
        border-left-color: #F59E0B;
    }
    
    .type-indicator.urgent {
        border-left-color: #EF4444;
    }
    
    .type-indicator.schedule {
        border-left-color: #10B981;
    }
    
    .type-indicator.event {
        border-left-color: #8B5CF6;
    }
    
    .type-indicator.service {
        border-left-color: #06B6D4;
    }
    
    .type-indicator.summonote {
        border-left-color: #F97316;
    }
    
    /* Summonote Content Styling for Public */
    .summonote-content-public {
        border: 2px solid #F97316;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.02), rgba(251, 146, 60, 0.02));
        padding: 2rem;
        position: relative;
        margin: 1.5rem 0;
    }
    
    .summonote-content-public::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(135deg, #F97316, #FB923C);
        border-radius: 12px 12px 0 0;
    }
    
    .summonote-content-public h1, .summonote-content-public h2, .summonote-content-public h3,
    .summonote-content-public h4, .summonote-content-public h5, .summonote-content-public h6 {
        color: #F97316 !important;
        font-weight: 700;
    }
    
    .summonote-content-public p {
        color: #374151;
        line-height: 1.8;
    }
    
    .summonote-content-public strong, .summonote-content-public b {
        color: #F97316;
        font-weight: 700;
    }
    
    .summonote-content-public ul, .summonote-content-public ol {
        color: #374151;
    }
    
    .summonote-content-public li {
        margin-bottom: 0.5rem;
    }
    
    .summonote-content-public blockquote {
        border-left: 4px solid #F97316;
        background: rgba(249, 115, 22, 0.05);
        padding: 1rem 1.5rem;
        margin: 1.5rem 0;
        border-radius: 0 6px 6px 0;
        font-style: italic;
        color: #374151;
    }
    
    .dark .summonote-content-public {
        background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(251, 146, 60, 0.05));
    }
    
    .dark .summonote-content-public p,
    .dark .summonote-content-public ul,
    .dark .summonote-content-public ol,
    .dark .summonote-content-public li {
        color: #e5e7eb;
    }
    
    .dark .summonote-content-public blockquote {
        background: rgba(249, 115, 22, 0.1);
        color: #e5e7eb;
    }
    
    .contact-info {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(16, 185, 129, 0.05));
    }
    
    .priority-high {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(220, 38, 38, 0.1));
    }
    
    .priority-urgent {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
        border: 2px solid #EF4444;
    }
    
    .related-announcement-card {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .related-announcement-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    .dark .related-announcement-card:hover {
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    }
    
    .share-buttons {
        position: sticky;
        top: 100px;
    }
    
    .share-button {
        transition: all 0.3s ease;
    }
    
    .share-button:hover {
        transform: translateY(-2px);
    }
    
    @media (max-width: 640px) {
        .share-buttons {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 50;
        }
        
        .share-buttons .flex {
            flex-direction: column;
            gap: 0.5rem;
        }
        
        .share-button {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
    }
</style>
{% endblock %}

{% block content %}


<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="flex flex-col lg:flex-row gap-8">
        
        <article class="lg:w-2/3">
            
            <header class="mb-8">
                
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center space-x-4">
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium text-white
                            {% if announcement.announcement_type == 'info' %}bg-blue-500
                            {% elif announcement.announcement_type == 'warning' %}bg-yellow-500
                            {% elif announcement.announcement_type == 'urgent' %}bg-red-500
                            {% elif announcement.announcement_type == 'schedule' %}bg-green-500
                            {% elif announcement.announcement_type == 'event' %}bg-purple-500
                            {% elif announcement.announcement_type == 'service' %}bg-cyan-500
                            {% endif %}">
                            {% if announcement.announcement_type == 'info' %}<i class="fas fa-info-circle mr-2"></i>Informasi
                            {% elif announcement.announcement_type == 'warning' %}<i class="fas fa-exclamation-triangle mr-2"></i>Peringatan
                            {% elif announcement.announcement_type == 'urgent' %}<i class="fas fa-bolt mr-2"></i>Mendesak
                            {% elif announcement.announcement_type == 'schedule' %}<i class="fas fa-calendar mr-2"></i>Jadwal
                            {% elif announcement.announcement_type == 'event' %}<i class="fas fa-calendar-alt mr-2"></i>Acara
                            {% elif announcement.announcement_type == 'service' %}<i class="fas fa-cogs mr-2"></i>Layanan
                            {% endif %}
                        </span>
                        
                        {% if announcement.priority == 'high' or announcement.priority == 'urgent' %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-500 text-white">
                            <i class="fas fa-exclamation mr-1"></i>
                            {% if announcement.priority == 'urgent' %}Mendesak{% else %}Tinggi{% endif %}
                        </span>
                        {% endif %}
                        
                        {% if announcement.is_pinned %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-500 text-white">
                            <i class="fas fa-thumbtack mr-1"></i>Penting
                        </span>
                        {% endif %}
                        
                        {% if announcement.is_summonote %}
                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-orange-500 text-white">
                            <i class="fas fa-star mr-1"></i>Summonote
                        </span>
                        {% endif %}
                    </div>
                    
                    <div class="text-right text-sm text-gray-500 dark:text-gray-400">
                        <p class="flex items-center">
                            <i class="fas fa-calendar mr-1"></i>
                            {{ announcement.start_date|date:"d F Y" }}
                        </p>
                        {% if announcement.end_date %}
                        <p class="flex items-center text-orange-500">
                            <i class="fas fa-clock mr-1"></i>
                            Berlaku hingga {{ announcement.end_date|date:"d F Y" }}
                        </p>
                        {% endif %}
                    </div>
                </div>
                
                
                <h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4 leading-tight">
                    {{ announcement.title }}
                </h1>
                
                
                {% if announcement.excerpt %}
                <p class="text-lg text-gray-600 dark:text-gray-400 mb-6 leading-relaxed">
                    {{ announcement.excerpt }}
                </p>
                {% endif %}
                
                
                <div class="flex items-center justify-between py-4 border-t border-b border-gray-200 dark:border-gray-700">
                    <div class="flex items-center space-x-4">
                        <div class="flex items-center space-x-3">
                            <div class="w-10 h-10 bg-primary-600 rounded-full flex items-center justify-center">
                                <i class="fas fa-user text-white"></i>
                            </div>
                            <div>
                                <p class="font-medium text-gray-900 dark:text-white">{{ announcement.author.get_full_name|default:announcement.author.username }}</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">Penulis</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-right">
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            <i class="fas fa-calendar mr-1"></i>
                            {{ announcement.start_date|date:"d F Y" }}
                        </p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">
                            <i class="fas fa-clock mr-1"></i>
                            {{ announcement.start_date|date:"H:i" }} WIB
                        </p>
                    </div>
                </div>
            </header>
            
            
            <div class="announcement-content prose prose-lg max-w-none text-gray-700 dark:text-gray-300 type-indicator {{ announcement.announcement_type }} pl-6
                {% if announcement.priority == 'urgent' %}priority-urgent{% elif announcement.priority == 'high' %}priority-high{% endif %}
                {% if announcement.is_summonote %}summonote-content-public{% endif %}">
                {{ announcement.content|safe }}
            </div>
            
            
            {% if announcement.contact_person or announcement.contact_phone or announcement.location %}
            <div class="contact-info rounded-xl p-6 mt-8">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-phone mr-2 text-primary-600"></i>Informasi Kontak
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {% if announcement.contact_person %}
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
                            <i class="fas fa-user text-white text-sm"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Narahubung</p>
                            <p class="font-medium text-gray-900 dark:text-white">{{ announcement.contact_person }}</p>
                        </div>
                    </div>
                    {% endif %}
                    
                    {% if announcement.contact_phone %}
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
                            <i class="fas fa-phone text-white text-sm"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Telepon</p>
                            <a href="tel:{{ announcement.contact_phone }}" class="font-medium text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 transition-colors duration-200">
                                {{ announcement.contact_phone }}
                            </a>
                        </div>
                    </div>
                    {% endif %}
                    
                    {% if announcement.location %}
                    <div class="flex items-center space-x-3 md:col-span-2">
                        <div class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center">
                            <i class="fas fa-map-marker-alt text-white text-sm"></i>
                        </div>
                        <div>
                            <p class="text-sm text-gray-500 dark:text-gray-400">Lokasi</p>
                            <p class="font-medium text-gray-900 dark:text-white">{{ announcement.location }}</p>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endif %}
            
            
            {% if announcement.target_audience %}
            <div class="mt-6 p-4 bg-blue-50 dark:bg-blue-900 rounded-lg">
                <h4 class="text-sm font-semibold text-blue-900 dark:text-blue-100 mb-2">
                    <i class="fas fa-users mr-2"></i>Target Audiens
                </h4>
                <p class="text-sm text-blue-800 dark:text-blue-200">{{ announcement.target_audience }}</p>
            </div>
            {% endif %}
            
            
            <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-share-alt mr-2 text-primary-600"></i>Bagikan
                </h3>
                <div class="flex flex-wrap gap-3">
                    <button onclick="shareOnFacebook()" class="share-button inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                        <i class="fab fa-facebook-f mr-2"></i>Facebook
                    </button>
                    <button onclick="shareOnTwitter()" class="share-button inline-flex items-center px-4 py-2 bg-blue-400 text-white rounded-lg hover:bg-blue-500 transition-colors duration-200">
                        <i class="fab fa-twitter mr-2"></i>Twitter
                    </button>
                    <button onclick="shareOnWhatsApp()" class="share-button inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200">
                        <i class="fab fa-whatsapp mr-2"></i>WhatsApp
                    </button>
                    <button onclick="copyLink()" class="share-button inline-flex items-center px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors duration-200">
                        <i class="fas fa-link mr-2"></i>Copy Link
                    </button>
                </div>
            </div>
        </article>
        
        
        <aside class="lg:w-1/3">
            
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-user mr-2 text-primary-600"></i>Tentang Penulis
                </h3>
                <div class="flex items-center space-x-3 mb-4">
                    <div class="w-12 h-12 bg-primary-600 rounded-full flex items-center justify-center">
                        <i class="fas fa-user text-white"></i>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-900 dark:text-white">{{ announcement.author.get_full_name|default:announcement.author.username }}</h4>
                        <p class="text-sm text-gray-500 dark:text-gray-400">Penulis</p>
                    </div>
                </div>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    Penulis pengumuman ini dari tim redaksi Desa Pulosarok.
                </p>
            </div>
            
            
            {% if related_announcements %}
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                    <i class="fas fa-bullhorn mr-2 text-primary-600"></i>Pengumuman Terkait
                </h3>
                <div class="space-y-4">
                    {% for related in related_announcements %}
                    <article class="related-announcement-card bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
                        <div class="flex items-start space-x-3">
                            <div class="flex-shrink-0">
                                <div class="w-3 h-3 rounded-full mt-2
                                    {% if related.announcement_type == 'info' %}bg-blue-500
                                    {% elif related.announcement_type == 'warning' %}bg-yellow-500
                                    {% elif related.announcement_type == 'urgent' %}bg-red-500
                                    {% elif related.announcement_type == 'schedule' %}bg-green-500
                                    {% elif related.announcement_type == 'event' %}bg-purple-500
                                    {% elif related.announcement_type == 'service' %}bg-cyan-500
                                    {% endif %}">
                                </div>
                            </div>
                            <div class="flex-1 min-w-0">
                                <h4 class="text-sm font-medium text-gray-900 dark:text-white line-clamp-2 mb-1">
                                    <a href="{% url 'news:announcement_detail' related.slug %}" class="hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200">
                                        {{ related.title }}
                                    </a>
                                </h4>
                                <p class="text-xs text-gray-500 dark:text-gray-400">
                                    {{ related.start_date|date:"d M Y" }}
                                </p>
                            </div>
                        </div>
                    </article>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
            
            
            <div class="hidden lg:block">
                <div class="share-buttons">
                    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6">
                        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
                            <i class="fas fa-share-alt mr-2 text-primary-600"></i>Bagikan
                        </h3>
                        <div class="flex flex-col space-y-3">
                            <button onclick="shareOnFacebook()" class="share-button flex items-center justify-center w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
                                <i class="fab fa-facebook-f mr-2"></i>Facebook
                            </button>
                            <button onclick="shareOnTwitter()" class="share-button flex items-center justify-center w-full px-4 py-3 bg-blue-400 text-white rounded-lg hover:bg-blue-500 transition-colors duration-200">
                                <i class="fab fa-twitter mr-2"></i>Twitter
                            </button>
                            <button onclick="shareOnWhatsApp()" class="share-button flex items-center justify-center w-full px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200">
                                <i class="fab fa-whatsapp mr-2"></i>WhatsApp
                            </button>
                            <button onclick="copyLink()" class="share-button flex items-center justify-center w-full px-4 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors duration-200">
                                <i class="fas fa-link mr-2"></i>Copy Link
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </aside>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Share functions
    function shareOnFacebook() {
        const url = encodeURIComponent(window.location.href);
        const title = encodeURIComponent('{{ announcement.title }}');
        window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}&quote=${title}`, '_blank', 'width=600,height=400');
    }
    
    function shareOnTwitter() {
        const url = encodeURIComponent(window.location.href);
        const title = encodeURIComponent('{{ announcement.title }}');
        window.open(`https://twitter.com/intent/tweet?url=${url}&text=${title}`, '_blank', 'width=600,height=400');
    }
    
    function shareOnWhatsApp() {
        const url = encodeURIComponent(window.location.href);
        const title = encodeURIComponent('{{ announcement.title }}');
        window.open(`https://wa.me/?text=${title}%20${url}`, '_blank');
    }
    
    function copyLink() {
        navigator.clipboard.writeText(window.location.href).then(function() {
            // Show success message
            const button = event.target.closest('button');
            const originalText = button.innerHTML;
            button.innerHTML = '<i class="fas fa-check mr-2"></i>Copied!';
            button.classList.add('bg-green-600', 'hover:bg-green-700');
            button.classList.remove('bg-gray-600', 'hover:bg-gray-700');
            
            setTimeout(function() {
                button.innerHTML = originalText;
                button.classList.remove('bg-green-600', 'hover:bg-green-700');
                button.classList.add('bg-gray-600', 'hover:bg-gray-700');
            }, 2000);
        });
    }
</script>
{% endblock %}