{{define "resource-chart"}}
<resource-chart>
	<template shadowrootmode="open">
		<link rel="stylesheet" href="modules/w3.css">
		<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
		<link rel="stylesheet" href="css/style.css">
		<style>
			* {
				box-sizing: border-box;
				font-family: monospace;
			}
			#container{
				margin: 0;
				width: 100%;
				height: fit-content;
				padding: 10px;
				border-radius: 5px;
			}
			progress {
				width: 100%;
				border: 0;
				height: 1em;
				appearance: none;
			}
			#caption {
				text-align: center;
				margin-top: 10px;
				display: flex;
				flex-direction: column;
			}
			progress::-moz-progress-bar { 
				background: #{{.ColorHex}}; 
			}
			progress::-webkit-progress-bar { 
				background: var(--main-text-color); 
			}
			progress::-webkit-progress-value { 
				background: #{{.ColorHex}}; 
			}
		</style>
		<div id="container">
			<progress value="{{.Used}}" max="{{.Max}}" id="resource"></progress>
			<label id="caption" for="resource">
				<span>{{.Name}}</span>
				<span>{{printf "%g" .Avail}} {{.Prefix}}{{.Unit}} Avaliable</span>
			</label>
		</div>
	</template>
</resource-chart>
{{end}}