{{ define "voting_form" }}
{{ 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">
    <form class="space-y-6" action="/v" method="POST">
      <h5 class="text-xl font-medium text-white">New Voting</h5>
      <div>
        <label for="referendum" class="block mb-2 text-sm font-medium text-white">Referendum</label>
        <input type="text" name="referendum" id="referendum" class="border text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 bg-gray-600 border-gray-500 placeholder-gray-400 text-white" placeholder="Concise question or subject..." required autofocus />
      </div>
      <div class="flex flex-row justify-between">
        <div class="w-full px-2">
          <label for="deadline" class="block mb-2 text-sm font-medium text-white">Deadline</label>
        <input type="text" name="deadline" id="deadline" class="border text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 bg-gray-600 border-gray-500 placeholder-gray-400 text-white text-center" placeholder="Deadline, e.g.: 3m, 1h, 7d, etc" value="1m" required />
        </div>
        <div class="w-full px-2">
          <label for="quorum" class="block mb-2 text-sm font-medium text-white">Quorum</label>
          <select id="quorum" name="quorum" class="border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500">
            <option selected>SIMPLE</option>
            <option value="1/5">1/5</option>
            <option value="1/4">1/4</option>
            <option value="1/3">1/3</option>
            <option value="1/2">1/2</option>
            <option value="2/5">2/5</option>
            <option value="2/3">2/3</option>
            <option value="3/5">3/5</option>
            <option value="3/4">3/4</option>
            <option value="4/5">4/5</option>
            <option value="ALL">ALL</option>
          </select>
        </div>
        <div class="w-full px-2">
          <label for="threshold" class="block mb-2 text-sm font-medium text-white">Threshold</label>
          <select id="threshold" name="threshold" class="border text-sm rounded-lg block w-full p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500">
            <option selected>SIMPLE</option>
            <option value="1/5">1/5</option>
            <option value="1/4">1/4</option>
            <option value="1/3">1/3</option>
            <option value="1/2">1/2</option>
            <option value="2/5">2/5</option>
            <option value="2/3">2/3</option>
            <option value="3/5">3/5</option>
            <option value="3/4">3/4</option>
            <option value="ALL">ALL</option>
          </select>
        </div>
      </div>
      <div>
        <label for="electors" class="block mb-2 text-sm font-medium text-white">Who can vote? <small>(empty if anyone can vote)</small></label>
        <div class="flex">
          <span class="inline-flex items-center px-3 text-sm border rounded-e-0 border-e-0 rounded-s-md bg-gray-600 text-gray-400 border-gray-600">
            <svg class="w-4 h-4 text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
            </svg>
          </span>
          <input type="text" id="electores" name="electors" class="rounded-none rounded-e-lg border block flex-1 min-w-0 w-full text-sm border-gray-300 p-2.5 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:ring-blue-500 focus:border-blue-500" placeholder="Names separated by spaces...">
        </div>
      </div>
      <div>
        <label class="inline-flex items-center cursor-pointer">
          <input checked type="checkbox" value="on" name="anonymous" class="sr-only peer">
          <div class="relative w-11 h-6 peer-focus:ring-purple-800 rounded-full peer bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-purple-600"></div>
          <span class="ms-3 text-sm font-medium text-gray-400">Anonymous vote</span>
        </label>
      </div>
      <button type="submit" class="w-full 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">Create</button>
      <p class="text-gray-400 italic">
        Quorum:
        The minumum number of eligible votes required for the referendum to pass.
        (SIMPLE means that at least one vote is required.)
      </p>
      <p class="text-gray-400 italic">
        Threshold:
        The minumum number of YES votes required for the referendum to pass.
        (SIMPLE means that there must be more YES than NO votes.)
      </p>
      <p class="text-gray-400 italic">
        Anonymous:
        Individual votes by the electors are not made public.
      </p>
    </form>
  </div>
</div>
{{ template "tail" . }}
{{ end }}