<neo-dialog dismissible="false">
  <neo-button data-neo-dialog-trigger>Delete project</neo-button>
  <dialog>
    <header data-neo-dialog-header>
      <h2 data-neo-dialog-title>Delete project?</h2>
      <p data-neo-dialog-description>This will remove all builds, secrets, and members. The project name cannot be reused for 30 days.</p>
    </header>
    <footer data-neo-dialog-footer>
      <neo-button data-neo-dialog-close>Cancel</neo-button>
      <neo-button variant="danger" data-neo-dialog-close>Delete</neo-button>
    </footer>
  </dialog>
</neo-dialog>

package examples

import "github.com/romshark/morpheus/neo"

templ DialogNonDismissible() {
	@neo.Dialog(neo.DialogOpts{Dismissible: neo.Set(neo.DismissibleOff)}) {
		<neo-button { neo.DialogTrigger()... }>Delete project</neo-button>
		<dialog>
			@neo.DialogHeader() {
				@neo.DialogTitle() {
					Delete project?
				}
				@neo.DialogDescription() {
					This will remove all builds, secrets, and members.
					The project name cannot be reused for 30 days.
				}
			}
			@neo.DialogFooter() {
				<neo-button { neo.DialogClose()... }>Cancel</neo-button>
				<neo-button variant="danger" { neo.DialogClose()... }>
					Delete
				</neo-button>
			}
		</dialog>
	}
}

<neo-dialog class="dialog-custom-surface">
  <neo-button data-neo-dialog-trigger>Open frost glass</neo-button>
  <dialog>
    <header data-neo-dialog-header>
      <h2 data-neo-dialog-title>Frost glass surface</h2>
      <p data-neo-dialog-description>Two stacked blurs: the <code>::backdrop</code> frosts the page behind the modal at 6px (with a soft 18% black tint), and the dialog surface adds another 22px on top of its own 42% dark wash. The page reads through both layers as a deep frosted scene: soft outside the dialog, denser within.</p>
    </header>
    <footer data-neo-dialog-footer>
      <neo-button data-neo-dialog-close>Close</neo-button>
      <neo-button variant="primary" data-neo-dialog-close>OK</neo-button>
    </footer>
  </dialog>
</neo-dialog>

package examples

import "github.com/romshark/morpheus/neo"

templ DialogCustomSurface() {
	@neo.DialogAttrs(neo.DialogOpts{}, templ.Attributes{
		"class": "dialog-custom-surface",
	}) {
		<neo-button { neo.DialogTrigger()... }>Open frost glass</neo-button>
		<dialog>
			@neo.DialogHeader() {
				@neo.DialogTitle() {
					Frost glass surface
				}
				@neo.DialogDescription() {
					Two stacked blurs: the
					<code>::backdrop</code> frosts the
					page behind the modal at 6px (with a
					soft 18% black tint), and the dialog
					surface adds another 22px on top of
					its own 42% dark wash. The page reads
					through both layers as a deep frosted
					scene: soft outside the dialog,
					denser within.
				}
			}
			@neo.DialogFooter() {
				<neo-button { neo.DialogClose()... }>Close</neo-button>
				<neo-button variant="primary" { neo.DialogClose()... }>OK</neo-button>
			}
		</dialog>
	}
}

.dialog-custom-surface {
	--neo-dialog-bg: rgba(15, 16, 22, 0.42);
	--neo-dialog-color: #f4f4f5;
	--neo-dialog-border-color: rgba(255, 255, 255, 0.12);
	--neo-dialog-blur: 22px;
	--neo-dialog-overlay-bg: rgba(0, 0, 0, 0.18);
	--neo-dialog-overlay-blur: 6px;
	--muted: rgba(244, 244, 245, 0.65);
}

<neo-dialog
  data-on:neo-dialog-close="$dialog_async_ctrl.abort(); $dialog_async_ctrl = new AbortController()"
  data-on:neo-dialog-open="@post(&#39;/dialog/async-load&#39;, { requestCancellation: $dialog_async_ctrl })"
  data-signals="{dialog_async_ctrl: new AbortController(), dialog_async_html: &#39;&lt;h3&gt;Roman Scharkov&lt;/h3&gt;&lt;p class=&#34;dialog-async-meta&#34;&gt;Creator of Morpheus · &lt;code&gt;roman.scharkov@example.com&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Builds Morpheus, the server-driven web component kit this site is built with.&lt;/p&gt;&lt;h3&gt;Daniel Scharkov&lt;/h3&gt;&lt;p class=&#34;dialog-async-meta&#34;&gt;Co-maker of Morpheus · &lt;code&gt;daniel.scharkov@example.com&lt;/code&gt;&lt;/p&gt;&lt;p&gt;Works on Morpheus with his brother Roman; the two ship it together.&lt;/p&gt;&#39;}"
