{{ template "headers.html" . }}

<section class="overflow-hidden relative">
    <form id="saveForm" method="post" action="/save">
        <div class="container relative">
            <div class="min-h-screen-100 py-20 grid md:grid-cols-2 grid-cols-1 items-center mt-8 gap-[30px] relative">
                <div class="ltr:md:mr-6 rtl:md:ml-6">
                    <h4 class="mb-2 text-2xl font-bold text-black md:text-5xl dark:text-white">{{ "Partagez vos" | t }} <span class="relative text-indigo-600 after:absolute ltr:after:right-0 rtl:after:left-0 ltr:after:left-0 rtl:after:right-0 after:bottom-3 after:-rotate-6 after:h-2 after:w-auto after:rounded-md after:bg-indigo-600/20">{{ "liens" | t }}</span> {{ "par Qr Code simplement" | t }}</h4>
                    <div class="flex mt-4">
                        <div>
                            <label for="content" class="my-6 max-w-xl text-lg text-slate">{{ "Saisissez le lien URL que vous souhaitez encoder :" | t }}</label>
                            <input type="text" id="content" name="content" value="https://" class="px-3 py-2 mt-4 w-full text-black bg-white rounded border-2 dark:bg-slate-900 dark:text-white">
                        </div>
                        <div class="hidden">
                            <label for="code" class="block">Code unique:</label>
                            <input type="text" id="code" name="code" value="{{ .code }}" class="px-3 py-2 w-full rounded border">
                        </div>
                    </div>
                </div>

                <div class="relative text-center">
                    <div id="qrcode" class="mt-4 md:mt-0"></div>
		    {{ if .isConnected }}
                    <div class="mt-4">
                        <input type="button" onclick="downloadCanvas();" class="w-full text-white bg-indigo-600 rounded-md border-indigo-600 btn hover:bg-indigo-700 hover:border-indigo-700" value="Télécharger">
                        <input type="submit" class="w-full text-white bg-indigo-600 rounded-md border-indigo-600 btn hover:bg-indigo-700 hover:border-indigo-700" value="Sauvegarder">
                    </div>
		    {{ end }}
                    <img src="/cdn/apps/qrcode/home.png" class="fixed right-0 bottom-0 opacity-30" alt="" style="z-index: -1" alt="">
                </div>
                
            </div>
        </div>

    </form>               
</section>

<style>
canvas {
    display:none;
}
#qrcode {
    padding:40px;
    background:#fff;
    box-shadow:#0003 0 0 3px;
    width: auto;
    display: inline-block;
    margin: 0 auto;
}
#qrcode img {
    max-width: 200px;
}
</style>


<!-- JAVASCRIPTS -->

{{ template "footer.html" . }}