# Patterns UI et Rendu

Le projet utilise du JavaScript Vanilla avec des gabarits de chaînes de caractères (template strings) pour le rendu du DOM.

## Rendu de Section
La fonction `createSection` est souvent utilisée pour générer le HTML d'une section de détail.

```javascript
function createSection(id, icon, title, content, options = {}) {
  // icon est souvent un span avec data-icon pour IconManager
  return `
    <section class="device-section" id="${id}">
      <div class="section-header">
        <h3>${icon}<span class="section-title">${title}</span></h3>
        ${options.actionsHtml || ''}
      </div>
      <div class="section-body">
        ${content}
      </div>
    </section>
  `;
}
```

## Gestion des Icônes
Le système utilise `IconManager` pour injecter des SVG à partir d'attributs `data-icon`.
Après avoir injecté du HTML contenant des `data-icon`, il faut appeler :
```javascript
if (window.IconManager) {
  window.IconManager.inlineSvgIcons(containerElement);
}
```

## Échappement HTML
Utilisez toujours `window.BenchUtils.escapeHtml()` pour les données venant de l'API afin d'éviter les failles XSS.

## Interaction et État
Les pages utilisent souvent des variables d'état globales simples (ex: `isEditing`, `currentDevice`) et re-rendent la section entière lors d'un changement d'état.