Dialog

Dialog do
	DialogTrigger do
		Button { "Open Dialog" }
	end
	DialogContent do
		DialogHeader do
			DialogTitle { "PhlexUI to the rescue" }
			DialogDescription { "PhlexUI helps you build accessible standard compliant web apps with ease" }
		end
		DialogMiddle do
			AspectRatio(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do
				img(
					alt: "Placeholder",
					loading: "lazy",
					src:
						helpers.image_path("pattern.jpg")
				)
			end
		end
		DialogFooter do
			Button(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
			Button { "Save" }
		end
	end
end

div(class: 'flex flex-wrap justify-center gap-2') do
	Dialog do
		DialogTrigger do
			Button { "Small Dialog" }
		end
		DialogContent(size: :sm) do
			DialogHeader do
				DialogTitle { "PhlexUI to the rescue" }
				DialogDescription { "PhlexUI helps you build accessible standard compliant web apps with ease" }
			end
			DialogMiddle do
				AspectRatio(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do
					img(
						alt: "Placeholder",
						loading: "lazy",
						src:
							helpers.image_path("pattern.jpg")
					)
				end
			end
			DialogFooter do
				Button(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
				Button { "Save" }
			end
		end
	end

	Dialog do
		DialogTrigger do
			Button { "Large Dialog" }
		end
		DialogContent(size: :lg) do
			DialogHeader do
				DialogTitle { "PhlexUI to the rescue" }
				DialogDescription { "PhlexUI helps you build accessible standard compliant web apps with ease" }
			end
			DialogMiddle do
				AspectRatio(aspect_ratio: "16/9", class: 'rounded-md overflow-hidden border') do
					img(
						alt: "Placeholder",
						loading: "lazy",
						src:
							helpers.image_path("pattern.jpg")
					)
				end
			end
			DialogFooter do
				Button(variant: :outline, data: { action: 'click->dismissable#dismiss' }) { "Cancel" }
				Button { "Save" }
			end
		end
	end
end