{{ define "content" }}
<div class="flex-1 flex flex-col overflow-hidden">
  <!-- Top Navigation -->
  <div class="bg-white border-b border-gray-200 px-6 py-3">
    <div class="flex items-center justify-between">
      <div class="flex items-center gap-4">
        <div class="flex items-center gap-2">
          <i
            class="{{if .PageIcon}}{{.PageIcon}}{{else}}fas fa-poll{{end}} text-green-600"
          ></i>
          <span class="text-sm font-medium">Poll Questions</span>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <a
          href="/appointments"
          class="px-3 py-1 bg-gray-500 text-white text-sm hover:bg-gray-600 rounded"
        >
          Back to Appointments
        </a>
      </div>
    </div>
  </div>

  <!-- Form Content -->
  <div class="flex-1 overflow-y-auto bg-gray-50 p-6">
    <div class="max-w-2xl mx-auto">
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <div class="mb-6">
          <h2 class="text-lg font-semibold text-gray-900">
            Campaign Poll Questions
          </h2>
          <p class="text-sm text-gray-600 mt-1">Address: {{ .Address }}</p>
        </div>

        <form method="POST" class="space-y-6">
          <input type="hidden" name="poll_id" value="{{ .PollID }}" />

          <!-- Postal Code -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              Respondent's Postal Code
            </label>
            <input
              type="text"
              name="postal_code"
              placeholder="Enter postal code (e.g., T2P 1J9)"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
              required
            />
          </div>

          <!-- Question 1 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-3">
              1. Have you voted before?
            </label>
            <div class="space-y-2">
              <label class="flex items-center">
                <input
                  type="radio"
                  name="question1_voted_before"
                  value="true"
                  class="mr-2"
                />
                <span class="text-sm">Yes</span>
              </label>
              <label class="flex items-center">
                <input
                  type="radio"
                  name="question1_voted_before"
                  value="false"
                  class="mr-2"
                />
                <span class="text-sm">No</span>
              </label>
            </div>
          </div>

          <!-- Question 2 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-3">
              2. Will you vote again for this candidate?
            </label>
            <div class="space-y-2">
              <label class="flex items-center">
                <input
                  type="radio"
                  name="question2_vote_again"
                  value="true"
                  class="mr-2"
                />
                <span class="text-sm">Yes</span>
              </label>
              <label class="flex items-center">
                <input
                  type="radio"
                  name="question2_vote_again"
                  value="false"
                  class="mr-2"
                />
                <span class="text-sm">No</span>
              </label>
            </div>
          </div>

          <!-- Question 3 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              3. How many lawn signs do you need?
            </label>
            <input
              type="number"
              name="question3_lawn_signs"
              min="0"
              max="10"
              value="0"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          <!-- Question 4 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              4. How many banner signs do you need?
            </label>
            <input
              type="number"
              name="question4_banner_signs"
              min="0"
              max="5"
              value="0"
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            />
          </div>

          <!-- Question 5 -->
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">
              5. Write your thoughts (optional)
            </label>
            <textarea
              name="question5_thoughts"
              rows="4"
              placeholder="Any additional comments or feedback..."
              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            ></textarea>
          </div>

          <!-- Submit Button -->
          <div class="flex justify-end gap-3 pt-6">
            <a
              href="/appointments"
              class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"
            >
              Cancel
            </a>
            <button
              type="submit"
              class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700"
            >
              Submit Poll Response
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
  // Show delivery address section if user needs signs
  document.addEventListener("DOMContentLoaded", function () {
    const lawnSignsInput = document.querySelector(
      'input[name="question3_lawn_signs"]'
    );
    const bannerSignsInput = document.querySelector(
      'input[name="question4_banner_signs"]'
    );
    const deliverySection = document.getElementById("delivery-section");

    function toggleDeliverySection() {
      const lawnSigns = parseInt(lawnSignsInput.value) || 0;
      const bannerSigns = parseInt(bannerSignsInput.value) || 0;

      if (lawnSigns > 0 || bannerSigns > 0) {
        deliverySection.style.display = "block";
      } else {
        deliverySection.style.display = "none";
      }
    }

    lawnSignsInput.addEventListener("input", toggleDeliverySection);
    bannerSignsInput.addEventListener("input", toggleDeliverySection);
  });
</script>
{{ end }}