{% load static fluent_ui %}<dialog class="fw-dialog" id="demo-dialog" aria-labelledby="demo-dialog-title"><div class="fw-dialog-head"><h2 id="demo-dialog-title">Project aanmaken</h2><button class="fw-btn fw-btn--subtle fw-btn--icon" data-close aria-label="Sluiten"><svg class="fw-icon"><use href="{% static 'fluent_web/icons.svg' %}#i-dismiss"/></svg></button></div><form id="demo-form"><div class="fw-dialog-body"><p style="margin-top:0;color:var(--fw-muted)">Geef je nieuwe project een naam. Je kunt dit later aanpassen.</p><label class="fw-field"><span class="fw-label">Projectnaam <span style="color:var(--fw-danger)">*</span></span><input class="fw-input" name="project" placeholder="Bijv. Klantenportaal" required maxlength="80"></label></div><div class="fw-dialog-foot"><button type="button" class="fw-btn" data-close>Annuleren</button><button class="fw-btn fw-btn--primary" type="submit">Aanmaken</button></div></form></dialog>
<dialog class="fw-dialog fw-drawer" id="demo-drawer" aria-labelledby="drawer-title"><div class="fw-dialog-head"><h2 id="drawer-title">Projectdetails</h2><button class="fw-btn fw-btn--subtle fw-btn--icon" data-close aria-label="Sluiten"><svg class="fw-icon"><use href="{% static 'fluent_web/icons.svg' %}#i-dismiss"/></svg></button></div><div class="fw-dialog-body"><span class="fw-badge fw-badge--success">Actief</span><h3>Klantenportaal</h3><p>Alle informatie op één plek. Een zijpaneel houdt de context van je werk zichtbaar.</p><label class="fw-field">Eigenaar<input class="fw-input" value="Sophie de Vries"></label><p class="fw-muted">Laatst bijgewerkt: vandaag</p></div></dialog>
<div class="fw-toast-area" id="toast-area" aria-live="polite" aria-atomic="false"></div>