Espace apprenant Angular

/* ===== Kit CSS Médiathèque : styles globaux (à copier dans src/styles.css) ===== */

/* 1. Variables : les couleurs utilisées partout. Changez-les pour changer l'allure du site. */
:root {
  --bg: #f7f7f8;
  --surface: #ffffff;
  --text: #222222;
  --muted: #6b7280;
  --line: #dddddd;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: #e8efff;
  --ok: #15803d;
  --ok-soft: #e3f4e8;
  --warn: #b45309;
  --warn-soft: #fff1de;
  --bad: #b91c1c;
  --bad-soft: #fde8e8;
  --radius: 8px;
  --shadow: none;
  --font: system-ui, sans-serif;
}

/* 2. Base */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.5; }
h1, h2, h3 { margin: 0 0 0.5rem; }
p { margin: 0 0 0.75rem; }
a { color: var(--primary); }

/* 3. Mise en page */
.container { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.muted { color: var(--muted); }

/* 4. Boutons */
.btn { border: 0; border-radius: var(--radius); padding: 0.5rem 1rem; font: inherit; cursor: pointer; background: var(--primary); color: #fff; }
.btn:hover:not(:disabled) { background: var(--primary-dark); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: var(--primary-soft); color: var(--primary); }
.btn-secondary:hover:not(:disabled) { background: var(--line); }

/* 5. Pastilles (badges) */
.badge { display: inline-block; padding: 0.1rem 0.6rem; border-radius: 999px; font-size: 0.8rem; background: var(--primary-soft); color: var(--primary); }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-bad { background: var(--bad-soft); color: var(--bad); }

/* 6. Formulaires */
label { display: block; margin-bottom: 0.25rem; }
input, select, textarea { font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.5rem 0.75rem; max-width: 100%; }
.field { margin-bottom: 1rem; }
.error { color: var(--bad); font-size: 0.875rem; margin-top: 0.25rem; }

/* 7. Cartes de formulaire et tableaux */
.form-card { max-width: 28rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.form-card input:not([type="checkbox"]), .form-card select, .form-card textarea { width: 100%; }
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); }
.table th { background: var(--primary-soft); color: var(--primary); }

/* En-tête */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.logo { font-size: 1.25rem; font-weight: 800; color: var(--primary); text-decoration: none; }
.site-nav { display: flex; gap: 1.25rem; }
.site-nav a { color: var(--text); text-decoration: none; font-weight: 600; }
.site-nav a:hover { color: var(--primary); }

/* Bandeau d'accueil */
.hero { padding: 3rem 0 2rem; }
.hero h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
.hero p { font-size: 1.1rem; color: var(--muted); max-width: 40rem; }

/* Pied de page */
.site-footer { margin-top: 3rem; padding: 1.5rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; text-align: center; }

<header class="site-header">
  <div class="container site-header__inner">
    <a class="logo" href="#">Médiathèque</a>
    <nav class="site-nav">
      <a href="#">Catalogue</a>
      <a href="#">Mes emprunts</a>
    </nav>
  </div>
</header>

<main class="container">
  <section class="hero">
    <h1>Bienvenue à la médiathèque</h1>
    <p>Recherchez un livre, un film ou un jeu, et empruntez-le en quelques clics.</p>
  </section>
</main>

<footer class="site-footer">
  <div class="container">Médiathèque · Formation Angular</div>
</footer>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component } from '@angular/core';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-media-card',
  templateUrl: './media-card.html',
  styleUrl: './media-card.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class MediaCard {
  title: string = 'Dune';
  author: string = 'Frank Herbert';
  type: 'livre' | 'film' | 'jeu' = 'livre';
  available: boolean = true;

  statusLabel(): string {
    return this.available ? 'Disponible' : 'Indisponible';
  }
}

<article class="card">
  <!-- {{ }} : affiche la valeur de la classe -->
  <h2>{{ title }}</h2>
  <p class="author">{{ author }}</p>
  <div class="meta">
    <span class="badge">{{ type }}</span>
    <span class="badge badge-ok">{{ statusLabel() }}</span>
  </div>
</article>

/* Carte d'un média */
.card { display: flex; flex-direction: column; gap: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.card h2 { font-size: 1.1rem; margin: 0; }
.card .author { margin: 0; color: var(--muted); }
.card .meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: auto; }
.card--out { opacity: 0.6; }
.card--top { border-color: var(--primary); }

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component } from '@angular/core';
import { MediaCard } from './media-card/media-card';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-root',
  imports: [MediaCard],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class App {}

<header class="site-header">
  <div class="container site-header__inner">
    <a class="logo" href="#">Médiathèque</a>
    <nav class="site-nav">
      <a href="#">Catalogue</a>
      <a href="#">Mes emprunts</a>
    </nav>
  </div>
</header>

<main class="container">
  <section class="hero">
    <h1>Bienvenue à la médiathèque</h1>
    <p>Recherchez un livre, un film ou un jeu, et empruntez-le en quelques clics.</p>
  </section>

  <section class="grid">
    <app-media-card />
    <app-media-card />
    <app-media-card />
  </section>
</main>

<footer class="site-footer">
  <div class="container">Médiathèque · Formation Angular</div>
</footer>

Tu es développeur front-end. Écris le CSS du composant Angular « [NOM DU COMPOSANT] » de l'application Médiathèque (le site d'une médiathèque : livres, films, jeux).

Contraintes :
- CSS simple, sans framework ni bibliothèque.
- Utilise uniquement les variables déjà définies dans styles.css : --bg, --surface, --text, --muted, --line, --primary, --primary-dark, --primary-soft, --ok, --ok-soft, --warn, --warn-soft, --bad, --bad-soft, --radius, --shadow, --font.
- Les classes globales suivantes existent déjà, ne les redéfinis pas : .container, .grid, .btn, .btn-secondary, .badge, .badge-ok, .badge-warn, .badge-bad, .field, .error, .muted.
- Couleur dominante du site : [VALEUR À COMPLÉTER, EXEMPLE : bleu, vert, orange]. Le style doit s'accorder avec elle. N'écris jamais de couleur en dur : pour une nuance, utilise color-mix(in srgb, var(--primary) 20%, white) ou les variables existantes.
- Ambiance : [VALEUR À COMPLÉTER, EXEMPLE : sobre, chaleureuse, moderne].
- Style lisible ; l'interface doit rester correcte sur mobile (écriture mobile d'abord, puis @media (min-width: 40rem) si besoin).
- Ne modifie pas le HTML. Si une classe te manque, liste-la à part, à la fin de ta réponse.
- Réponds avec le CSS seul, dans un seul bloc de code, avec des commentaires courts en français.

Voici le HTML du composant :

[COLLER ICI LE TEMPLATE .html DU COMPOSANT]

export type MediaType = 'livre' | 'film' | 'jeu';

// Interface : décrit la forme d’un objet ; elle disparaît à l’exécution
export interface Media {
  id: number;
  title: string;
  author: string;
  year: number;
  type: MediaType;
  genre: string;
  available: boolean;
  rating?: number;
  loanDays: number;
}

export const MAX_LOANS = 5;

import { Media } from '../models/media';

export const MEDIAS: Media[] = [
  { id: 1, title: 'Dune', author: 'Frank Herbert', year: 1965, type: 'livre', genre: 'Science-fiction', available: true, rating: 4.7, loanDays: 21 },
  { id: 2, title: 'Le Petit Prince', author: 'Antoine de Saint-Exupéry', year: 1943, type: 'livre', genre: 'Conte', available: true, rating: 4.8, loanDays: 21 },
  { id: 3, title: 'L\'Étranger', author: 'Albert Camus', year: 1942, type: 'livre', genre: 'Roman', available: false, rating: 4.2, loanDays: 21 },
  { id: 4, title: 'Fondation', author: 'Isaac Asimov', year: 1951, type: 'livre', genre: 'Science-fiction', available: true, loanDays: 21 },
  { id: 5, title: 'Blade Runner', author: 'Ridley Scott', year: 1982, type: 'film', genre: 'Science-fiction', available: true, rating: 4.5, loanDays: 7 },
  { id: 6, title: 'Le Voyage de Chihiro', author: 'Hayao Miyazaki', year: 2001, type: 'film', genre: 'Animation', available: true, rating: 4.9, loanDays: 7 },
  { id: 7, title: 'Les Sept Samouraïs', author: 'Akira Kurosawa', year: 1954, type: 'film', genre: 'Aventure', available: false, rating: 4.8, loanDays: 7 },
  { id: 8, title: 'Le Fabuleux Destin d\'Amélie Poulain', author: 'Jean-Pierre Jeunet', year: 2001, type: 'film', genre: 'Comédie', available: true, rating: 4.3, loanDays: 7 },
  { id: 9, title: 'Hollow Knight', author: 'Team Cherry', year: 2017, type: 'jeu', genre: 'Aventure', available: true, rating: 4.6, loanDays: 14 },
  { id: 10, title: 'Celeste', author: 'Maddy Makes Games', year: 2018, type: 'jeu', genre: 'Plateforme', available: true, rating: 4.4, loanDays: 14 },
  { id: 11, title: 'Portal 2', author: 'Valve', year: 2011, type: 'jeu', genre: 'Puzzle', available: false, rating: 4.7, loanDays: 14 },
  { id: 12, title: 'Stardew Valley', author: 'ConcernedApe', year: 2016, type: 'jeu', genre: 'Simulation', available: true, loanDays: 14 },
];

export async function chargerMedias(): Promise<Media[]> {
  // await : attend le résultat de l’opération asynchrone
  await new Promise((resolve) => setTimeout(resolve, 500));
  return MEDIAS;
}

import { Media } from './media';

// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class Loan {
  private medias: Media[] = [];

  add(media: Media): void {
    this.medias.push(media);
  }

  count(): number {
    return this.medias.length;
  }

  returnInDays(): number {
    return this.medias.reduce((min, m) => Math.min(min, m.loanDays), Infinity);
  }
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component } from '@angular/core';
import { chargerMedias } from './data/medias';
import { MediaCard } from './media-card/media-card';
import { Loan } from './models/loan';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-root',
  imports: [MediaCard],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class App {
  constructor() {
    chargerMedias().then((medias) => {
      console.log(medias.filter((m) => m.available).length);

      const loan = new Loan();
      loan.add(medias[0]);   // Dune : 21 jours
      loan.add(medias[4]);   // Blade Runner : 7 jours
      loan.add(medias[9]);   // Celeste : 14 jours
      console.log(loan.count(), loan.returnInDays());
    });
  }
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component } from '@angular/core';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-media-card',
  templateUrl: './media-card.html',
  styleUrl: './media-card.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class MediaCard {
  title: string = 'Dune';
  author: string = 'Frank Herbert';
  type: 'livre' | 'film' | 'jeu' = 'livre';
  available: boolean = true;
  borrowed: boolean = false;      // nouveau : le lecteur a-t-il emprunté ce média ?

  borrow(): void {                // nouveau : appelée au clic sur le bouton
    this.borrowed = true;
  }

  statusLabel(): string {
    if (this.borrowed) return 'Emprunté';
    return this.available ? 'Disponible' : 'Indisponible';
  }
}

<article class="card">
  <!-- {{ }} : affiche la valeur de la classe -->
  <h2>{{ title }}</h2>
  <p class="author">{{ author }}</p>
  <div class="meta">
    <span class="badge">{{ type }}</span>
    <span class="badge"
          [class.badge-ok]="available && !borrowed"
          [class.badge-warn]="borrowed"
          [class.badge-bad]="!available">
      {{ statusLabel() }}
    </span>
  </div>
  <!-- (click) : appelle la méthode quand l’utilisateur clique -->
  <button class="btn" [disabled]="!available || borrowed" (click)="borrow()">Emprunter</button>
</article>

/* Barre de recherche */
.search { display: flex; gap: 0.5rem; margin: 1.5rem 0; }
.search input { flex: 1; min-width: 0; }

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MediaCard } from './media-card/media-card';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-root',
  imports: [FormsModule, MediaCard],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class App {
  search = '';
}

<header class="site-header">
  <div class="container site-header__inner">
    <a class="logo" href="#">Médiathèque</a>
    <nav class="site-nav">
      <a href="#">Catalogue</a>
      <a href="#">Mes emprunts</a>
    </nav>
  </div>
</header>

<main class="container">
  <section class="hero">
    <h1>Bienvenue à la médiathèque</h1>
    <p>Recherchez un livre, un film ou un jeu, et empruntez-le en quelques clics.</p>
  </section>

  <div class="search">
    <!-- Liaison à double sens : le champ et la classe restent synchronisés -->
    <input [(ngModel)]="search" placeholder="Rechercher un média">
    <!-- (click) : appelle la méthode quand l’utilisateur clique -->
    <button class="btn btn-secondary" [disabled]="search.trim() === ''" (click)="search = ''">Effacer</button>
  </div>

  <section class="grid">
    <app-media-card />
    <app-media-card />
    <app-media-card />
  </section>
</main>

<footer class="site-footer">
  <div class="container">Médiathèque · Formation Angular</div>
</footer>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, computed, signal } from '@angular/core';
import { MEDIAS } from '../data/medias';
import { Media, MAX_LOANS } from '../models/media';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-selection-panel',
  templateUrl: './selection-panel.html',
  styleUrl: './selection-panel.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class SelectionPanel {
  readonly max = MAX_LOANS;
  readonly items = signal<Media[]>([]);

  // computed : valeur dérivée, recalculée seule quand ses dépendances changent
  readonly remaining = computed(() => this.max - this.items().length);
  readonly isFull = computed(() => this.remaining() === 0);

  add(): void {
    if (this.isFull()) return;
    this.items.update((list) => [...list, MEDIAS[list.length]]);
  }

  clear(): void {
    this.items.set([]);
  }
}

<aside class="panel">
  <h2>Ma sélection</h2>
  <!-- {{ }} : affiche la valeur de la classe -->
  <p>{{ items().length }} / {{ max }} médias</p>
  <p class="muted">Places restantes : {{ remaining() }}</p>
  <!-- (click) : appelle la méthode quand l’utilisateur clique -->
  <button class="btn" [disabled]="isFull()" (click)="add()">Ajouter un média</button>
  <button class="btn btn-secondary" (click)="clear()">Vider</button>
</aside>

/* Panneau « Ma sélection » */
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.25rem; box-shadow: var(--shadow);
  margin-top: 1.5rem;
}
.panel h2 { font-size: 1.1rem; }
.panel .btn { margin-right: 0.5rem; margin-top: 0.5rem; }

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MediaCard } from './media-card/media-card';
import { SelectionPanel } from './selection-panel/selection-panel';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-root',
  imports: [FormsModule, MediaCard, SelectionPanel],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class App {
  search = '';
}

<header class="site-header">
  <div class="container site-header__inner">
    <a class="logo" href="#">Médiathèque</a>
    <nav class="site-nav">
      <a href="#">Catalogue</a>
      <a href="#">Mes emprunts</a>
    </nav>
  </div>
</header>

<main class="container">
  <section class="hero">
    <h1>Bienvenue à la médiathèque</h1>
    <p>Recherchez un livre, un film ou un jeu, et empruntez-le en quelques clics.</p>
  </section>

  <div class="search">
    <!-- Liaison à double sens : le champ et la classe restent synchronisés -->
    <input [(ngModel)]="search" placeholder="Rechercher un média">
    <!-- (click) : appelle la méthode quand l’utilisateur clique -->
    <button class="btn btn-secondary" [disabled]="search.trim() === ''" (click)="search = ''">Effacer</button>
  </div>

  <section class="grid">
    <app-media-card />
    <app-media-card />
    <app-media-card />
  </section>

  <app-selection-panel />
</main>

<footer class="site-footer">
  <div class="container">Médiathèque · Formation Angular</div>
</footer>

/* Cartes du catalogue affichées directement dans le composant racine (chapitres 9 et 10).
   À copier à la fin de src/app/app.css. */
.card {
  display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12); }
.card h2 { font-size: 1.1rem; margin: 0; }
.card .author { margin: 0; color: var(--muted); }
.card .meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: auto; }
.card--out { opacity: 0.6; }

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MEDIAS } from './data/medias';
import { SelectionPanel } from './selection-panel/selection-panel';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-root',
  imports: [FormsModule, SelectionPanel],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class App {
  search = '';
  medias = MEDIAS;
}

<header class="site-header">
  <div class="container site-header__inner">
    <a class="logo" href="#">Médiathèque</a>
    <nav class="site-nav">
      <a href="#">Catalogue</a>
      <a href="#">Mes emprunts</a>
    </nav>
  </div>
</header>

<main class="container">
  <section class="hero">
    <h1>Bienvenue à la médiathèque</h1>
    <p>Recherchez un livre, un film ou un jeu, et empruntez-le en quelques clics.</p>
  </section>

  <div class="search">
    <!-- Liaison à double sens : le champ et la classe restent synchronisés -->
    <input [(ngModel)]="search" placeholder="Rechercher un média">
    <!-- (click) : appelle la méthode quand l’utilisateur clique -->
    <button class="btn btn-secondary" [disabled]="search.trim() === ''" (click)="search = ''">Effacer</button>
  </div>

  <section class="grid">
    <!-- @for : répète le bloc pour chaque élément ; track identifie chaque ligne -->
    @for (m of medias; track m.id) {
      <article class="card">
        <!-- {{ }} : affiche la valeur de la classe -->
        <h2>{{ m.title }}</h2>
        <p class="author">{{ m.author }} · {{ m.year }}</p>
        <div class="meta">
          <span class="badge">
            <!-- @switch : affiche le bloc qui correspond à la valeur -->
            @switch (m.type) {
              @case ('livre') { 📖 }
              @case ('film') { 🎬 }
              @case ('jeu') { 🎮 }
            }
            {{ m.type }}
          </span>
          <!-- @if : affiche le bloc seulement si la condition est vraie -->
          @if (m.available) {
            <span class="badge badge-ok">Disponible</span>
          <!-- @else : affiché quand la condition du @if est fausse -->
          } @else {
            <span class="badge badge-bad">Indisponible</span>
          }
          @if (m.year >= 2016) {
            <span class="badge badge-warn">Nouveau</span>
          }
        </div>
      </article>
    <!-- @empty : affiché quand la liste est vide -->
    } @empty {
      <p class="muted">Aucun média dans le catalogue.</p>
    }
  </section>

  <app-selection-panel />
</main>

<footer class="site-footer">
  <div class="container">Médiathèque · Formation Angular</div>
</footer>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Directive, ElementRef, inject } from '@angular/core';

