<c-vars default_open="false"></c-vars>

<div x-data="{
    open: {{ default_open|lower }},
    showDialog() {
      this.open = true;
      // Add event listener for Escape key when dialog opens
      setTimeout(() => {
        window.addEventListener('keydown', this.handleEscape);
      }, 10);
    },
    hideDialog() {
      this.open = false;
      // Remove event listener when dialog closes
      window.removeEventListener('keydown', this.handleEscape);
    },
    handleEscape: function(e) {
      if (e.key === 'Escape' && this.open) {
        this.hideDialog();
      }
    }
  }"
  x-init="$watch('open', value => {
    if (value) {
      document.body.classList.add('overflow-hidden');
      window.addEventListener('keydown', handleEscape);
    } else {
      document.body.classList.remove('overflow-hidden');
      window.removeEventListener('keydown', handleEscape);
    }
  })"
  @keydown.escape.window="if (open) hideDialog()"
  {{ attrs }}
>
  {{ slot }}
</div>
