doctype html
html(data-embed lang="en")
	head
		meta(charset="utf-8")
		meta(content="width=device-width,initial-scale=1" name="viewport")
		meta(content="JS algorithmic music generator" name="description")
		meta(content="SArpnt" name="author")
		title Bytebeat composer (embedded)
		link(href="/favicon.png" rel="shortcut icon")
		link(href="/style.css" type="text/css" rel="stylesheet")
		link(href="/audio-worklet.js" as="audioworklet" rel="modulepreload")
		script.
			globalThis.loadLibrary = false;
			globalThis.useLocalStorage = false;
			globalThis.useUrlData = false;
		script(src="/embed.js" defer type="module")
		script(src="/bytebeat.js" defer type="module")
	body
		main#content
			section.container-fixed
				#code-editor-container
					textarea#code-editor(spellcheck="false" aria-label="Code editor")
				#controls
					span#control-time.control-group.control-time
						button#control-time-unit(onclick="bytebeat.changeTimeUnit();" title="Time unit")
							label#control-time-unit-label(for="control-time-value") t
						input#control-time-value(
							onchange="bytebeat.setByteSample(bytebeat.convertFromUnit(+this.value)); this.value = '';"
							style="width: 8em"
							placeholder="0"
							type="number"
							title="Time value"
						)
					span.control-group.control-time.buttons
						button#control-restart(onclick="bytebeat.resetTime();" title="Restart") ⏮︎
						button#control-fr(
							onclick="bytebeat.setPlaySpeed(-4); bytebeat.togglePlay(true);"
							title="Fast reverse"
						) ⏪︎
						button#control-reverse(
							onclick="bytebeat.setPlaySpeed(-1); bytebeat.togglePlay(true);"
							title="Reverse"
						) ⏴︎
						button#control-pause(onclick="bytebeat.togglePlay(false);" title="Pause") ⏸︎
						button#control-play(
							onclick="bytebeat.setPlaySpeed(1); bytebeat.togglePlay(true);"
							title="Play"
						) ⏵︎
						button#control-ff(
							onclick="bytebeat.setPlaySpeed(4); bytebeat.togglePlay(true);"
							title="Fast Forward"
						) ⏩︎
					span.control-group.control-playback
						input#control-volume(
							oninput="bytebeat.setVolume();"
							value="0.6"
							step="any"
							max="1"
							min="0"
							type="range"
							title="Volume"
						)
					span.control-group.control-view.buttons.buttons-zoom
						button#control-scaledown(onclick="bytebeat.changeScale(-1);" title="Zoom in") +
						button#control-scaleup(onclick="bytebeat.changeScale(1);" title="Zoom out") -
					//
						<span class="control-group control-record buttons">
											<button title="Share" onclick="">&#x1f517;&#xfe0e;</button>
											<button title="Download" onclick="">&#x1f4e5;&#xfe0e;</button>
											<button title="Upload" onclick="">&#x1f4e4;&#xfe0e;</button>
											<button title="Record" onclick="">&#x23fa;&#xfe0e;</button>
										</span>
					span.control-group.control-song
						select#control-song-mode(
							onchange="bytebeat.setPlaybackMode(this.value);"
							title="Playback mode"
						)
							option(selected value="Bytebeat") Bytebeat
							option(value="Signed Bytebeat") Signed Bytebeat
							option(value="Floatbeat") Floatbeat
							option(value="Funcbeat") Funcbeat
					span.control-group
						input#control-sample-rate.control-song.control-round-right(
							onchange="bytebeat.setSampleRate(+this.value); bytebeat.refreshCode();"
							onblur="this.value||=this.placeholder;this.placeholder=''"
							onfocus="this.placeholder=this.value;this.value=''"
							style="width: 6em"
							value="8000"
							list="samplerates"
							step="any"
							min="0"
							type="number"
							title="Sample rate"
						)
						span.text
							label.control-song(for="control-sample-rate") Hz
							label.control-playback(for="control-sample-rate-divisor") /
						input#control-sample-rate-divisor.control-playback.control-round-left.control-round-right(
							onchange="bytebeat.setSampleRateDivisor(+this.value); bytebeat.refreshCode();"
							style="width: 3em"
							value="1"
							step="1"
							min="1"
							type="number"
							title="Sample rate divisor"
						)
						datalist#samplerates
							option(value="8000")
							option(value="11025")
							option(value="16000")
							option(value="22050")
							option(value="32000")
							option(value="44100")
							option(value="48000")
				#error
				#canvas-container(
					onclick="if (this.dataset.disabled !== 'true') {bytebeat.setPlaySpeed(1); bytebeat.togglePlay()}"
				)
					canvas#canvas-main(height="256" width="1024")
					#canvas-timecursor
					#canvas-toggleplay.canvas-toggleplay-show
						svg#svg-canvas-toggleplay-play
							use(xlink:href="#symbol-play")
						svg#svg-canvas-toggleplay-pause
							use(xlink:href="#symbol-pause")
			// SVG BUTTONS
			// TODO: create svgs for all controls
			#svg-icons(style="height: 0; width: 0; overflow: hidden")
				svg(xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg")
					symbol#symbol-play(viewBox="0 0 32 32")
						path(
							d="m23 14.3-9-5.2c-1.3-.8-3 .2-3 1.7v10.4c0 1.5 1.7 2.5 3 1.7l9-5.2c1.3-.7 1.3-2.7 0-3.4z"
						)
					symbol#symbol-pause(viewBox="0 0 32 32")
						path(
							d="M12.5 23c-1.1 0-2-.9-2-2V11c0-1.1.9-2 2-2s2 .9 2 2v10c0 1.1-.9 2-2 2zm7 0c-1.1 0-2-.9-2-2V11c0-1.1.9-2 2-2s2 .9 2 2v10c0 1.1-.9 2-2 2z"
						)