@props(['title' => 'Notification', 'model' => 'saved', 'timer' => 3000, 'type' => 'success'])
<div>
	<div class="position-fixed top-0 end-0 p-16 bg-white" style="z-index: 99">
		<div class="toast fade show rounded-4 p-10" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
			<div class="toast-header">
				@if ($type === 'success')
					<i class="hp-text-color-success-1 iconly-Light-Notification me-8"></i>
				@else
					<i class="hp-text-color-danger-1 iconly-Light-Danger me-8"></i>
				@endif
				<span class="me-auto text-black">{{ $title }}</span>
				<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
			</div>

			<div class="toast-body py-16">
				{{ $slot }}
			</div>

			<script>
                setTimeout(function() {
					@this.set('{{ $model }}', false);
                }, {{ $timer ?? 3000 }})
			</script>
		</div>
	</div>
</div>