<script setup>
import { ref } from 'vue'

const utilisateur = ref({ nom: 'Alice', admin: true, avatarUrl: '/avatars/alice.png' })
const afficherDetails = ref(false)
const fruits = ref(['pomme', 'banane', 'kiwi'])
const lienSite = ref('https://vuejs.org')
</script>

<template>
  <!-- v-bind (ou raccourci :) : lie un attribut HTML à une expression JS -->
  <img :src="utilisateur.avatarUrl" :alt="`Avatar de ${utilisateur.nom}`" />
  <a :href="lienSite" target="_blank">Documentation</a>

  <!-- v-bind sur class : objet -> clé activée si valeur truthy -->
  <div :class="{ 'badge-admin': utilisateur.admin, 'badge-user': !utilisateur.admin }">
    {{ utilisateur.nom }}
  </div>

  <!-- v-bind sur style : objet camelCase -->
  <p :style="{ color: utilisateur.admin ? 'crimson' : 'gray', fontWeight: 'bold' }">
    Statut : {{ utilisateur.admin ? 'Administrateur' : 'Membre' }}
  </p>

  <!-- v-on (ou raccourci @) : écoute d'événement -->
  <button @click="afficherDetails = !afficherDetails">
    {{ afficherDetails ? 'Masquer' : 'Afficher' }} les détails
  </button>

  <!-- v-if / v-else-if / v-else : rendu conditionnel (ajoute/retire du DOM) -->
  <div v-if="afficherDetails">
    <p v-if="utilisateur.admin">Accès complet au panneau d'administration.</p>
    <p v-else>Accès limité aux fonctionnalités standard.</p>
  </div>

  <!-- v-show : bascule display:none, l'élément reste dans le DOM (mieux pour du toggle fréquent) -->
  <p v-show="afficherDetails">Section visible/masquée sans recréer le DOM.</p>

  <!-- v-for : itération, :key OBLIGATOIRE pour aider Vue à réconcilier la liste -->
  <ul>
    <li v-for="(fruit, index) in fruits" :key="fruit">
      {{ index + 1 }}. {{ fruit }}
    </li>
  </ul>

  <!-- v-for sur un objet -->
  <ul>
    <li v-for="(valeur, cle) in utilisateur" :key="cle">{{ cle }} : {{ valeur }}</li>
  </ul>

  <!-- v-for avec plage numérique -->
  <span v-for="n in 5" :key="n">{{ n }} </span>

  <!-- Modificateurs d'événements : évitent le boilerplate preventDefault/stopPropagation -->
  <form @submit.prevent="() => console.log('formulaire soumis sans reload')">
    <input @keyup.enter="() => console.log('Entrée pressée')" />
    <button type="submit">Envoyer</button>
  </form>
</template>

<!-- v-for + v-if sur le MÊME élément est interdit en Vue 3 (priorité de v-for) -->
<!-- Mauvais : -->
<li v-for="item in items" v-if="item.actif" :key="item.id">{{ item.nom }}</li>

<!-- Bon : filtrer en amont avec une computed, ou englober dans un <template> -->
<template v-for="item in items" :key="item.id">
  <li v-if="item.actif">{{ item.nom }}</li>
</template>