package components

templ HostButton(hostname string, path string) {
	<button
		hx-target="#sysContent"
		hx-get={ path }
		class={ "rounded",
      "border",
      "border-solid",
      "border-uiblue-700",
      "text-uigrey-200",
      "bg-uiblue-800",
      "hover:border-uipurple-400",
      "hover:text-ui-grey-800",
      "hover:bg-uipurple-600",
      "gap-2",
      "p-1",
      "my-1",
      "w-full",
      "flex",
      "flex-row",
      "justify-between" }
	>
		<span class={ "px-2" }>{ hostname }</span>
		<img class={ "htmx-indicator" , "inline-block" , "h-6" , "px-2" } src="/static/images/bars.svg"/>
	</button>
}

templ HostNav() {
	<div id="sysNavBar" class={ "w-1/6" , "border-uigrey-600" , "border" , "rounded" , "border-dotted" , "p-2" }>
		<ul>
      <li>
        @HostButton("Cluster View", "/htmx/cluster")
      </li>
			<li>
				@HostButton("venus.staur.ca", "/htmx/host/venus.staur.ca")
			</li>
			<li>
				@HostButton("earth.staur.ca", "/htmx/host/earth.staur.ca")
			</li>
			<li>
				@HostButton("mars.staur.ca", "/htmx/host/mars.staur.ca")
			</li>
		</ul>
	</div>
}