<div class="flex flex-col w-full space-y-4">

	<div class="flex w-full justify-between items-center py-2 md:py-3 px-3 md:px-4 space-x-2 rounded-lg neomorph is-nxsmall">
		@TitleChildren
		<button class="button is-rounded is-small @ButtonCss"
						@onclick:preventDefault @onclick="OpenCloseInnerContent" disabled="@(!HasInnerContent)">
			<span class="icon">
				<i aria-hidden="true" class="@LeftIconCss"></i>
			</span>
		</button>
	</div>

	<div class="@InnerContentContainerCss @Hidden">
		@InnerContent
	</div>

</div>

@code {
	[Parameter] public RenderFragment TitleChildren { get; set; }
	[Parameter] public RenderFragment InnerContent { get; set; }
	[Parameter] public bool HasInnerContent { get; set; } = true;
	[Parameter] public string InnerContentContainerCss { get; set; } = "block w-auto ml-5 md:ml-10 rounded-lg neomorph is-nxsmall";

	[Parameter]
	public bool IsOpen { get; set; } = false;
	string Hidden { get; set; } = VConstants.HideClass;
	string ButtonCss => $"{(HasInnerContent ? default : "cursor-not-allowed")} neoBtnSmall";
	string LeftIconCss => IsOpen ? "ion-md-arrow-dropup" : "ion-md-arrow-dropdown";

	void OpenCloseInnerContent()
	{
		IsOpen = !IsOpen;
		Hidden = IsOpen ? default : VConstants.HideClass;
	}
}