Show.vue

<script setup lang="ts">
import { Head, Link } from '@inertiajs/vue3';
import type { Student } from '@/types/student';
import * as studentsRoute from '@/routes/students';
import { Button } from '@/components/ui/button';

import { ArrowLeft, Mail, Globe, Languages } from 'lucide-vue-next';

interface Props {
    student: Student;
}

defineProps<Props>();
</script>

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

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

            <span>Profil de l'étudiant</span>

            <div class="space-y-6 bg-white">
                <!-- Photo et infos principales -->
                <div class="flex items-start gap-6 bg-white">
                    <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">
                            <span>
                                {{ student.sexe === 'male' ? 'Masculin' : student.sexe === 'female' ? 'Féminin' : 'Autre' }}
                            </span>
                            <span variant="outline" class="flex items-center gap-1">
                                <Globe class="h-3 w-3" />
                                {{ student.country }}
                            </span>
                            <span variant="outline" class="flex items-center gap-1">
                                <Languages class="h-3 w-3" />
                                {{ student.language === 'fr' ? 'Français' : 'English' }}
                            </span>
                        </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">
                        <span v-for="program in student.programs" :key="program" variant="secondary" class="px-3 py-1 text-sm">
                            {{ program.toUpperCase() }}
                        </span>
                    </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="studentsRoute.edit(student.id).url">
                        <Button>Modifier</Button>
                    </Link>
                </div>
            </div>
        </div>
    </div>
</template>