<?php ob_start(); ?>

<div class="bg-white rounded-xl shadow-sm border border-gray-100">
    <div class="p-6 border-b border-gray-100">
        <h3 class="text-lg font-semibold text-gray-800">
            <i class="fas fa-language mr-2 text-indigo-600"></i>Langues supportées
        </h3>
        <p class="text-sm text-gray-500 mt-1">Langues disponibles pour la plateforme (Français, Bambara, Peulh, Soninké)</p>
    </div>
    
    <div class="p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <?php foreach ($langues as $langue): ?>
            <div class="p-4 border border-gray-200 rounded-lg hover:border-indigo-300 transition">
                <div class="flex items-center justify-between mb-3">
                    <span class="text-2xl font-bold text-indigo-600"><?= strtoupper($langue['code']) ?></span>
                    <?php if ($langue['is_active']): ?>
                        <span class="px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full">Actif</span>
                    <?php else: ?>
                        <span class="px-2 py-1 text-xs bg-gray-100 text-gray-500 rounded-full">Inactif</span>
                    <?php endif; ?>
                </div>
                <p class="font-medium text-gray-800"><?= htmlspecialchars($langue['nom']) ?></p>
                <p class="text-sm text-gray-500"><?= htmlspecialchars($langue['nom_local'] ?? $langue['nom']) ?></p>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<div class="mt-6 bg-blue-50 border border-blue-200 rounded-xl p-6">
    <div class="flex items-start">
        <i class="fas fa-info-circle text-blue-500 mt-1 mr-3"></i>
        <div>
            <h4 class="font-medium text-blue-800">Support vocal multilingue</h4>
            <p class="text-sm text-blue-700 mt-1">
                La plateforme supporte la reconnaissance vocale (STT) et la synthèse vocale (TTS) pour permettre 
                aux utilisateurs d'interagir naturellement dans leur langue maternelle. Cette fonctionnalité est 
                particulièrement adaptée aux contextes où l'alphabétisation peut être un obstacle.
            </p>
        </div>
    </div>
</div>

<?php 
$content = ob_get_clean();
$title = 'Langues - ' . APP_NAME;
$pageTitle = 'Gestion des Langues';
include VIEWS_PATH . '/layouts/main.php';
?>
