/* widget: Notities */
/* =========================================================
   Notes widget
==========================================================*/
function mountNotes(root, initState){
  const S={theme:initState?.theme||'sun',large:!!initState?.large};
  root.innerHTML='<div class="notes-app"><div class="notes-tools"><span class="notes-color-label"></span><div class="notes-swatches"></div><button class="notes-size" type="button">Aa</button><output class="notes-count"></output></div></div>';
  const ta = document.createElement("textarea");
  ta.className = "notes";
  ta.placeholder = T("notesPh");
  if(initState && typeof initState.text==="string") ta.value = initState.text;
  const app=root.querySelector('.notes-app'),swatches=root.querySelector('.notes-swatches');
  ['sun','mint','sky','lilac'].forEach(theme=>{const b=document.createElement('button');b.type='button';b.dataset.theme=theme;b.setAttribute('aria-label',theme);b.onclick=()=>{S.theme=theme;apply()};swatches.append(b)});
  app.appendChild(ta);
  function apply(){app.dataset.theme=S.theme;ta.classList.toggle('large',S.large);root.querySelectorAll('.notes-swatches button').forEach(b=>{const on=b.dataset.theme===S.theme;b.classList.toggle('on',on);b.setAttribute('aria-pressed',String(on))});root.querySelector('.notes-size').classList.toggle('on',S.large);root.querySelector('.notes-size').setAttribute('aria-pressed',String(S.large));root.querySelector('.notes-count').textContent=T('notesCount').replace('{count}',ta.value.length)}
  function labels(){ta.placeholder=T('notesPh');root.querySelector('.notes-color-label').textContent=T('notesColor');root.querySelector('.notes-size').title=T('notesLarge');apply()}
  ta.addEventListener('input',apply);root.querySelector('.notes-size').onclick=()=>{S.large=!S.large;apply()};document.addEventListener("langchange",labels);labels();
  return { getState: ()=>({text:ta.value,theme:S.theme,large:S.large}) };
}