>
  <neo-button data-neo-dialog-trigger>Load profile</neo-button>
  <dialog>
    <header data-neo-dialog-header>
      <h2 data-neo-dialog-title>Team members</h2>
      <p data-neo-dialog-description>Loaded fresh from the server each time you open this dialog.</p>
    </header>
    <neo-layout id="dialog-async-body" class="dialog-async-slot" column>
      <neo-layout
        class="dialog-async-skeleton"
        column
        data-neo-async-placeholder
      >
        <neo-skeleton class="dialog-async-loading-title"></neo-skeleton>
        <neo-skeleton class="dialog-async-loading-meta"></neo-skeleton>
        <neo-skeleton class="dialog-async-loading-line-1"></neo-skeleton>
        <neo-skeleton class="dialog-async-loading-line-2"></neo-skeleton>
        <neo-skeleton class="dialog-async-loading-line-3"></neo-skeleton>
      </neo-layout>
    </neo-layout>
    <footer data-neo-dialog-footer>
      <neo-button data-neo-dialog-close>Close</neo-button>
    </footer>
  </dialog>
</neo-dialog>

package examples

import "github.com/romshark/morpheus/neo"

// dialog_async_html seeds the demo simulator's response; a real app drops
// it and lets the server return the body for /dialog/async-load.
templ DialogAsyncLoading() {
	@neo.DialogAttrs(neo.DialogOpts{}, templ.Attributes{
		"data-signals":             `{dialog_async_ctrl: new AbortController(), dialog_async_html: '<h3>Roman Scharkov</h3><p class="dialog-async-meta">Creator of Morpheus · <code>roman.scharkov@example.com</code></p><p>Builds Morpheus, the server-driven web component kit this site is built with.</p><h3>Daniel Scharkov</h3><p class="dialog-async-meta">Co-maker of Morpheus · <code>daniel.scharkov@example.com</code></p><p>Works on Morpheus with his brother Roman; the two ship it together.</p>'}`,
		"data-on:neo-dialog-open":  "@post('/dialog/async-load', { requestCancellation: $dialog_async_ctrl })",
		"data-on:neo-dialog-close": "$dialog_async_ctrl.abort(); $dialog_async_ctrl = new AbortController()",
	}) {
		<neo-button { neo.DialogTrigger()... }>Load profile</neo-button>
		<dialog>
			@neo.DialogHeader() {
				@neo.DialogTitle() {
					Team members
				}
				@neo.DialogDescription() {
					Loaded fresh from the server each time you open this dialog.
				}
			}
			<neo-layout id="dialog-async-body" class="dialog-async-slot" column>
				<neo-layout class="dialog-async-skeleton" column { neo.AsyncPlaceholder()... }>
					<neo-skeleton class="dialog-async-loading-title"></neo-skeleton>
					<neo-skeleton class="dialog-async-loading-meta"></neo-skeleton>
					<neo-skeleton class="dialog-async-loading-line-1"></neo-skeleton>
					<neo-skeleton class="dialog-async-loading-line-2"></neo-skeleton>
					<neo-skeleton class="dialog-async-loading-line-3"></neo-skeleton>
				</neo-layout>
			</neo-layout>
			@neo.DialogFooter() {
				<neo-button { neo.DialogClose()... }>Close</neo-button>
			}
		</dialog>
	}
}

.dialog-async-loading-title {
	width: 50%;
	height: 1.4rem;
}

.dialog-async-loading-meta {
	width: 30%;
	height: 1rem;
}

.dialog-async-loading-line-1 {
	width: 90%;
	height: 0.85rem;
}

.dialog-async-loading-line-2 {
	width: 75%;
	height: 0.85rem;
}

.dialog-async-loading-line-3 {
	width: 80%;
	height: 0.85rem;
}

package examples

import (
	"github.com/romshark/morpheus/datastar"
	"github.com/romshark/morpheus/neo"
)

templ DialogAsyncFailure() {
	@datastar.DialogAsync(datastar.DialogAsyncOpts{
		ID:            "dialogAsyncDemo",
		URL:           "/dialog/asyncload/",
		Title:         "Team member",
		Description:   "Loaded fresh from the server each time you open this dialog.",
		CloseLabel:    "Close",
		ExtraPostOpts: "retry: 'auto', retryInterval: 1000, retryScaler: 2, retryMaxWait: 30000, retryMaxCount: 2",
		Loading:       dialogAsyncFailureLoading(),
		Failed:        dialogAsyncFailureFailed(),
	}) {
		Load profile
	}
}

