Show.vue

<!-- ========================================================================= -->
<!-- resources/js/Pages/Students/Show.vue - AFFICHER UN ÉTUDIANT -->
<!-- ========================================================================= -->
<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import type { Student } from '@/types/student';
import AuthenticatedLayout from '@/layouts/AuthenticatedLayout.vue';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { ArrowLeft, Mail, Globe, Languages } from 'lucide-vue-next';

interface Props {
    student: Student;
}

defineProps<Props>();
</script>

<template>
    <Head :title="student.name" />

    <AuthenticatedLayout>
        <div class="py-12">
            <div class="mx-auto max-w-4xl space-y-6 sm:px-6 lg:px-8">
                <!-- Bouton retour -->
                <Link :href="route('students.index')">
                    <Button variant="ghost" size="sm">
                        <ArrowLeft class="mr-2 h-4 w-4" />
                        Retour à la liste
                    </Button>
                </Link>

                <Card>
                    <CardHeader>
                        <CardTitle>Profil de l'étudiant</CardTitle>
                    </CardHeader>
                    <CardContent class="space-y-6">
                        <!-- Photo et infos principales -->
                        <div class="flex items-start gap-6">
                            <img
                                v-if="student.profile_url"
                                :src="student.profile_url"
                                :alt="student.name"
                                class="h-32 w-32 rounded-full border-2 object-cover"
                            />
                            <div
                                v-else
                                class="flex h-32 w-32 items-center justify-center rounded-full bg-gray-200 text-4xl font-bold dark:bg-gray-700"
                            >
                                {{ student.name.charAt(0).toUpperCase() }}
                            </div>

                            <div class="flex-1 space-y-3">
                                <div>
                                    <h2 class="text-3xl font-bold">{{ student.name }}</h2>
                                    <p class="mt-1 flex items-center gap-2 text-muted-foreground">
                                        <Mail class="h-4 w-4" />
                                        {{ student.email }}
                                    </p>
                                </div>

                                <div class="flex flex-wrap gap-2">
                                    <Badge>
                                        {{ student.sexe === 'male' ? 'Masculin' : student.sexe === 'female' ? 'Féminin' : 'Autre' }}
                                    </Badge>
                                    <Badge variant="outline" class="flex items-center gap-1">
                                        <Globe class="h-3 w-3" />
                                        {{ student.country }}
                                    </Badge>
                                    <Badge variant="outline" class="flex items-center gap-1">
                                        <Languages class="h-3 w-3" />
                                        {{ student.language === 'fr' ? 'Français' : 'English' }}
                                    </Badge>
                                </div>
                            </div>
                        </div>

                        <!-- Programmes -->
                        <div class="space-y-2">
                            <h3 class="text-lg font-semibold">Programmes maîtrisés</h3>
                            <div class="flex flex-wrap gap-2">
                                <Badge v-for="program in student.programs" :key="program" variant="secondary" class="px-3 py-1 text-sm">
                                    {{ program.toUpperCase() }}
                                </Badge>
                            </div>
                        </div>

                        <!-- Bio -->
                        <div v-if="student.bio" class="space-y-2">
                            <h3 class="text-lg font-semibold">Biographie</h3>
                            <p class="leading-relaxed text-muted-foreground">
                                {{ student.bio }}
                            </p>
                        </div>

                        <!-- Date de création -->
                        <div class="border-t pt-4 text-sm text-muted-foreground">Membre depuis le {{ student.created_at }}</div>

                        <!-- Actions -->
                        <div class="flex gap-3 pt-4">
                            <Link :href="route('students.edit', student.id)">
                                <Button>Modifier</Button>
                            </Link>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </div>
    </AuthenticatedLayout>
</template>