<div id="pechatalka">
	<div class="system">
		<input id="pechatalka_add_image" type="file" name="images" accept="image/png, image/jpeg, image/webp"
			multiple="false" onchange="core.global.pechatalka.image(this.files[0], 160);" />
		<input id="pechatalka_background" type="color" name="background" value="#ffffff"
			oninput="core.global.pechatalka?.wrap?.querySelector('label[for=\'pechatalka_background\']>div.color')?.style.setProperty('--color', event.target.value); core.global.pechatalka.canvas.style.setProperty('background-color', event.target.value);" />
	</div>

	<nav class="tools rounded unselectable">
		<label class="button" for="pechatalka_add_image"><i class="icon plus"></i></label>
		<button id="pechatalka_interface" onclick="const icon = this.getElementsByTagName('i')[0]; icon.classList.toggle('disabled'); core.global.pechatalka.global('interface', !icon.classList.contains('disabled'), true);"><i class="icon notification"></i></button>
		<button id="pechatalka_round" onclick="const icon = this.getElementsByTagName('i')[0]; icon.classList.toggle('disabled'); core.global.pechatalka.global('round', !icon.classList.contains('disabled'), true);"><i class="icon round"></i></button>
		<label class="button" for="pechatalka_background"><div class="color"></div></label>
	</nav>

	<div class="canvas pin unselectable">
		<label class="button add" for="pechatalka_add_image"><i class="icon plus"></i></label>

		<div class="display"></div>
	</div>

	<div class="result unselectable">
		<button class="print rounded"
			onclick="core.global.generator?.print('pin_37', 1, core.global.pechatalka.canvas, this)"><i
				class="icon printer"></i></button>
		<span class="cost" style="--currency: '{{ currency.symbol() ?? '?'}}'">0</span>
		<button class="buy rounded"></button>
	</div>
</div>