// Déclare une directive, qui ajoute un comportement à un élément
@Directive({
  selector: '[appHighlight]',
  host: {
    '(mouseenter)': 'hover(true)',
    '(mouseleave)': 'hover(false)',
  },
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class Highlight {
  private element = inject<ElementRef<HTMLElement>>(ElementRef);

  hover(active: boolean): void {
    const style = this.element.nativeElement.style;
    style.backgroundColor = active ? 'var(--primary-soft)' : '';
    style.outline = active ? '2px solid var(--primary)' : '';
  }
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Highlight } from './highlight';
import { MEDIAS } from './data/medias';
import { SelectionPanel } from './selection-panel/selection-panel';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-root',
  imports: [FormsModule, SelectionPanel, Highlight],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class App {
  search = '';
  medias = MEDIAS;
}

<header class="site-header">
  <div class="container site-header__inner">
    <a class="logo" href="#">Médiathèque</a>
    <nav class="site-nav">
      <a href="#">Catalogue</a>
      <a href="#">Mes emprunts</a>
    </nav>
  </div>
</header>

<main class="container">
  <section class="hero">
    <h1>Bienvenue à la médiathèque</h1>
    <p>Recherchez un livre, un film ou un jeu, et empruntez-le en quelques clics.</p>
  </section>

  <div class="search">
    <!-- Liaison à double sens : le champ et la classe restent synchronisés -->
    <input [(ngModel)]="search" placeholder="Rechercher un média">
    <!-- (click) : appelle la méthode quand l’utilisateur clique -->
    <button class="btn btn-secondary" [disabled]="search.trim() === ''" (click)="search = ''">Effacer</button>
  </div>

  <section class="grid">
    <!-- @for : répète le bloc pour chaque élément ; track identifie chaque ligne -->
    @for (m of medias; track m.id) {
      <article class="card" appHighlight
               [class.card--out]="!m.available"
               [class.card--top]="(m.rating ?? 0) >= 4.5">
        <!-- {{ }} : affiche la valeur de la classe -->
        <h2>{{ m.title }}</h2>
        <p class="author">{{ m.author }} · {{ m.year }}</p>
        <div class="meta">
          <span class="badge">
            <!-- @switch : affiche le bloc qui correspond à la valeur -->
            @switch (m.type) {
              @case ('livre') { 📖 }
              @case ('film') { 🎬 }
              @case ('jeu') { 🎮 }
            }
            {{ m.type }}
          </span>
          <!-- @if : affiche le bloc seulement si la condition est vraie -->
          @if (m.available) {
            <span class="badge badge-ok">Disponible</span>
          <!-- @else : affiché quand la condition du @if est fausse -->
          } @else {
            <span class="badge badge-bad">Indisponible</span>
          }
          @if (m.year >= 2016) {
            <span class="badge badge-warn">Nouveau</span>
          }
        </div>
      </article>
    <!-- @empty : affiché quand la liste est vide -->
    } @empty {
      <p class="muted">Aucun média dans le catalogue.</p>
    }
  </section>

  <app-selection-panel />
</main>

<footer class="site-footer">
  <div class="container">Médiathèque · Formation Angular</div>
</footer>

.card--top { border-color: var(--primary); }

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, booleanAttribute, input } from '@angular/core';
import { Highlight } from '../highlight';
import { Media } from '../models/media';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-media-card',
  imports: [Highlight],
  templateUrl: './media-card.html',
  styleUrl: './media-card.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class MediaCard {
  // input.required : valeur obligatoire, fournie par le parent
  media = input.required<Media>();
  // input() : valeur fournie par le parent ; on la lit avec ()
  compact = input(false, { transform: booleanAttribute });
}

<article class="card" appHighlight
         [class.card--out]="!media().available"
         [class.card--top]="(media().rating ?? 0) >= 4.5">
  <!-- {{ }} : affiche la valeur de la classe -->
  <h2>{{ media().title }}</h2>
  <!-- @if : affiche le bloc seulement si la condition est vraie -->
  @if (!compact()) {
    <p class="author">{{ media().author }} · {{ media().year }}</p>
  }
  <div class="meta">
    <span class="badge">
      <!-- @switch : affiche le bloc qui correspond à la valeur -->
      @switch (media().type) {
        @case ('livre') { 📖 }
        @case ('film') { 🎬 }
        @case ('jeu') { 🎮 }
      }
      {{ media().type }}
    </span>
    @if (media().available) {
      <span class="badge badge-ok">Disponible</span>
    <!-- @else : affiché quand la condition du @if est fausse -->
    } @else {
      <span class="badge badge-bad">Indisponible</span>
    }
    @if (media().year >= 2016) {
      <span class="badge badge-warn">Nouveau</span>
    }
  </div>
  <button class="btn" [disabled]="!media().available">Emprunter</button>
</article>

/* Carte d'un média */
.card { display: flex; flex-direction: column; gap: 0.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.card h2 { font-size: 1.1rem; margin: 0; }
.card .author { margin: 0; color: var(--muted); }
.card .meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: auto; }
.card--out { opacity: 0.6; }
.card--top { border-color: var(--primary); }

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MEDIAS } from './data/medias';
import { MediaCard } from './media-card/media-card';
import { SelectionPanel } from './selection-panel/selection-panel';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-root',
  imports: [FormsModule, MediaCard, SelectionPanel],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class App {
  search = '';
  medias = MEDIAS;
}

<header class="site-header">
  <div class="container site-header__inner">
    <a class="logo" href="#">Médiathèque</a>
    <nav class="site-nav">
      <a href="#">Catalogue</a>
      <a href="#">Mes emprunts</a>
    </nav>
  </div>
</header>

<main class="container">
  <section class="hero">
    <h1>Bienvenue à la médiathèque</h1>
    <p>Recherchez un livre, un film ou un jeu, et empruntez-le en quelques clics.</p>
  </section>

  <div class="search">
    <!-- Liaison à double sens : le champ et la classe restent synchronisés -->
    <input [(ngModel)]="search" placeholder="Rechercher un média">
    <!-- (click) : appelle la méthode quand l’utilisateur clique -->
    <button class="btn btn-secondary" [disabled]="search.trim() === ''" (click)="search = ''">Effacer</button>
  </div>

  <section class="grid">
    <!-- @for : répète le bloc pour chaque élément ; track identifie chaque ligne -->
    @for (m of medias; track m.id) {
      <app-media-card [media]="m" />
    <!-- @empty : affiché quand la liste est vide -->
    } @empty {
      <p class="muted">Aucun média dans le catalogue.</p>
    }
  </section>

  <app-selection-panel />
</main>

<footer class="site-footer">
  <div class="container">Médiathèque · Formation Angular</div>
</footer>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, booleanAttribute, input, output } from '@angular/core';
import { Highlight } from '../highlight';
import { Media } from '../models/media';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-media-card',
  imports: [Highlight],
  templateUrl: './media-card.html',
  styleUrl: './media-card.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class MediaCard {
  // input.required : valeur obligatoire, fournie par le parent
  media = input.required<Media>();
  // input() : valeur fournie par le parent ; on la lit avec ()
  compact = input(false, { transform: booleanAttribute });
  borrow = output<Media>();       // nouveau : émise au clic sur Emprunter
}

<article class="card" appHighlight
         [class.card--out]="!media().available"
         [class.card--top]="(media().rating ?? 0) >= 4.5">
  <!-- {{ }} : affiche la valeur de la classe -->
  <h2>{{ media().title }}</h2>
  <!-- @if : affiche le bloc seulement si la condition est vraie -->
  @if (!compact()) {
    <p class="author">{{ media().author }} · {{ media().year }}</p>
  }
  <div class="meta">
    <span class="badge">
      <!-- @switch : affiche le bloc qui correspond à la valeur -->
      @switch (media().type) {
        @case ('livre') { 📖 }
        @case ('film') { 🎬 }
        @case ('jeu') { 🎮 }
      }
      {{ media().type }}
    </span>
    @if (media().available) {
      <span class="badge badge-ok">Disponible</span>
    <!-- @else : affiché quand la condition du @if est fausse -->
    } @else {
      <span class="badge badge-bad">Indisponible</span>
    }
    @if (media().year >= 2016) {
      <span class="badge badge-warn">Nouveau</span>
    }
  </div>
  <!-- (click) : appelle la méthode quand l’utilisateur clique -->
  <button class="btn" [disabled]="!media().available" (click)="borrow.emit(media())">Emprunter</button>
</article>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, computed, signal } from '@angular/core';
import { MEDIAS } from './data/medias';
import { Media, MAX_LOANS } from './models/media';
import { MediaCard } from './media-card/media-card';
import { SearchBar } from './search-bar/search-bar';
import { SelectionPanel } from './selection-panel/selection-panel';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-root',
  imports: [MediaCard, SearchBar, SelectionPanel],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class App {
  medias = MEDIAS;
  // signal : valeur réactive ; on la lit avec () et on la change avec set() ou update()
  search = signal('');
  selection = signal<Media[]>([]);

  // computed : valeur dérivée, recalculée seule quand ses dépendances changent
  visible = computed(() => {
    const q = this.search().trim().toLowerCase();
    return this.medias.filter(
      (m) => m.title.toLowerCase().includes(q) || m.author.toLowerCase().includes(q),
    );
  });

  onBorrow(media: Media): void {
    const list = this.selection();
    if (list.some((m) => m.id === media.id) || list.length >= MAX_LOANS) return;
    this.selection.set([...list, media]);
  }

  clear(): void {
    this.selection.set([]);
  }
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, computed, input, output } from '@angular/core';
import { Media, MAX_LOANS } from '../models/media';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-selection-panel',
  templateUrl: './selection-panel.html',
  styleUrl: './selection-panel.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class SelectionPanel {
  readonly max = MAX_LOANS;
  items = input<Media[]>([]);
  cleared = output<void>();

  // computed : valeur dérivée, recalculée seule quand ses dépendances changent
  readonly remaining = computed(() => this.max - this.items().length);
  readonly isFull = computed(() => this.remaining() === 0);
}

<aside class="panel">
  <h2>Ma sélection</h2>
  <!-- {{ }} : affiche la valeur de la classe -->
  <p>{{ items().length }} / {{ max }} médias</p>
  <p class="muted">Places restantes : {{ remaining() }}</p>
  <!-- (click) : appelle la méthode quand l’utilisateur clique -->
  <button class="btn btn-secondary" (click)="cleared.emit()">Vider</button>
</aside>

<header class="site-header">
  <div class="container site-header__inner">
    <a class="logo" href="#">Médiathèque</a>
    <nav class="site-nav">
      <a href="#">Catalogue</a>
      <a href="#">Mes emprunts</a>
    </nav>
  </div>
</header>

