component CookiePreferencesDialog {
  props {
    title = "Cookie preferences"
    description = "Choose which optional cookies you allow. Essential cookies are always enabled."
    saveLabel = "Save preferences"
    acceptLabel = "Accept all"
    rejectLabel = "Reject optional"
    open = false
    class = ""
  }
  state visible = open
  state analytics = false
  state marketing = false
  view {
    <div data-show="visible" class="wire-overlay {class}" role="presentation"><section role="dialog" aria-modal="true" aria-labelledby="cookie-preferences-title" class="wire-dialog wire-cookie-dialog"><h2 id="cookie-preferences-title" class="wire-dialog__title">{title}</h2><p class="wire-dialog__description">{description}</p><div class="wire-cookie-list"><label class="wire-cookie-option"><span><strong>Essential</strong><small>Required for security and core functionality.</small></span><input type="checkbox" checked disabled /></label><label class="wire-cookie-option"><span><strong>Analytics</strong><small>Helps improve product performance.</small></span><input type="checkbox" checked="{analytics}" @change="analytics = event.target.checked" /></label><label class="wire-cookie-option"><span><strong>Marketing</strong><small>Supports relevant campaigns and measurement.</small></span><input type="checkbox" checked="{marketing}" @change="marketing = event.target.checked" /></label></div><div class="wire-dialog__actions wire-dialog__actions--wrap"><button type="button" class="wire-btn wire-btn--ghost" @click="analytics = false; marketing = false">{rejectLabel}</button><button type="button" class="wire-btn wire-btn--default" @click="analytics = true; marketing = true">{acceptLabel}</button><button type="button" class="wire-btn wire-btn--primary" @click="visible = false">{saveLabel}</button></div></section></div>
  }
}