@inherits Dynamicweb.Rendering.RazorTemplateBase<Dynamicweb.Rendering.RazorTemplateModel<Dynamicweb.Rendering.Template>>

@{
	string iconPath = "/Files/Images/Icons/";
}

<button class="toggle-order-summary btn text-reset w-100 d-block d-lg-none px-0" type="button" data-bs-toggle="collapse" data-bs-target="#orderSummary" aria-expanded="false" aria-controls="orderSummary" id="OrderSummaryToggleButton">
	<span class="d-flex align-items-center justify-content-between">
		<span class="d-flex align-items-center gap-2">
			<span class="fs-7 lh-1">
				<span class="toggle-order-summary-text" id="OrderSummaryToggleButtonLabel">@Translate("Show order summary")</span>
			</span>
			<span class="icon-2" id="OrderSummaryToggleButtonIcon" style="transition: all 0.25s ease-in-out;">
				@ReadFile(iconPath + "chevron-down.svg")
			</span>
		</span>
		<span class="fw-bold">
			<span class="text-price">@GetString("Ecom:Order.Price")</span>
		</span>
	</span>
</button>

<script>
	(() => {
		const btn = document.getElementById("OrderSummaryToggleButton");
		const label = document.getElementById("OrderSummaryToggleButtonLabel");
		const icon = document.getElementById("OrderSummaryToggleButtonIcon");
		const showTxt = '@Translate("Show order summary")';
		const hideTxt = '@Translate("Hide order summary")';
		window.swiftOrderSummaryToggle = window.swiftOrderSummaryToggle || {};
		if (btn && typeof window.swiftOrderSummaryToggle.unbind === "function") window.swiftOrderSummaryToggle.unbind();
		if (!btn) return;
		const toggle = () => {
			const show = label && label.textContent?.toLowerCase().includes(showTxt.toLowerCase());
			if (label) label.textContent = show ? hideTxt : showTxt;
			if (icon) icon.classList.toggle("rotate-180", show);
		};
		btn.addEventListener("click", toggle);
		window.swiftOrderSummaryToggle.unbind = () => btn.removeEventListener("click", toggle);
	})();
</script>