<main class="container">
  <section class="hero">
    <h1>Bienvenue à la médiathèque</h1>
    <p>Recherchez un livre, un film ou un jeu, et empruntez-le en quelques clics.</p>
  </section>

  <app-search-bar [(query)]="search" />

  <section class="grid">
    <!-- @for : répète le bloc pour chaque élément ; track identifie chaque ligne -->
    @for (m of visible(); track m.id) {
      <app-media-card [media]="m" (borrow)="onBorrow($event)" />
    <!-- @empty : affiché quand la liste est vide -->
    } @empty {
      <!-- {{ }} : affiche la valeur de la classe -->
      <p class="muted">Aucun média ne correspond à « {{ search() }} ».</p>
    }
  </section>

  <app-selection-panel [items]="selection()" (cleared)="clear()" />
</main>

<footer class="site-footer">
  <div class="container">Médiathèque · Formation Angular</div>
</footer>

/* Barre de recherche */
.search { display: flex; gap: 0.5rem; margin: 1.5rem 0; }
.search input { flex: 1; min-width: 0; }

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, model } from '@angular/core';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-search-bar',
  templateUrl: './search-bar.html',
  styleUrl: './search-bar.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class SearchBar {
  // model() : valeur lue et modifiable, synchronisée avec le parent
  query = model('');

  onInput(event: Event): void {
    this.query.set((event.target as HTMLInputElement).value);
  }

  clear(): void {
    this.query.set('');
  }
}

<div class="search">
  <input [value]="query()" (input)="onInput($event)" placeholder="Rechercher un titre ou un auteur" aria-label="Rechercher un média">
  <!-- (click) : appelle la méthode quand l’utilisateur clique -->
  <button class="btn btn-secondary" [disabled]="query() === ''" (click)="clear()">Effacer</button>
</div>

    // inject() : demande au conteneur une instance du service
    inject(DestroyRef).onDestroy(() => {
      clearInterval(id);
      console.log('Horloge détruite, minuteur arrêté');
    });

<!-- {{ }} : affiche la valeur de la classe -->
<span class="muted">{{ now().toLocaleTimeString('fr-FR') }}</span>
<!-- @if : affiche le bloc seulement si la condition est vraie -->
@if (isOpen()) {
  <span class="badge badge-ok">Ouvert</span>
<!-- @else : affiché quand la condition du @if est fausse -->
} @else {
  <span class="badge badge-bad">Fermé</span>
}

  // signal : valeur réactive ; on la lit avec () et on la change avec set() ou update()
  showClock = signal(true);

  toggleClock(): void {
    this.showClock.update((v) => !v);
  }

      <!-- (click) : appelle la méthode quand l’utilisateur clique -->
      <button class="btn btn-secondary" (click)="toggleClock()">
        <!-- {{ }} : affiche la valeur de la classe -->
        {{ showClock() ? "Masquer l'horloge" : "Afficher l'horloge" }}
      </button>
      <!-- @if : affiche le bloc seulement si la condition est vraie -->
      @if (showClock()) {
        <app-library-clock />
      }

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Service } from '@angular/core';
import { MEDIAS } from './data/medias';
import { Media } from './models/media';

// Déclare un service, injectable dans les composants
@Service()
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class MediaService {
  private medias: Media[] = MEDIAS;

  getAll(): Media[] {
    return this.medias;
  }

  getById(id: number): Media | undefined {
    return this.medias.find((m) => m.id === id);
  }

  search(query: string): Media[] {
    const q = query.trim().toLowerCase();
    return this.medias.filter(
      (m) => m.title.toLowerCase().includes(q) || m.author.toLowerCase().includes(q),
    );
  }
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, computed, inject, signal } from '@angular/core';
import { LibraryClock } from './library-clock/library-clock';
import { MediaCard } from './media-card/media-card';
import { MediaService } from './media.service';
import { Media, MAX_LOANS } from './models/media';
import { SearchBar } from './search-bar/search-bar';
import { SelectionPanel } from './selection-panel/selection-panel';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-root',
  imports: [LibraryClock, MediaCard, SearchBar, SelectionPanel],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class App {
  // inject() : demande au conteneur une instance du service
  private mediaService = inject(MediaService);

  // signal : valeur réactive ; on la lit avec () et on la change avec set() ou update()
  search = signal('');
  selection = signal<Media[]>([]);

  // computed : valeur dérivée, recalculée seule quand ses dépendances changent
  visible = computed(() => this.mediaService.search(this.search()));

  onBorrow(media: Media): void {
    const list = this.selection();
    if (list.some((m) => m.id === media.id) || list.length >= MAX_LOANS) return;
    this.selection.set([...list, media]);
  }

  clear(): void {
    this.selection.set([]);
  }
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Service, computed, signal } from '@angular/core';
import { Media, MAX_LOANS } from './models/media';

// Déclare un service, injectable dans les composants
@Service()
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class SelectionService {
  private readonly items = signal<Media[]>([]);

  readonly list = this.items.asReadonly();
  // computed : valeur dérivée, recalculée seule quand ses dépendances changent
  readonly count = computed(() => this.items().length);
  readonly remaining = computed(() => MAX_LOANS - this.items().length);
  readonly isFull = computed(() => this.remaining() === 0);

  has(id: number): boolean {
    return this.items().some((m) => m.id === id);
  }

  add(media: Media): void {
    if (this.isFull() || this.has(media.id)) return;
    this.items.update((list) => [...list, media]);
  }

  remove(id: number): void {
    this.items.update((list) => list.filter((m) => m.id !== id));
  }

  clear(): void {
    this.items.set([]);
  }
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, booleanAttribute, inject, input } from '@angular/core';
import { Highlight } from '../highlight';
import { Media } from '../models/media';
import { SelectionService } from '../selection.service';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-media-card',
  imports: [Highlight],
  templateUrl: './media-card.html',
  styleUrl: './media-card.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class MediaCard {
  // input.required : valeur obligatoire, fournie par le parent
  media = input.required<Media>();
  // input() : valeur fournie par le parent ; on la lit avec ()
  compact = input(false, { transform: booleanAttribute });
  // inject() : demande au conteneur une instance du service
  protected selection = inject(SelectionService);

  borrow(): void {
    this.selection.add(this.media());
  }
}

<article class="card" appHighlight
         [class.card--out]="!media().available"
         [class.card--top]="(media().rating ?? 0) >= 4.5">
  <!-- {{ }} : affiche la valeur de la classe -->
  <h2>{{ media().title }}</h2>
  <!-- @if : affiche le bloc seulement si la condition est vraie -->
  @if (!compact()) {
    <p class="author">{{ media().author }} · {{ media().year }}</p>
  }
  <div class="meta">
    <span class="badge">
      <!-- @switch : affiche le bloc qui correspond à la valeur -->
      @switch (media().type) {
        @case ('livre') { 📖 }
        @case ('film') { 🎬 }
        @case ('jeu') { 🎮 }
      }
      {{ media().type }}
    </span>
    @if (media().available) {
      <span class="badge badge-ok">Disponible</span>
    <!-- @else : affiché quand la condition du @if est fausse -->
    } @else {
      <span class="badge badge-bad">Indisponible</span>
    }
    @if (media().year >= 2016) {
      <span class="badge badge-warn">Nouveau</span>
    }
  </div>
  <button class="btn"
          [disabled]="!media().available || selection.has(media().id) || selection.isFull()"
          (click)="borrow()">
    {{ selection.has(media().id) ? 'Dans ma sélection' : 'Emprunter' }}
  </button>
</article>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, inject } from '@angular/core';
import { MAX_LOANS } from '../models/media';
import { SelectionService } from '../selection.service';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-selection-panel',
  templateUrl: './selection-panel.html',
  styleUrl: './selection-panel.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class SelectionPanel {
  // inject() : demande au conteneur une instance du service
  protected selection = inject(SelectionService);
  protected max = MAX_LOANS;
}

<aside class="panel">
  <h2>Ma sélection</h2>
  <!-- {{ }} : affiche la valeur de la classe -->
  <p>{{ selection.count() }} / {{ max }} médias</p>
  <ul>
    <!-- @for : répète le bloc pour chaque élément ; track identifie chaque ligne -->
    @for (m of selection.list(); track m.id) {
      <!-- (click) : appelle la méthode quand l’utilisateur clique -->
      <li>{{ m.title }} <button class="btn btn-secondary" (click)="selection.remove(m.id)">✕</button></li>
    <!-- @empty : affiché quand la liste est vide -->
    } @empty {
      <li class="muted">Aucun média choisi.</li>
    }
  </ul>
  <button class="btn btn-secondary" (click)="selection.clear()">Vider</button>
</aside>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, inject } from '@angular/core';
import { SelectionService } from '../selection.service';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-selection-badge',
  templateUrl: './selection-badge.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class SelectionBadge {
  // inject() : demande au conteneur une instance du service
  selection = inject(SelectionService);
}

<!-- {{ }} : affiche la valeur de la classe -->
<span class="badge">Ma sélection : {{ selection.count() }}</span>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, computed, inject, signal } from '@angular/core';
import { LibraryClock } from './library-clock/library-clock';
import { MediaCard } from './media-card/media-card';
import { MediaService } from './media.service';
import { SearchBar } from './search-bar/search-bar';
import { SelectionBadge } from './selection-badge/selection-badge';
import { SelectionPanel } from './selection-panel/selection-panel';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-root',
  imports: [LibraryClock, MediaCard, SearchBar, SelectionBadge, SelectionPanel],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class App {
  // inject() : demande au conteneur une instance du service
  private mediaService = inject(MediaService);

  // signal : valeur réactive ; on la lit avec () et on la change avec set() ou update()
  search = signal('');
  // computed : valeur dérivée, recalculée seule quand ses dépendances changent
  visible = computed(() => this.mediaService.search(this.search()));
}

<header class="site-header">
  <div class="container site-header__inner">
    <a class="logo" href="#">Médiathèque</a>
    <nav class="site-nav">
      <a href="#">Catalogue</a>
      <a href="#">Mes emprunts</a>
      <app-selection-badge />
      <app-library-clock />
    </nav>
  </div>
