{{--
    Dashboard Condomino - Comunicazioni Recenti
    Modulo per le comunicazioni recenti
--}}

<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
    <div class="p-6">
        <div class="flex items-center justify-between mb-6">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Comunicazioni Recenti</h3>
            <a href="{{ route('condomino.comunicazioni.index') }}" 
               class="text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400">
                Visualizza tutte
            </a>
        </div>
        
        <div class="space-y-4">
            {{-- Comunicazioni fittizie per ora, da sostituire con dati reali --}}
            
            <!-- Comunicazione 1 -->
            <div class="flex items-start space-x-3 py-3 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-bullhorn text-blue-600 text-sm"></i>
                    </div>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm text-gray-900 dark:text-white">
                        <span class="font-medium">Assemblea Straordinaria</span>
                    </p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">
                        Convocazione per il 15 Marzo 2024 - Lavori di ristrutturazione
                    </p>
                    <p class="text-xs text-blue-600 mt-1">2 giorni fa</p>
                </div>
                <div class="flex-shrink-0">
                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
                        Nuovo
                    </span>
                </div>
            </div>
            
            <!-- Comunicazione 2 -->
            <div class="flex items-start space-x-3 py-3 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-euro-sign text-green-600 text-sm"></i>
                    </div>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm text-gray-900 dark:text-white">
                        <span class="font-medium">Rata Marzo 2024</span>
                    </p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">
                        Scadenza 31 Marzo 2024 - Importo €450,00
                    </p>
                    <p class="text-xs text-blue-600 mt-1">5 giorni fa</p>
                </div>
            </div>
            
            <!-- Comunicazione 3 -->
            <div class="flex items-start space-x-3 py-3 border-b border-gray-200 dark:border-gray-700 last:border-b-0">
                <div class="flex-shrink-0">
                    <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-tools text-yellow-600 text-sm"></i>
                    </div>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm text-gray-900 dark:text-white">
                        <span class="font-medium">Manutenzione Ascensore</span>
                    </p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">
                        Interruzione servizio 10 Marzo dalle 9:00 alle 17:00
                    </p>
                    <p class="text-xs text-blue-600 mt-1">1 settimana fa</p>
                </div>
            </div>
            
        </div>
        
        @if(false) {{-- Quando non ci sono comunicazioni --}}
        <div class="text-center py-8">
            <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fas fa-envelope-open text-gray-400 text-2xl"></i>
            </div>
            <p class="text-gray-500 dark:text-gray-400">Nessuna comunicazione recente</p>
        </div>
        @endif
        
    </div>
</div>