{{ 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"> <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"> SIMPLE </td> <td scope="row" class="px-6 py-2 font-medium whitespace-nowrap text-white"> SIMPLE </td> <td scope="row" class="px-6 py-2 font-medium whitespace-nowrap text-white"> YES </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"> <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"> ACCEPTED </p> {{ else }} <p class="text-4xl bold text-center p-4 text-red-800 tracking-widest"> 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 }} {{ end }}