</header>

<main class="container">
  <section class="hero">
    <h1>Bienvenue à la médiathèque</h1>
    <p>Recherchez un livre, un film ou un jeu, et empruntez-le en quelques clics.</p>
  </section>

  <app-search-bar [(query)]="search" />

  <section class="grid">
    <!-- @for : répète le bloc pour chaque élément ; track identifie chaque ligne -->
    @for (m of visible(); track m.id) {
      <app-media-card [media]="m" />
    <!-- @empty : affiché quand la liste est vide -->
    } @empty {
      <!-- {{ }} : affiche la valeur de la classe -->
      <p class="muted">Aucun média ne correspond à « {{ search() }} ».</p>
    }
  </section>

  <app-selection-panel />
</main>

<footer class="site-footer">
  <div class="container">Médiathèque · Formation Angular</div>
</footer>

import { Routes } from '@angular/router';
import { Home } from './home/home';
import { Catalogue } from './catalogue/catalogue';
import { Loans } from './loans/loans';
import { Contact } from './contact/contact';
import { NotFound } from './not-found/not-found';

export const routes: Routes = [
  { path: '', component: Home },
  { path: 'catalogue', component: Catalogue },
  { path: 'emprunts', component: Loans },
  { path: 'contact', component: Contact },
  { path: '**', component: NotFound },
];

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-home',
  imports: [RouterLink],
  templateUrl: './home.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class Home {}

<section class="hero">
  <h1>Bienvenue à la médiathèque</h1>
  <p>Recherchez un livre, un film ou un jeu, et empruntez-le en quelques clics.</p>
  <!-- routerLink : lien interne, sans rechargement de la page -->
  <a class="btn" routerLink="/catalogue">Voir le catalogue</a>
</section>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, computed, inject, signal } from '@angular/core';
import { MediaService } from '../media.service';
import { MediaCard } from '../media-card/media-card';
import { SearchBar } from '../search-bar/search-bar';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-catalogue',
  imports: [MediaCard, SearchBar],
  templateUrl: './catalogue.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class Catalogue {
  // inject() : demande au conteneur une instance du service
  private mediaService = inject(MediaService);

  // signal : valeur réactive ; on la lit avec () et on la change avec set() ou update()
  search = signal('');
  // computed : valeur dérivée, recalculée seule quand ses dépendances changent
  visible = computed(() => this.mediaService.search(this.search()));
}

<h1>Catalogue</h1>
<app-search-bar [(query)]="search" />

<section class="grid">
  <!-- @for : répète le bloc pour chaque élément ; track identifie chaque ligne -->
  @for (m of visible(); track m.id) {
    <app-media-card [media]="m" />
  <!-- @empty : affiché quand la liste est vide -->
  } @empty {
    <!-- {{ }} : affiche la valeur de la classe -->
    <p class="muted">Aucun média ne correspond à « {{ search() }} ».</p>
  }
</section>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component } from '@angular/core';
import { SelectionPanel } from '../selection-panel/selection-panel';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-loans',
  imports: [SelectionPanel],
  templateUrl: './loans.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class Loans {}

<h1>Mes emprunts</h1>
<app-selection-panel />

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component } from '@angular/core';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-contact',
  templateUrl: './contact.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class Contact {}

<h1>Contact</h1>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-not-found',
  imports: [RouterLink],
  templateUrl: './not-found.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class NotFound {}

<h1>Page introuvable</h1>
<!-- routerLink : lien interne, sans rechargement de la page -->
<a routerLink="/">Retour à l'accueil</a>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { LibraryClock } from './library-clock/library-clock';
import { SelectionBadge } from './selection-badge/selection-badge';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-root',
  imports: [RouterOutlet, RouterLink, RouterLinkActive, SelectionBadge, LibraryClock],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class App {}

<header class="site-header">
  <div class="container site-header__inner">
    <!-- routerLink : lien interne, sans rechargement de la page -->
    <a class="logo" routerLink="/">Médiathèque</a>
    <nav class="site-nav">
      <a routerLink="/" routerLinkActive="actif" [routerLinkActiveOptions]="{ exact: true }">Accueil</a>
      <a routerLink="/catalogue" routerLinkActive="actif">Catalogue</a>
      <a routerLink="/emprunts" routerLinkActive="actif">Mes emprunts</a>
      <a routerLink="/contact" routerLinkActive="actif">Contact</a>
      <app-selection-badge />
      <app-library-clock />
    </nav>
  </div>
</header>

<main class="container">
  <!-- router-outlet : emplacement où s’affiche la page de la route active -->
  <router-outlet />
</main>

<footer class="site-footer">
  <div class="container">Médiathèque · Formation Angular</div>
</footer>

.site-nav a.actif { color: var(--primary); border-bottom: 2px solid var(--primary); }

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    // provideRouter : active le routeur avec la liste des routes
    provideRouter(routes, withComponentInputBinding()),
  ],
};

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, computed, inject, input } from '@angular/core';
import { RouterLink } from '@angular/router';
import { MediaService } from '../media.service';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-media-detail',
  imports: [RouterLink],
  templateUrl: './media-detail.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class MediaDetail {
  // input.required : valeur obligatoire, fournie par le parent
  id = input.required<string>();

  // inject() : demande au conteneur une instance du service
  private mediaService = inject(MediaService);
  // computed : valeur dérivée, recalculée seule quand ses dépendances changent
  media = computed(() => this.mediaService.getById(Number(this.id())));
}

<!-- routerLink : lien interne, sans rechargement de la page -->
<a routerLink="/catalogue">← Retour au catalogue</a>

<!-- @if : affiche le bloc seulement si la condition est vraie -->
@if (media(); as m) {
  <!-- {{ }} : affiche la valeur de la classe -->
  <h1>{{ m.title }}</h1>
  <p>{{ m.author }} · {{ m.year }} · {{ m.genre }}</p>
  <p>
    <span class="badge">{{ m.type }}</span>
    @if (m.available) { <span class="badge badge-ok">Disponible</span> }
    <!-- @else : affiché quand la condition du @if est fausse -->
    @else { <span class="badge badge-bad">Indisponible</span> }
  </p>
  <p>Note : {{ m.rating !== undefined ? m.rating + ' / 5' : 'Pas encore noté' }}</p>
  <p>Prêt de {{ m.loanDays }} jours.</p>
} @else {
  <p>Média introuvable.</p>
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, booleanAttribute, inject, input } from '@angular/core';
import { RouterLink } from '@angular/router';
import { Highlight } from '../highlight';
import { Media } from '../models/media';
import { SelectionService } from '../selection.service';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-media-card',
  imports: [Highlight, RouterLink],
  templateUrl: './media-card.html',
  styleUrl: './media-card.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class MediaCard {
  // input.required : valeur obligatoire, fournie par le parent
  media = input.required<Media>();
  // input() : valeur fournie par le parent ; on la lit avec ()
  compact = input(false, { transform: booleanAttribute });
  // inject() : demande au conteneur une instance du service
  protected selection = inject(SelectionService);

  borrow(): void {
    this.selection.add(this.media());
  }
}

<article class="card" appHighlight
         [class.card--out]="!media().available"
         [class.card--top]="(media().rating ?? 0) >= 4.5">
  <!-- routerLink : lien interne, sans rechargement de la page -->
  <h2><a [routerLink]="['/catalogue', media().id]">{{ media().title }}</a></h2>
  <!-- @if : affiche le bloc seulement si la condition est vraie -->
  @if (!compact()) {
    <!-- {{ }} : affiche la valeur de la classe -->
    <p class="author">{{ media().author }} · {{ media().year }}</p>
  }
  <div class="meta">
    <span class="badge">
      <!-- @switch : affiche le bloc qui correspond à la valeur -->
      @switch (media().type) {
        @case ('livre') { 📖 }
        @case ('film') { 🎬 }
        @case ('jeu') { 🎮 }
      }
      {{ media().type }}
    </span>
    @if (media().available) {
      <span class="badge badge-ok">Disponible</span>
    <!-- @else : affiché quand la condition du @if est fausse -->
    } @else {
      <span class="badge badge-bad">Indisponible</span>
    }
    @if (media().year >= 2016) {
      <span class="badge badge-warn">Nouveau</span>
    }
  </div>
  <button class="btn"
          [disabled]="!media().available || selection.has(media().id) || selection.isFull()"
          (click)="borrow()">
    {{ selection.has(media().id) ? 'Dans ma sélection' : 'Emprunter' }}
  </button>
</article>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, computed, inject, input, linkedSignal } from '@angular/core';
import { MediaService } from '../media.service';
import { MediaCard } from '../media-card/media-card';
import { SearchBar } from '../search-bar/search-bar';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-catalogue',
  imports: [MediaCard, SearchBar],
  templateUrl: './catalogue.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class Catalogue {
  // inject() : demande au conteneur une instance du service
  private mediaService = inject(MediaService);

  q = input<string>();                       // reçoit ?q=... dans l'adresse
  search = linkedSignal(() => this.q() ?? '');       // modifiable, mais repart de q
  // computed : valeur dérivée, recalculée seule quand ses dépendances changent
  visible = computed(() => this.mediaService.search(this.search()));
}

<section class="hero">
  <h1>Bienvenue à la médiathèque</h1>
  <p>Recherchez un livre, un film ou un jeu, et empruntez-le en quelques clics.</p>
  <!-- routerLink : lien interne, sans rechargement de la page -->
  <a class="btn" routerLink="/catalogue">Voir le catalogue</a>
  <a routerLink="/catalogue" [queryParams]="{ q: 'dune' }">Chercher Dune</a>
</section>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-admin-layout',
  imports: [RouterLink, RouterOutlet],
  templateUrl: './admin-layout.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class AdminLayout {}

