<!-- 
  Component: dialog.html
  Configurable State: themeColor ('primary'|'secondary'|'destructive'), size ('sm'|'md'|'lg'), isOpen (boolean)
  Usage: Bind styles dynamically using hx-class="{ 'bg-primary': themeColor === 'primary' }" or hx-style="{ width: size === 'lg' ? '100%' : 'auto' }"
-->
<!-- Dialog (Modal) Component - HTMX Pattern -->
<!-- 
  Usage: 
  <button hx-ext="reactive" hx-state="{ themeColor: \'primary\', size: \'md\', isOpen: false }"  hx-get="/api/dialog/settings" hx-target="#dialog-container">Open Settings</button>
  <div id="dialog-container"></div>
-->
<div id="dialog-backdrop" class="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 flex items-center justify-center p-4 sm:p-0">
  <div class="fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg">
    
    <div class="flex flex-col space-y-1.5 text-center sm:text-left">
      <h2 class="text-lg font-semibold leading-none tracking-tight">{title}</h2>
      <p class="text-sm text-muted-foreground">{description}</p>
    </div>
    
    <div class="py-4">
      {content}
    </div>
    
    <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
      <!-- Close button removes the dialog from the DOM using hx-target and hx-swap -->
      <button 
        hx-on:click="document.getElementById('dialog-backdrop').remove()"
        class="mt-2 sm:mt-0 inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2"
      >
        Cancel
      </button>
      <button 
        hx-post="{submit_url}"
        hx-target="#dialog-backdrop"
        hx-swap="outerHTML"
        class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2"
      >
        Save changes
      </button>
    </div>
    
    <!-- Top right close X -->
    <button hx-on:click="document.getElementById('dialog-backdrop').remove()" class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
      <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg>
      <span class="sr-only">Close</span>
    </button>
  </div>
</div>