{{ define "thanks" }}
{{ template "head" . }}
<div class="flex flex-col justify-center align-center items-center h-screen bg-slate-900 p-2">
  <div class="w-full md:w-3/4 lg:w-1/2 xl:w-1/3 border rounded-lg p-2 sm:p-6 md:p-8 bg-slate-800 border-purple-900 text-white">
    <div class="relative sm:rounded-lg">
      <h1 class="text-center text-4xl text-white pb-2">
        Thank you!
      </h1>
      <p class="p-4 text-gray-400 text-center">
        You have made a small voting script very happy! *nom*
      </p>
      <p class="text-gray-400 text-center">
        Your vote has been placed under the ID:<br>
      </p>
      <p class="text-white text-center text-2xl bold">
        {{ .Id }}
      </p>
      <hr class="m-4">
      <div class="w-full flex justify-center">
        <img src="data:image/png;base64,{{ .QRCode }}" alt="QR-Code" class="center pb-4">
      </div>
      <a href="/v/{{ .Vid }}" class="w-full block hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-purple-600 hover:bg-purple-700 focus:ring-blue-800 text-white hover:text-yellow-200 text-xl">
        Go back
      </a>
    </div>
  </div>
</div>
{{ template "tail" . }}
{{ end }}