<h1>Espace bibliothécaire</h1>
<nav>
  <!-- routerLink : lien interne, sans rechargement de la page -->
  <a routerLink="/admin">Tableau de bord</a>
  <a routerLink="/admin/medias">Gérer les médias</a>
</nav>
<!-- router-outlet : emplacement où s’affiche la page de la route active -->
<router-outlet />

<h2>Tableau de bord</h2>

<h2>Gestion des médias</h2>

import { Routes } from '@angular/router';
import { Home } from './home/home';
import { Catalogue } from './catalogue/catalogue';
import { MediaDetail } from './media-detail/media-detail';
import { Loans } from './loans/loans';
import { Contact } from './contact/contact';
import { AdminLayout } from './admin/admin-layout/admin-layout';
import { Dashboard } from './admin/dashboard/dashboard';
import { AdminMedias } from './admin/admin-medias/admin-medias';
import { NotFound } from './not-found/not-found';

export const routes: Routes = [
  { path: '', component: Home },
  { path: 'catalogue', component: Catalogue },
  { path: 'catalogue/:id', component: MediaDetail },
  { path: 'emprunts', component: Loans },
  { path: 'contact', component: Contact },
  {
    path: 'admin',
    component: AdminLayout,
    children: [
      { path: '', component: Dashboard },
      { path: 'medias', component: AdminMedias },
    ],
  },
  { path: '**', component: NotFound },
];

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Service, computed, signal } from '@angular/core';

export type Role = 'LECTEUR' | 'BIBLIOTHECAIRE';

// Déclare un service, injectable dans les composants
@Service()
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class AuthService {
  readonly role = signal<Role | null>(null);
  // computed : valeur dérivée, recalculée seule quand ses dépendances changent
  readonly loggedIn = computed(() => this.role() !== null);
  readonly isLibrarian = computed(() => this.role() === 'BIBLIOTHECAIRE');

  login(role: Role): void {
    this.role.set(role);       // simulation d'une connexion
  }

  logout(): void {
    this.role.set(null);
  }
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, inject } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService, Role } from '../auth/auth.service';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-login',
  templateUrl: './login.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class Login {
  // inject() : demande au conteneur une instance du service
  private auth = inject(AuthService);
  private router = inject(Router);

  signIn(role: Role): void {
    this.auth.login(role);
    // navigateByUrl : navigation déclenchée depuis la classe
    this.router.navigateByUrl(role === 'BIBLIOTHECAIRE' ? '/admin' : '/catalogue');
  }
}

<h1>Connexion</h1>
<p class="muted">Connexion simulée : le vrai contrôle sera fait par le serveur Spring.</p>
<!-- (click) : appelle la méthode quand l’utilisateur clique -->
<button class="btn" (click)="signIn('LECTEUR')">Entrer comme lecteur</button>
<button class="btn btn-secondary" (click)="signIn('BIBLIOTHECAIRE')">Entrer comme bibliothécaire</button>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { inject } from '@angular/core';
import { CanMatchFn, Router } from '@angular/router';
import { AuthService } from './auth.service';

export const librarianGuard: CanMatchFn = () => {
  // inject() : demande au conteneur une instance du service
  const auth = inject(AuthService);
  // createUrlTree : construit une redirection vers une autre route
  return auth.isLibrarian() ? true : inject(Router).createUrlTree(['/login']);
};

import { Routes } from '@angular/router';
import { Home } from './home/home';
import { Catalogue } from './catalogue/catalogue';
import { MediaDetail } from './media-detail/media-detail';
import { Loans } from './loans/loans';
import { Contact } from './contact/contact';
import { AdminLayout } from './admin/admin-layout/admin-layout';
import { Dashboard } from './admin/dashboard/dashboard';
import { AdminMedias } from './admin/admin-medias/admin-medias';
import { Login } from './login/login';
import { librarianGuard } from './auth/auth.guard';
import { NotFound } from './not-found/not-found';

export const routes: Routes = [
  { path: '', component: Home },
  { path: 'catalogue', component: Catalogue },
  { path: 'catalogue/:id', component: MediaDetail },
  { path: 'emprunts', component: Loans },
  { path: 'contact', component: Contact },
  { path: 'login', component: Login },
  {
    path: 'admin',
    canMatch: [librarianGuard],
    component: AdminLayout,
    children: [
      { path: '', component: Dashboard },
      { path: 'medias', component: AdminMedias },
    ],
  },
  { path: '**', component: NotFound },
];

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, inject } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { AuthService } from './auth/auth.service';
import { LibraryClock } from './library-clock/library-clock';
import { SelectionBadge } from './selection-badge/selection-badge';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-root',
  imports: [RouterOutlet, RouterLink, RouterLinkActive, SelectionBadge, LibraryClock],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class App {
  // inject() : demande au conteneur une instance du service
  protected auth = inject(AuthService);
}

<header class="site-header">
  <div class="container site-header__inner">
    <!-- routerLink : lien interne, sans rechargement de la page -->
    <a class="logo" routerLink="/">Médiathèque</a>
    <nav class="site-nav">
      <a routerLink="/" routerLinkActive="actif" [routerLinkActiveOptions]="{ exact: true }">Accueil</a>
      <a routerLink="/catalogue" routerLinkActive="actif">Catalogue</a>
      <a routerLink="/emprunts" routerLinkActive="actif">Mes emprunts</a>
      <a routerLink="/contact" routerLinkActive="actif">Contact</a>
      <!-- @if : affiche le bloc seulement si la condition est vraie -->
      @if (auth.loggedIn()) {
        <!-- (click) : appelle la méthode quand l’utilisateur clique -->
        <button class="btn btn-secondary" (click)="auth.logout()">Se déconnecter</button>
      <!-- @else : affiché quand la condition du @if est fausse -->
      } @else {
        <a routerLink="/login">Connexion</a>
      }
      <app-selection-badge />
      <app-library-clock />
    </nav>
  </div>
</header>

<main class="container">
  <!-- router-outlet : emplacement où s’affiche la page de la route active -->
  <router-outlet />
</main>

<footer class="site-footer">
  <div class="container">Médiathèque · Formation Angular</div>
</footer>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, inject } from '@angular/core';
// FormBuilder : construit le formulaire à partir de sa description
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-contact',
  imports: [ReactiveFormsModule],
  templateUrl: './contact.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class Contact {
  // inject() : demande au conteneur une instance du service
  private fb = inject(FormBuilder);

  form = this.fb.nonNullable.group({
    name: [''],
    email: [''],
    message: [''],
  });

  submit(): void {
    console.log(this.form.getRawValue());
  }
}

<h1>Suggérer un média</h1>

<!-- Relie le champ au formulaire réactif déclaré dans la classe -->
<form class="form-card" [formGroup]="form" (ngSubmit)="submit()">
  <div class="field">
    <label for="name">Nom</label>
    <input id="name" formControlName="name">
  </div>
  <div class="field">
    <label for="email">Adresse e-mail</label>
    <input id="email" type="email" formControlName="email">
  </div>
  <div class="field">
    <label for="message">Le média que vous aimeriez voir</label>
    <textarea id="message" formControlName="message"></textarea>
  </div>
  <button class="btn" type="submit">Envoyer</button>
</form>

<!-- {{ }} : affiche la valeur de la classe -->
<p class="muted">Bonjour {{ form.controls.name.value }}</p>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Service, computed, signal } from '@angular/core';

export type Role = 'LECTEUR' | 'BIBLIOTHECAIRE';

const ACCOUNTS: Record<string, Role> = {
  'lecteur@example.com': 'LECTEUR',
  'biblio@example.com': 'BIBLIOTHECAIRE',
};

// Déclare un service, injectable dans les composants
@Service()
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class AuthService {
  readonly role = signal<Role | null>(null);
  // computed : valeur dérivée, recalculée seule quand ses dépendances changent
  readonly loggedIn = computed(() => this.role() !== null);
  readonly isLibrarian = computed(() => this.role() === 'BIBLIOTHECAIRE');

  login(role: Role): void {
    this.role.set(role);       // simulation d'une connexion
  }

  loginWith(email: string): boolean {
    const role = ACCOUNTS[email];
    if (!role) return false;
    this.role.set(role);
    return true;
  }

  logout(): void {
    this.role.set(null);
  }
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, inject } from '@angular/core';
// FormBuilder : construit le formulaire à partir de sa description
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from '../auth/auth.service';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-login',
  imports: [ReactiveFormsModule],
  templateUrl: './login.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class Login {
  // inject() : demande au conteneur une instance du service
  private fb = inject(FormBuilder);
  private auth = inject(AuthService);
  private router = inject(Router);

  form = this.fb.nonNullable.group({
    // Validators : validateurs intégrés d’Angular
    email: ['', [Validators.required, Validators.email]],
    password: ['', [Validators.required, Validators.minLength(8)]],
  });
  error = false;

  onSubmit(): void {
    if (this.form.invalid) return;
    if (!this.auth.loginWith(this.form.controls.email.value)) {
      this.error = true;
      return;
    }
    // navigateByUrl : navigation déclenchée depuis la classe
    this.router.navigateByUrl(this.auth.isLibrarian() ? '/admin' : '/catalogue');
  }
}

<h1>Connexion</h1>
<!-- Relie le champ au formulaire réactif déclaré dans la classe -->
<form class="form-card" [formGroup]="form" (ngSubmit)="onSubmit()">
  <div class="field">
    <label for="email">Adresse e-mail</label>
    <input id="email" type="email" formControlName="email">
    <!-- @if : affiche le bloc seulement si la condition est vraie -->
    @if (form.controls.email.touched && form.controls.email.invalid) {
      <p class="error">Adresse e-mail invalide.</p>
    }
  </div>
  <div class="field">
    <label for="password">Mot de passe</label>
    <input id="password" type="password" formControlName="password">
    @if (form.controls.password.touched && form.controls.password.invalid) {
      <p class="error">8 caractères minimum.</p>
    }
  </div>
  @if (error) {
    <p class="error">Compte inconnu.</p>
  }
  <button class="btn" type="submit" [disabled]="form.invalid">Se connecter</button>
