{{ define "voting" }}
{{ 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 overflow-auto max-h-420">
    <div class="relative sm:rounded-lg">
      <h1 class="text-center text-4xl text-white pb-2">
        {{ .Voting.Referendum }}
      </h1>
      <p class="text-gray-400 text-center text-xs">
        {{ .Voting.Deadline }}
      </p>
      {{ if .Voting.IsOpen }}
        {{ template "vote_form" . }}
      {{ else }}
        {{ template "voting_result" . }}
      {{ end }}
    </div>
  </div>
</div>
{{ template "tail" . }}
{{ end }}

{{ define "vote_form" }}
<div class="relative overflow-x-auto py-4">
  <table class="w-full text-sm text-left rtl:text-right text-gray-400 text-center">
    <thead class="text-xs uppercase text-gray-400">
      <tr>
        <th scope="col" class="px-6 py-3">
          Quorum
        </th>
        <th scope="col" class="px-6 py-3">
          Threshold
        </th>
        <th scope="col" class="px-6 py-3">
          Anonymous
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="border-b bg-gray-800 border-gray-700">
        <td scope="row" class="px-6 py-2 font-medium whitespace-nowrap text-white">
          {{ .Voting.Quorum }}
        </td>
        <td scope="row" class="px-6 py-2 font-medium whitespace-nowrap text-white">
          {{ .Voting.Threshold }}
        </td>
        <td scope="row" class="px-6 py-2 font-medium whitespace-nowrap text-white">
          {{ if .Voting.Anonymous }}
          YES
          {{ else }}
          NO
          {{ end }}
        </td>
      </tr>
    </tbody>
  </table>
</div>

<form action="/v/{{ .Voting.ID }}" method="POST">
  <ul class="grid w-full gap-6 md:grid-cols-3 pb-8">
    <li>
      <input type="radio" id="vote-yes" name="vote" value="YIP" class="hidden peer" required />
      <label for="vote-yes" class="inline-flex items-center justify-between w-full p-5 border rounded-lg cursor-pointer border-green-700 hover:border-gray-400 peer-checked:text-white peer-checked:bg-green-700 hover:text-white text-green-700">
        <div class="block mx-auto">
          <div class="w-full text-lg font-semibold">YIP</div>
        </div>
      </label>
    </li>
    <li>
      <input type="radio" id="vote-no" name="vote" value="NOPE" class="hidden peer" required />
      <label for="vote-no" class="inline-flex items-center justify-between w-full p-5 border rounded-lg cursor-pointer border-red-800 hover:border-gray-400 peer-checked:text-white peer-checked:bg-red-800 hover:text-white text-red-800">
        <div class="block mx-auto">
          <div class="w-full text-lg font-semibold">NOPE</div>
        </div>
      </label>
    </li>
    <li>
      <input type="radio" id="vote-abstain" name="vote" value="DUNNO" class="hidden peer" required />
      <label for="vote-abstain" class="inline-flex items-center justify-between w-full p-5 border rounded-lg cursor-pointer border-yellow-600 hover:border-gray-400 peer-checked:text-white peer-checked:bg-yellow-600 hover:text-white text-yellow-600">
        <div class="block mx-auto">
          <div class="w-full text-lg font-semibold">DUNNO</div>
        </div>
      </label>
    </li>
  </ul>
  <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">Vote</button>
</form>
{{ end }}

{{ define "voting_result" }}
  <table class="w-full text-sm text-left rtl:text-right text-gray-400 text-center mt-4 shadow-xl overflow-x-auto">
    <tbody>
      <tr class="border-b border-t bg-gray-800 border-gray-700">
        <td class="px-6 py-4 text-4xl bold text-green-700">
          {{ .Voting.Result.Yes }}
        </td>
        <td class="px-6 py-4 text-4xl bold text-red-800">
          {{ .Voting.Result.No }}
        </td>
        <td class="px-6 py-4 text-4xl bold text-yellow-700">
          {{ .Voting.Result.Abstain }}
        </td>
      </tr>
    </tbody>
  </table>

  {{ if and .Voting.Result.Quorum .Voting.Result.Threshold }}
  <p class="text-4xl bold text-center p-4 text-green-700 tracking-widest drop-shadow-xl">
    ACCEPTED
  </p>
  {{ else }}
  <p class="text-4xl bold text-center p-4 text-red-800 tracking-widest drop-shadow-xl">
    REJECTED
  </p>
  {{ end }}
  {{ if .Voting.Result.Quorum }}
  <p class="text-center text-green-700">
    Quorum: REACHED
  </p>
  {{ else }}
  <p class="text-center text-red-800">
    Quorum: FAILED
  </p>
  {{ end }}
  <div class="relative overflow-x-auto py-4">
    <table class="w-full text-sm text-left rtl:text-right text-gray-400 text-center mt-4">
      <thead cols=3>
        <h1 class="text-center text-4xl border-t border-gray-700 pt-4 text-gray-400">VOTES</h1>
      </thead>
      <tbody>
        {{ range $vote := .Voting.Votes }}
        <tr class="border-b border-t bg-gray-800 border-gray-700" id="$vote.Id">
          <td class="px-2 py-1">
            {{ $vote.Choice }}
          </td>
          <td class="px-2 py-1 semibold">
            {{ $vote.Elector }}
          </td>
          <td class="px-2 py-1">
            {{ $vote.Id }}
          </td>
        </tr>
        {{ end }}
      </tbody>
    </table>
  </div>
{{ end }}