package site

import (
	"fmt"
	"github.com/delaneyj/toolbelt"
)

templ progressBarView(progress int) {
	<div id="progress_bar">
		if progress == 100 {
			<button
				id="completed_link"
				class="flex items-center gap-2 btn btn-success"
				data-on-click="window.location.reload()"
			>
				@icon("material-symbols:check-circle")
				Completed! Try again
			</button>
		} else {
			<svg width="200" height="200" viewbox="-25 -25 250 250" style="transform: rotate(-90deg)">
				<circle
					r="90"
					cx="100"
					cy="100"
					fill="transparent"
					stroke="#e0e0e0"
					stroke-width="16px"
					stroke-dasharray="565.48px"
					stroke-dashoffset="565px"
				></circle>
				<circle
					r="90"
					cx="100"
					cy="100"
					fill="transparent"
					stroke="#6bdba7"
					stroke-width="16px"
					stroke-linecap="round"
					stroke-dashoffset={ fmt.Sprintf("%0.0fpx", toolbelt.Fit(float32(progress), 0, 100, 565, 0)) }
					stroke-dasharray="565.48px"
				></circle>
				<text
					x="44px"
					y="115px"
					fill="#6bdba7"
					font-size="52px"
					font-weight="bold"
					style="transform:rotate(90deg) translate(0px, -196px)"
				>{ fmt.Sprint(progress) }%</text>
			</svg>
		}
	</div>
}