</form>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Service, signal } from '@angular/core';
import { MEDIAS } from './data/medias';
import { Media } from './models/media';

// Déclare un service, injectable dans les composants
@Service()
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class MediaService {
  private medias = signal<Media[]>(MEDIAS);

  getAll(): Media[] {
    return this.medias();
  }

  getById(id: number): Media | undefined {
    return this.medias().find((m) => m.id === id);
  }

  search(query: string): Media[] {
    const q = query.trim().toLowerCase();
    return this.medias().filter(
      (m) => m.title.toLowerCase().includes(q) || m.author.toLowerCase().includes(q),
    );
  }

  add(media: Omit<Media, 'id'>): void {
    const id = Math.max(0, ...this.medias().map((m) => m.id)) + 1;
    this.medias.update((list) => [...list, { id, ...media }]);
  }
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, inject } from '@angular/core';
// FormBuilder : construit le formulaire à partir de sa description
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { MediaService } from '../../media.service';
import { MediaType } from '../../models/media';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-media-form',
  imports: [ReactiveFormsModule],
  templateUrl: './media-form.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class MediaForm {
  // inject() : demande au conteneur une instance du service
  private fb = inject(FormBuilder);
  private mediaService = inject(MediaService);

  form = this.fb.nonNullable.group({
    // Validators : validateurs intégrés d’Angular
    title: ['', Validators.required],
    author: ['', Validators.required],
    year: [2000, [Validators.required, Validators.min(1000), Validators.max(2100)]],
    type: ['livre' as MediaType, Validators.required],
    genre: ['', Validators.required],
    loanDays: [14, [Validators.required, Validators.min(1)]],
    available: [true],
  });

  submit(): void {
    if (this.form.invalid) {
      this.form.markAllAsTouched();
      return;
    }
    this.mediaService.add(this.form.getRawValue());
    this.form.reset();
  }
}

<!-- Relie le champ au formulaire réactif déclaré dans la classe -->
<form class="form-card" [formGroup]="form" (ngSubmit)="submit()">
  <div class="field">
    <label for="title">Titre</label>
    <input id="title" formControlName="title">
    <!-- @if : affiche le bloc seulement si la condition est vraie -->
    @if (form.controls.title.touched && form.controls.title.invalid) {
      <p class="error">Le titre est obligatoire.</p>
    }
  </div>
  <div class="field">
    <label for="author">Auteur ou réalisateur</label>
    <input id="author" formControlName="author">
    @if (form.controls.author.touched && form.controls.author.invalid) {
      <p class="error">L'auteur est obligatoire.</p>
    }
  </div>
  <div class="field">
    <label for="type">Type</label>
    <select id="type" formControlName="type">
      <option value="livre">Livre</option>
      <option value="film">Film</option>
      <option value="jeu">Jeu</option>
    </select>
  </div>
  <div class="field">
    <label for="genre">Genre</label>
    <input id="genre" formControlName="genre">
    @if (form.controls.genre.touched && form.controls.genre.invalid) {
      <p class="error">Le genre est obligatoire.</p>
    }
  </div>
  <div class="field">
    <label for="year">Année</label>
    <input id="year" type="number" formControlName="year">
    @if (form.controls.year.touched && form.controls.year.invalid) {
      <p class="error">L'année doit être comprise entre 1000 et 2100.</p>
    }
  </div>
  <div class="field">
    <label for="loanDays">Durée de prêt (jours)</label>
    <input id="loanDays" type="number" formControlName="loanDays">
    @if (form.controls.loanDays.touched && form.controls.loanDays.invalid) {
      <p class="error">La durée de prêt est d'au moins 1 jour.</p>
    }
  </div>
  <label><input type="checkbox" formControlName="available"> Disponible</label>
  <p><button class="btn" type="submit">Ajouter</button></p>
</form>

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, inject } from '@angular/core';
import { MediaService } from '../../media.service';
import { MediaForm } from '../media-form/media-form';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-admin-medias',
  imports: [MediaForm],
  templateUrl: './admin-medias.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class AdminMedias {
  // inject() : demande au conteneur une instance du service
  protected mediaService = inject(MediaService);
}

<h2>Gérer les médias</h2>
<app-media-form />

<table class="table">
  <thead><tr><th>Titre</th><th>Auteur</th><th>Type</th><th>Disponible</th></tr></thead>
  <tbody>
    <!-- @for : répète le bloc pour chaque élément ; track identifie chaque ligne -->
    @for (m of mediaService.getAll(); track m.id) {
      <!-- {{ }} : affiche la valeur de la classe -->
      <tr><td>{{ m.title }}</td><td>{{ m.author }}</td><td>{{ m.type }}</td><td>{{ m.available ? 'Oui' : 'Non' }}</td></tr>
    }
  </tbody>
</table>

{
  "medias": [
    {
      "id": 1,
      "title": "Dune",
      "author": "Frank Herbert",
      "year": 1965,
      "type": "livre",
      "genre": "Science-fiction",
      "available": true,
      "rating": 4.7,
      "loanDays": 21
    },
    {
      "id": 2,
      "title": "Le Petit Prince",
      "author": "Antoine de Saint-Exupéry",
      "year": 1943,
      "type": "livre",
      "genre": "Conte",
      "available": true,
      "rating": 4.8,
      "loanDays": 21
    },
    {
      "id": 3,
      "title": "L'Étranger",
      "author": "Albert Camus",
      "year": 1942,
      "type": "livre",
      "genre": "Roman",
      "available": false,
      "rating": 4.2,
      "loanDays": 21
    },
    {
      "id": 4,
      "title": "Fondation",
      "author": "Isaac Asimov",
      "year": 1951,
      "type": "livre",
      "genre": "Science-fiction",
      "available": true,
      "loanDays": 21
    },
    {
      "id": 5,
      "title": "Blade Runner",
      "author": "Ridley Scott",
      "year": 1982,
      "type": "film",
      "genre": "Science-fiction",
      "available": true,
      "rating": 4.5,
      "loanDays": 7
    },
    {
      "id": 6,
      "title": "Le Voyage de Chihiro",
      "author": "Hayao Miyazaki",
      "year": 2001,
      "type": "film",
      "genre": "Animation",
      "available": true,
      "rating": 4.9,
      "loanDays": 7
    },
    {
      "id": 7,
      "title": "Les Sept Samouraïs",
      "author": "Akira Kurosawa",
      "year": 1954,
      "type": "film",
      "genre": "Aventure",
      "available": false,
      "rating": 4.8,
      "loanDays": 7
    },
    {
      "id": 8,
      "title": "Le Fabuleux Destin d'Amélie Poulain",
      "author": "Jean-Pierre Jeunet",
      "year": 2001,
      "type": "film",
      "genre": "Comédie",
      "available": true,
      "rating": 4.3,
      "loanDays": 7
    },
    {
      "id": 9,
      "title": "Hollow Knight",
      "author": "Team Cherry",
      "year": 2017,
      "type": "jeu",
      "genre": "Aventure",
      "available": true,
      "rating": 4.6,
      "loanDays": 14
    },
    {
      "id": 10,
      "title": "Celeste",
      "author": "Maddy Makes Games",
      "year": 2018,
      "type": "jeu",
      "genre": "Plateforme",
      "available": true,
      "rating": 4.4,
      "loanDays": 14
    },
    {
      "id": 11,
      "title": "Portal 2",
      "author": "Valve",
      "year": 2011,
      "type": "jeu",
      "genre": "Puzzle",
      "available": false,
      "rating": 4.7,
      "loanDays": 14
    },
    {
      "id": 12,
      "title": "Stardew Valley",
      "author": "ConcernedApe",
      "year": 2016,
      "type": "jeu",
      "genre": "Simulation",
      "available": true,
      "loanDays": 14
    }
  ],
  "genres": [
    {
      "id": 1,
      "name": "Animation"
    },
    {
      "id": 2,
      "name": "Aventure"
    },
    {
      "id": 3,
      "name": "Comédie"
    },
    {
      "id": 4,
      "name": "Conte"
    },
    {
      "id": 5,
      "name": "Plateforme"
    },
    {
      "id": 6,
      "name": "Puzzle"
    },
    {
      "id": 7,
      "name": "Roman"
    },
    {
      "id": 8,
      "name": "Science-fiction"
    },
    {
      "id": 9,
      "name": "Simulation"
    }
  ],
  "users": [
    {
      "id": 1,
      "email": "lecteur@example.com",
      "role": "lecteur"
    },
    {
      "id": 2,
      "email": "biblio@example.com",
      "role": "bibliothecaire"
    }
  ],
  "loans": []
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideRouter, withComponentInputBinding } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    // provideRouter : active le routeur avec la liste des routes
    provideRouter(routes, withComponentInputBinding()),
    // provideHttpClient : active HttpClient pour appeler des API
    provideHttpClient(),
  ],
};

import { HttpClient } from '@angular/common/http';
// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Service, inject, signal } from '@angular/core';
import { Observable } from 'rxjs';
import { Media } from './models/media';

const API = 'http://localhost:3000';

