export const mapHtml = (width, height, script) => `<html>
	<head>
		<script src="https://api.mapy.cz/loader.js"></script>
		<script>
			Loader.load(null, { suggest: true });
		</script>
		<style>
			.FormLabel {
				font-weight: bold;
			}

			.smap {
				font: inherit !important;
				white-space: nowrap;
			}
			.form-control {
				border-radius: 5px;
				background: #fff;
				border: 1px solid #ccc;
				outline: none;
				padding: 6px;
			}
			.form-contro:focus {
				border: 1px solid #56b4ef;
				box-shadow: 0px 0px 3px 1px #c8def0;
			}
			body{
				margin:0;
			}
			  
		</style>
	</head>

	<body>
		<div>
			<div style="display: flex; justify-content: space-evenly; margin-bottom:10px;">
				<label for="geo-gps"> Souřadnice:</label>
				<input name="geo-gps" id="geo-gps" type="text" disabled />
			</div>
			<div style="display: flex; justify-content: space-evenly; align-items:center;">
				<div style="display: flex; align-items: center">
					<label for="mapsearch"> Vyhledávání:</label>
				</div>
				<div style="display: flex; justify-content: space-evenly;">
					<input style="margin-bottom: 10px;"
						name="mapsearch"
						id="mapsearch"
						type="text"
						value=""
						class="form-control"
						placeholder="hledaná fráze"
					/>
				</div>
			</div>
		</div>
		<div id="mapa" style="width: ${width}px; height: ${height}px; touch-action: manipulation;"></div>
		<script type="text/javascript">${script}</script>

		<script type="text/javascript" src="./exec.js"></script>
	</body>
</html>
`