<ui5-button id="openDialogButton" design="Emphasized">Open Dialog</ui5-button>

<ui5-dialog id="hello-dialog" header-text="Register Form">
	<section class="login-form">
		<div>
			<ui5-label for="username" required>Username: </ui5-label>
			<ui5-input id="username"></ui5-input>
		</div>

		<div>
			<ui5-label for="password" required>Password: </ui5-label>
			<ui5-input id="password" type="Password" value-state="Error"></ui5-input>
		</div>

		<div>
			<ui5-label for="email" type="Email" required>Email: </ui5-label>
			<ui5-input id="email"></ui5-input>
		</div>

		<div>
			<ui5-label for="address">Address: </ui5-label>
			<ui5-input id="address"></ui5-input>
		</div>
	</section>

	<div slot="footer"	class="dialog-footer">
		<div style="flex: 1;"></div>
		<ui5-button id="closeDialogButton" design="Emphasized">Register</ui5-button>
	</div>
</ui5-dialog>

<script>
	var dialogOpener = document.getElementById("openDialogButton");
	var dialog = document.getElementById("hello-dialog");
	var dialogCloser = document.getElementById("closeDialogButton");

	dialogOpener.accessibilityAttributes = {
		hasPopup: "dialog",
		controls: dialog.id,
	}

	dialogOpener.addEventListener("click", function() {
		dialog.show();
	});

	dialogCloser.addEventListener("click", function() {
		dialog.close();
	});
</script>
	

<ui5-dialog draggable resizable></ui5-dialog>
	

<ui5-dialog id="fiori-footer-dialog" header-text="SAP Fiori Styled Footer">
	<p>Adding custom styles to achieve the look and feel of a SAP Fiori footer</p>
	<div slot="footer" style="display: flex; align-items: center; justify-content: end; width: 100%; box-sizing: border-box;">
		<ui5-button  design="Emphasized" style="min-width: 4rem;">OK</ui5-button>
		<ui5-button style="margin: 0 0 0 0.5rem; min-width: 4rem;">Close</ui5-button>
	</div>
</ui5-dialog>
	

<ui5-dialog id="error-state-dialog" header-text="Error" state="Error">
	<p>Error state dialog</p>
	<div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; padding: .25rem 1rem;">
		<ui5-button id="error-close">Close</ui5-button>
	</div>
</ui5-dialog>