create.tmpl

    {{ template "header.tmpl" . }}

    <div class="container main p-5">
      <h2 class="mb-4">Create Poll</h2>
      <form action="/create" method="POST">
        <div class="input-group needs-validation">
          <label for="title" class="input-group-text required-label">Poll Title</label>
          <input
            type="text"
            class="form-control"
            name="title"
            placeholder="My Poll"
            required
          >
        </div>
        <div class="input-group my-3">
          <label for="description" class="input-group-text">Description</label>
          <input
            type="text"
            name="description"
            class="form-control"
            placeholder="Description"
          >
        </div>
        <div class="input-group my-3">
          <label for="options" class="input-group-text required-label">Options</label>
          <select name="options" id="options" onChange="onOptionsChange()" class="form-select">
            <option value="pass_fail" selected>Pass/Fail</option>
            <option value="pass-fail-conditional">
              Pass/Fail or Conditional
            </option>
            <option value="fail-conditional">Fail/Conditional</option>
            <option value="custom">Custom</option>
          </select>
        </div>
        <div id="customOptions" class="input-group d-none my-3">
          <label for="customOptions" class="input-group-text">Custom Vote Options</label>
          <input
            type="text"
            name="customOptions"
            class="form-control"
            placeholder="Enter a comma separated list of custom vote options"
          >
        </div>

        <h5 class="mt-4"><strong>Additional Settings</strong></h5>
        <div class="form-check form-switch fs-5">
          <input
            class="form-check-input"
            type="checkbox"
            role="switch"
            name="allowWriteIn"
            value="true"
          >
          <label for="allowWriteIn" class="form-check-label">Allow Write-Ins</label>
        </div>
        <div class="form-check form-switch fs-5">
          <input
            class="form-check-input"
            type="checkbox"
            name="rankedChoice"
            value="true"
          >
          <label for="rankedChoice" class="form-check-label">Ranked Choice Vote</label>
        </div>
        <div class="form-check form-switch fs-5">
          <input
            class="form-check-input"
            type="checkbox"
            name="hidden"
            value="true"
          >
          <label for="hidden" class="form-check-label">Hide Results Until Vote is Complete</label>
        </div>
        
        {{ if .EBoard }}
        <div id="eboard-options" class="my-4">
          <h5><strong>E-Board Options</strong></h5>
          <div class="form-check form-switch fs-5">
              <input
                class="form-check-input"
                type="checkbox"
                name="gatekeep"
                id="gatekeep"
                value="true"
                onchange="onGatekeepChange()"
              >
              <label for="gatekeep"> Gatekeep Required (Require Quorum, Limit Voters, Force Automatic Close)</label>
          </div>
          <div id="quorumPercentInput" class="input-group d-none w-auto my-3">
            <label for="quorumType" class="input-group-text">Quorum %</label>
            <input
              type="number"
              name="quorumType"
              id="quorumType"
              class="form-control"
              min="0"
              max="100"
              step="1"
              value="50"
            >
          </div>
          <div id="waivedUsers" class="input-group d-none">
            <label for="waivedUsers" class="input-group-text">Waived Users</label>
            <input
              type="text"
              name="waivedUsers"
              class="form-control"
              placeholder="Comma separated list of usernames"
            >
          </div>
        </div>
        {{ end }}

        <input type="submit" class="btn btn-primary my-2" value="Create">
      </form>
    </div>

    <style>
      .required-label::after {
        content: " *";
        color: red;
      }
    </style>
    <script>
      function onOptionsChange() {
        if (document.getElementById("options").value == "custom") {
          document.getElementById("customOptions").classList.remove('d-none');
        } else {
          document.getElementById("customOptions").classList.add('d-none');
        }
      }
      function onGatekeepChange(){
        const gatekeepBox = document.getElementById("gatekeep");
        const waivedUsers = document.getElementById("waivedUsers");
        const quorumType = document.getElementById("quorumPercentInput");
        if (gatekeepBox.checked){
          waivedUsers.classList.remove('d-none');
          quorumType.classList.remove('d-none');
        } else {
          waivedUsers.classList.add('d-none');
          quorumType.classList.add('d-none');
        }
      }

      (() => {
        'use strict'

        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        const forms = document.querySelectorAll('.needs-validation')

        // Loop over them and prevent submission
        Array.from(forms).forEach(form => {
          form.addEventListener('submit', event => {
            if (!form.checkValidity()) {
              event.preventDefault()
              event.stopPropagation()
            }

            form.classList.add('was-validated')
          }, false)
        })
      })()
    </script>
  </body>
</html>