// Wrapped in [data-neo-async-placeholder] by DialogAsync so the
// dialog restores it after close and before retry/reopen.
templ dialogAsyncFailureLoading() {
	<neo-skeleton class="dialog-async-failure-title"></neo-skeleton>
	<neo-skeleton class="dialog-async-failure-meta"></neo-skeleton>
	<neo-skeleton class="dialog-async-failure-line-1"></neo-skeleton>
	<neo-skeleton class="dialog-async-failure-line-2"></neo-skeleton>
}

// Swapped into <div id="<ID>-body"> once Datastar fires
// retries-failed. The retry button carries
// [data-neo-popover-async-retry] so DialogAsync re-fires the
// @post action when clicked.
templ dialogAsyncFailureFailed() {
	<div class="popover-async-loading popover-async-failed" role="alert">
		@neo.Icon("triangle-alert")
		<strong>Couldn't load content.</strong>
		<neo-button { neo.PopoverAsyncRetry()... }>
			Retry
		</neo-button>
	</div>
}

.dialog-async-failure-title {
	width: 50%;
	height: 1.4rem;
}

.dialog-async-failure-meta {
	width: 30%;
	height: 1rem;
}

.dialog-async-failure-line-1 {
	width: 90%;
	height: 0.85rem;
}

.dialog-async-failure-line-2 {
	width: 75%;
	height: 0.85rem;
}

<neo-dialog
  data-on:neo-dialog-close="$dialog_patching_ctrl.abort(); $dialog_patching_ctrl = new AbortController()"
  data-on:neo-dialog-open="@post(&#39;/dialog/work-stream&#39;, { requestCancellation: $dialog_patching_ctrl })"
  data-signals="{dialog_patching_ctrl: new AbortController()}"
>
  <neo-button data-neo-dialog-trigger>Run deployment</neo-button>
  <dialog>
    <header data-neo-dialog-header>
      <h2 data-neo-dialog-title>Deployment</h2>
      <p data-neo-dialog-description>The server streams progress patches; the body grows inside a <code>&lt;neo-elastic&gt;</code> wrapper that animates the height change.</p>
    </header>
    <neo-layout id="dialog-patching-body" class="dialog-patching-slot" column>
      <neo-elastic>
        <div id="dialog-patching-steps">
          <neo-layout
            class="dialog-patching-skeleton"
            column
            data-neo-async-placeholder
          >
            <neo-skeleton
              class="dialog-continuous-patching-line-1"
            ></neo-skeleton>
            <neo-skeleton
              class="dialog-continuous-patching-line-2"
            ></neo-skeleton>
            <neo-skeleton
              class="dialog-continuous-patching-line-3"
            ></neo-skeleton>
          </neo-layout>
        </div>
      </neo-elastic>
    </neo-layout>
  </dialog>
</neo-dialog>

package examples

import "github.com/romshark/morpheus/neo"

templ DialogContinuousPatching() {
	@neo.DialogAttrs(neo.DialogOpts{}, templ.Attributes{
		"data-signals":             "{dialog_patching_ctrl: new AbortController()}",
		"data-on:neo-dialog-open":  "@post('/dialog/work-stream', { requestCancellation: $dialog_patching_ctrl })",
		"data-on:neo-dialog-close": "$dialog_patching_ctrl.abort(); $dialog_patching_ctrl = new AbortController()",
	}) {
		<neo-button { neo.DialogTrigger()... }>Run deployment</neo-button>
		<dialog>
			@neo.DialogHeader() {
				@neo.DialogTitle() {
					Deployment
				}
				@neo.DialogDescription() {
					The server streams progress patches; the
					body grows inside a
					<code>{ `<neo-elastic>` }</code> wrapper
					that animates the height change.
				}
			}
			<neo-layout id="dialog-patching-body" class="dialog-patching-slot" column>
				<neo-elastic>
					<div id="dialog-patching-steps">
						<neo-layout class="dialog-patching-skeleton" column { neo.AsyncPlaceholder()... }>
							<neo-skeleton class="dialog-continuous-patching-line-1"></neo-skeleton>
							<neo-skeleton class="dialog-continuous-patching-line-2"></neo-skeleton>
							<neo-skeleton class="dialog-continuous-patching-line-3"></neo-skeleton>
						</neo-layout>
					</div>
				</neo-elastic>
			</neo-layout>
		</dialog>
	}
}

.dialog-continuous-patching-line-1 {
	width: 60%;
	height: 1rem;
}

.dialog-continuous-patching-line-2 {
	width: 80%;
	height: 1rem;
}

.dialog-continuous-patching-line-3 {
	width: 70%;
	height: 1rem;
}