// Déclare un service, injectable dans les composants
@Service()
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class MediaService {
  // inject() : demande au conteneur une instance du service
  private http = inject(HttpClient);
  private medias = signal<Media[]>([]);

  fetchAll(): Observable<Media[]> {
    // Requête HTTP : renvoie un Observable, qui ne part qu’à l’abonnement
    return this.http.get<Media[]>(`${API}/medias`);
  }

  fetchOne(id: number): Observable<Media> {
    return this.http.get<Media>(`${API}/medias/${id}`);
  }

  load(): void {
    // subscribe : s’abonne au flux pour recevoir ses valeurs
    this.fetchAll().subscribe((list) => this.medias.set(list));
  }

  getAll(): Media[] {
    return this.medias();
  }

  getById(id: number): Media | undefined {
    return this.medias().find((m) => m.id === id);
  }

  search(query: string): Media[] {
    const q = query.trim().toLowerCase();
    return this.medias().filter(
      (m) => m.title.toLowerCase().includes(q) || m.author.toLowerCase().includes(q),
    );
  }

  add(media: Omit<Media, 'id'>): void {
    this.http
      .post<Media>(`${API}/medias`, media)
      .subscribe((created) => this.medias.update((list) => [...list, created]));
  }
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, inject } from '@angular/core';
import { AuthService } from './auth/auth.service';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { LibraryClock } from './library-clock/library-clock';
import { MediaService } from './media.service';
import { SelectionBadge } from './selection-badge/selection-badge';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-root',
  imports: [RouterOutlet, RouterLink, RouterLinkActive, SelectionBadge, LibraryClock],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class App {
  // inject() : demande au conteneur une instance du service
  protected auth = inject(AuthService);

  constructor() {
    inject(MediaService).load();
  }
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, inject } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { map } from 'rxjs';
import { MediaService } from '../media.service';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-available-now',
  imports: [AsyncPipe],
  templateUrl: './available-now.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class AvailableNow {
  // inject() : demande au conteneur une instance du service
  private mediaService = inject(MediaService);

  // pipe : enchaîne les opérateurs RxJS qui transforment le flux
  available$ = this.mediaService.fetchAll().pipe(
    map((list) => list.filter((m) => m.available)),
  );
}

<h2>Disponibles maintenant</h2>
<!-- @if : affiche le bloc seulement si la condition est vraie -->
@if (available$ | async; as medias) {
  <ul>
    <!-- @for : répète le bloc pour chaque élément ; track identifie chaque ligne -->
    @for (m of medias; track m.id) {
      <!-- {{ }} : affiche la valeur de la classe -->
      <li>{{ m.title }} ({{ m.author }})</li>
    <!-- @empty : affiché quand la liste est vide -->
    } @empty {
      <li>Aucun média disponible.</li>
    }
  </ul>
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { AvailableNow } from '../available-now/available-now';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-home',
  imports: [RouterLink, AvailableNow],
  templateUrl: './home.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class Home {}

<section class="hero">
  <h1>Bienvenue à la médiathèque</h1>
  <p>Recherchez un livre, un film ou un jeu, et empruntez-le en quelques clics.</p>
  <!-- routerLink : lien interne, sans rechargement de la page -->
  <a class="btn" routerLink="/catalogue">Voir le catalogue</a>
  <a routerLink="/catalogue" [queryParams]="{ q: 'dune' }">Chercher Dune</a>
</section>

<app-available-now />

import { HttpClient } from '@angular/common/http';
// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Service, inject, signal } from '@angular/core';
import { Observable } from 'rxjs';
import { Media } from './models/media';

const API = 'http://localhost:3000';

// Déclare un service, injectable dans les composants
@Service()
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class MediaService {
  // inject() : demande au conteneur une instance du service
  private http = inject(HttpClient);
  private medias = signal<Media[]>([]);

  fetchAll(): Observable<Media[]> {
    // Requête HTTP : renvoie un Observable, qui ne part qu’à l’abonnement
    return this.http.get<Media[]>(`${API}/medias`);
  }

  fetchOne(id: number): Observable<Media> {
    return this.http.get<Media>(`${API}/medias/${id}`);
  }

  load(): void {
    // subscribe : s’abonne au flux pour recevoir ses valeurs
    this.fetchAll().subscribe((list) => this.medias.set(list));
  }

  getAll(): Media[] {
    return this.medias();
  }

  getById(id: number): Media | undefined {
    return this.medias().find((m) => m.id === id);
  }

  search(query: string): Media[] {
    const q = query.trim().toLowerCase();
    return this.medias().filter(
      (m) => m.title.toLowerCase().includes(q) || m.author.toLowerCase().includes(q),
    );
  }

  searchApi(term: string): Observable<Media[]> {
    return this.http.get<Media[]>(`${API}/medias`, { params: { q: term } });
  }

  add(media: Omit<Media, 'id'>): void {
    this.http
      .post<Media>(`${API}/medias`, media)
      .subscribe((created) => this.medias.update((list) => [...list, created]));
  }
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, effect, inject, input } from '@angular/core';
import { AsyncPipe } from '@angular/common';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { debounceTime, distinctUntilChanged, startWith, switchMap } from 'rxjs';
import { MediaService } from '../media.service';
import { MediaCard } from '../media-card/media-card';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-media-search',
  imports: [AsyncPipe, ReactiveFormsModule, MediaCard],
  templateUrl: './media-search.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class MediaSearch {
  // inject() : demande au conteneur une instance du service
  private mediaService = inject(MediaService);

  q = input<string>();                                   // terme de départ (?q=... du catalogue)
  search = new FormControl('', { nonNullable: true });

  // pipe : enchaîne les opérateurs RxJS qui transforment le flux
  results$ = this.search.valueChanges.pipe(
    startWith(''),
    // debounceTime : attend une pause de saisie avant d’agir
    debounceTime(300),
    // distinctUntilChanged : ignore une valeur identique à la précédente
    distinctUntilChanged(),
    // switchMap : annule la requête précédente quand une nouvelle arrive
    switchMap((term) => this.mediaService.searchApi(term)),
  );

  constructor() {
    // effect : code relancé à chaque changement des signaux qu’il lit
    effect(() => this.search.setValue(this.q() ?? ''));  // le champ repart de q
  }
}

<div class="search">
  <!-- Relie le champ au formulaire réactif déclaré dans la classe -->
  <input [formControl]="search" placeholder="Rechercher un titre, un auteur...">
</div>
<!-- @if : affiche le bloc seulement si la condition est vraie -->
@if (results$ | async; as list) {
  @if (list.length === 0) {
    <p>Aucun résultat.</p>
  }
  <section class="grid">
    <!-- @for : répète le bloc pour chaque élément ; track identifie chaque ligne -->
    @for (m of list; track m.id) {
      <app-media-card [media]="m" />
    }
  </section>
}

/* barre de recherche du catalogue (composant media-search) */
.search { display: flex; gap: 0.5rem; margin: 1.5rem 0; }
.search input { flex: 1; min-width: 0; }

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, input } from '@angular/core';
import { MediaSearch } from '../media-search/media-search';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-catalogue',
  imports: [MediaSearch],
  templateUrl: './catalogue.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class Catalogue {
  q = input<string>();     // reçoit ?q=... dans l'adresse
}

<h1>Catalogue</h1>
<app-media-search [q]="q()" />

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, inject, signal } from '@angular/core';
import { Media } from '../models/media';
import { MediaService } from '../media.service';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-available-now',
  templateUrl: './available-now.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class AvailableNow {
  // inject() : demande au conteneur une instance du service
  private mediaService = inject(MediaService);

  medias = signal<Media[]>([]);
  // signal : valeur réactive ; on la lit avec () et on la change avec set() ou update()
  loading = signal(true);
  error = signal<string | null>(null);

  constructor() {
    // subscribe : s’abonne au flux pour recevoir ses valeurs
    this.mediaService.fetchAll().subscribe({
      next: (list) => {
        this.medias.set(list.filter((m) => m.available));
        this.loading.set(false);
      },
      error: () => {
        this.error.set('Impossible de charger les médias.');
        this.loading.set(false);
      },
    });
  }
}

<h2>Disponibles maintenant</h2>
<!-- @if : affiche le bloc seulement si la condition est vraie -->
@if (loading()) {
  <p>Chargement...</p>
<!-- @else : affiché quand la condition du @if est fausse -->
} @else if (error(); as message) {
  <!-- {{ }} : affiche la valeur de la classe -->
  <p class="error">{{ message }}</p>
} @else {
  <ul>
    <!-- @for : répète le bloc pour chaque élément ; track identifie chaque ligne -->
    @for (m of medias(); track m.id) {
      <li>{{ m.title }} ({{ m.author }})</li>
    <!-- @empty : affiché quand la liste est vide -->
    } @empty {
      <li>Aucun média disponible.</li>
    }
  </ul>
}

// Fonctions et décorateurs d’Angular utilisés ci-dessous
import { Component, computed } from '@angular/core';
// httpResource : appel HTTP réactif, avec chargement et erreur gérés
import { httpResource } from '@angular/common/http';
import { Media } from '../models/media';

// @Component : la fiche d’identité du composant (sélecteur, template, style)
@Component({
  selector: 'app-available-now',
  templateUrl: './available-now.html',
})
// Classe : regroupe les données (propriétés) et le comportement (méthodes)
export class AvailableNow {
  medias = httpResource<Media[]>(() => 'http://localhost:3000/medias', {
    defaultValue: [],
  });

  // computed : valeur dérivée, recalculée seule quand ses dépendances changent
  available = computed(() => this.medias.value().filter((m) => m.available));
}

<h2>Disponibles maintenant</h2>
<!-- (click) : appelle la méthode quand l’utilisateur clique -->
<button class="btn" (click)="medias.reload()">Recharger</button>
<!-- @if : affiche le bloc seulement si la condition est vraie -->
@if (medias.isLoading()) {
  <p>Chargement...</p>
<!-- @else : affiché quand la condition du @if est fausse -->
} @else if (medias.error()) {
  <p class="error">Impossible de charger les médias.</p>
} @else {
  <ul>
    <!-- @for : répète le bloc pour chaque élément ; track identifie chaque ligne -->
    @for (m of available(); track m.id) {
      <!-- {{ }} : affiche la valeur de la classe -->
      <li>{{ m.title }} ({{ m.author }})</li>
    <!-- @empty : affiché quand la liste est vide -->
    } @empty {
      <li>Aucun média disponible.</li>
    }
  </ul>
}