{{ template "headersMenu.html" . }}

<style>
.color-picker {
	width: 36px;
	height: 36px;
	border-radius: 0.25rem;
	cursor: pointer;
}
</style>

<section class="flex relative justify-center items-center py-20">
	<div class="container" id="EditView">
		<div class="col-span-12">
			<h5 class="font-semibold"><a class="font-bold" href="/list" up-dismiss up-follow up-layer="root"><i class="fa fa-arrow-left"></i> QrCode</small><br/><span class="text-2xl text-indigo-600 lg:text-4xl">{{ .qrcode.Name }}</a></h5>
			<input type="text" id="content" name="content" readonly value="https://qrcode.pm/{{ .qrcode.Path }}" class="px-3 py-2 mt-4 w-full text-black bg-white shadow border-2 dark:bg-slate-900 dark:text-white" style="border-radius:12px">
		</div>
		<div class="grid md:grid-cols-12 grid-cols-1 gap-[30px]">
			<div class="lg:col-span-6 md:col-span-5">
				<div class="sticky top-20">
					<div class="bg-white shadow border-2 dark:shadow-gray-800" style="margin-top:25px !important;padding:10% 10% 0;border-radius:12px">
						<div id="qrcode" class="mt-4 md:mt-0"></div>
						<div class="mt-10 text-center">
							<button class="px-4 py-2 mx-1 mb-4 font-bold text-black bg-white rounded-full shadow-md hover:bg-blue-700">
								{{ "Aide" | t }}
							</button>
							<button class="px-4 py-2 mx-1 font-bold text-black bg-white rounded-full shadow-md hover:bg-blue-700">
								{{ "Téléchargement" | t }}
							</button>
						</div>
					</div>
				</div>
			</div><!--end col-->

			<div class="lg:col-span-6 md:col-span-7">
				<form id="saveForm" up-submit method="post" action="/save">
					<input type="hidden" name="uid" value="{{ .qrcode.Id }}" />
					<input type="hidden" name="{{ .data.csrfName }}" value="{{ .data.csrfValue }}" />
					<div class="mt-10 mb-10">
						{{ if notEmpty .qrcode.LatLon }}<a href="https://maps.google.com/?q={{ .qrcode.LatLon }}" target="_blank"><img class="w-20 rounded-lg shadow border-2 pull-right" src="https://maps.googleapis.com/maps/api/staticmap?center={{ .qrcode.LatLon }}&zoom=13&size=400x400&key=AIzaSyDp0RYfAHCn9c6AOOlrXmv5WqCze4dH0dc" style="float: right" /></a>{{ end }}
						{{ if greaterThanZero .qrcode.NbViews }}
						<a {{ if .isMobile }}up-follow{{ else }}up-layer="new" {{end}} up-target="#StatsView" href="/stats?uid={{ .qrcode.Id }}">
							<h6 class="mt-5 text-2xl font-bold">{{ .qrcode.NbViews }} {{ if greaterThanOne .qrcode.NbViews }}{{ "scans" | t }}{{ else }}{{ "scan" | t }}{{ end }}</h6>
							<div class="mb-5 text-xs text-slate-400">{{ "Dernière ouverture" | t }} {{ .qrcode.LastView }} {{ if notEmpty .qrcode.City }}{{ "localisée à" | t }} {{ .qrcode.City }}{{ end }}</div>
						</a>
						{{ end }}
					</div>
					<div class="mb-5">
						<div class="ltr:text-left rtl:text-right">
							<label for="name" class="font-semibold">{{ "Nom" | t }}</label>
							<div class="relative mt-2 form-icon">
								<input name="name" id="name" class="px-3 py-2 w-full text-black bg-white rounded shadow border-2 dark:bg-slate-900 dark:text-white" placeholder="" value="{{ .qrcode.Name }}">
							</div>
						</div>
					</div>
					<div class="mb-5">
						<div class="ltr:text-left rtl:text-right">
							<label for="url" class="font-semibold">{{ "Redirection" | t }}</label>
							<div class="relative mt-2 form-icon">
								<input name="url" id="url" class="px-3 py-2 w-full text-black bg-white rounded shadow border-2 dark:bg-slate-900 dark:text-white" placeholder="" value="{{ .qrcode.Url }}">
							</div>
						</div>
					</div>
					<div>
						<input type="submit" class="text-white bg-indigo-600 rounded-md border-indigo-600 btn hover:bg-indigo-700 hover:border-indigo-700" value="{{ "Valider" | t }}" />
						<a {{ if .isMobile }}up-follow{{ else }}up-layer="new" {{end}} up-target="#EditView" href="/edit/{{ .qrcode.Id }}?a=type" class="ml-2 rounded-md border-indigo-600 btn hover:border-indigo-700"><i class="fa fa-edit"></i></a>
						<a {{ if .isMobile }}up-follow{{ else }}up-layer="new" {{end}} up-target="#DesignView" href="/edit/{{ .qrcode.Id }}?a=design" class="ml-2 rounded-md border-indigo-600 btn hover:border-indigo-700"><i class="fa fa-paint-brush"></i></a>
					</div>
					{{ if .isPOST }}
					<div class="hidden popup">{{ "Modifications enregistrées" | t }}</div>
					{{ end }}
				</form>
			</div><!--end col-->
		</div><!--end grid-->
	</div>
</section>

{{ template "footer.html" . }}