ku-polls/polls/templates/polls/detail.html

{% extends 'polls/base.html' %} {% block content %}
<main>
	<nav class="bg-white p-4 shadow-xl border-b-2 border-solid border-neutral-700">
		<div class="container mx-auto flex items-center justify-between">
			<div class="text-2xl font-bold text-black">🤔{{ question.question_text }}</div>

			<!-- Button -->
			<div>
				<div class="flex flex-wrap items-center space-x-2">
					<header class="flex items-center justify-center">
						<div class="flex flex-wrap items-center space-x-2">
							<!--End-->
						</div>
					</header>
				</div>
			</div>
		</div>
	</nav>
	<!-- Vote Page Content -->
	{% comment %} <div class="container mx-auto p-4">
		<!-- Participant + UP DOWN zone -->
		<div class="flex flex-wrap items-center text-gray-600 mb-4 place-content-center">
			<div class="flex items-center text-black py-1 rounded-md mr-2">
				<div class="relative">
					<div class="rounded-lg bg-white p-4 shadow-md border-solid border-2 border-neutral-500 relative z-10">
						<span class="mr-2">👤 {{ participant_count }} Participants</span>
						<span class="mr-2">👍 {{ question.up_vote_percentage }}% Upvoted</span>
						<span>👎 {{ question.down_vote_percentage }}% Downvoted</span>
					</div>
					<div
						class="absolute inset-0 mt-1 ml-1 h-full w-full rounded-lg border-2 border-neutral-700 bg-gradient-to-r from-green-400 to-blue-500"></div>
				</div>
			</div>
		</div>
	</div> {% endcomment %}

	<!-- Modern Choice Selection -->
	<div class="bg-neutral-100 p-4 rounded-lg mb-4">
		<div class="relative">
			<div class="rounded-lg bg-white p-4 shadow-md border-solid border-2 border-neutral-500 relative z-10">
				<div class="bg-white p-4 rounded-lg shadow-md mb-4">
					<p class="bg-white p-4 border-neutral-700 text-lg font-semibold overflow-hidden break-words">
						{{ long_description }}
					</p>
				</div>
				<div class="flex flex-col space-y-4">
					<form action="{% url 'polls:vote' question.id %}" method="post" class="poll-form" id="poll-form">
						{% csrf_token %}
						{% if selected_choice %}
							<div class="bg-white p-4 rounded-lg shadow-md mb-4">
								<div id="selected-choice-1" class="mt-4 text-lg font-bold text-orange-500">You have been voted: {{ selected_choice.choice_text }}</div>
							</div>
						{% else %}
							<div class="bg-white p-4 rounded-lg shadow-md mb-4">
								<div id="selected-choice-2" class="mt-4 text-lg font-bold text-green-500">Please Select a Choice😊</div>
							</div>
						{% endif %}
						<div class="bg-white p-4 rounded-lg shadow-md mb-4">
							<div class="grid grid-cols-3 gap-4">
								<!-- Buttons as choices (hidden) -->
								{% for choice in question.choice_set.all %}
								<label>
									{% if choice == selected_choice %}
									<input type="radio" name="choice" value="{{ choice.id }}" class="hidden" checked="checked"/>
									<button
										type="button"
										class="choice-button selected bg-green-500 border-solid border-2 border-black hover:bg-green-600 text-black px-4 py-2 rounded-lg shadow-md transition-colors duration-300 w-full py-5 font-bold text-lg truncate"
										onclick="toggleChoice(this, '{{ choice.id }}')">
										{{ choice.choice_text }}
									</button>
									{% else %}
									<input type="radio" name="choice" value="{{ choice.id }}" class="hidden" />
									<button
										type="button"
										class="choice-button bg-white-500 border-2 border-black hover:bg-neutral-200 text-black px-4 py-2 rounded-lg shadow-md transition-colors duration-300 w-full py-5 font-bold text-lg truncate"
										onclick="toggleChoice(this, '{{ choice.id }}')">
										{{ choice.choice_text }}
									</button>
									{% endif %}
								</label>
								{% endfor %}
							</div>
						</div>
	
						<!-- Submit -->
						<div class="flex flex-row-reverse">
							<a
								href="{% url 'polls:index' %}"
								class="bg-orange-400 text-white px-4 py-2 rounded-lg hover:bg-orange-500 transition-colors duration-300">
								Back to Polls
							</a>
							<button
								type="submit"
								name="vote-button"
								class="bg-blue-500 text-white px-4 py-2 mx-5 rounded-lg hover:bg-blue-600 transition-colors duration-300"
								id="vote-button" disabled>
								Vote
							</button>
						</div>
					</form>
				</div>
			</div>
			<div
				class="absolute inset-0 mt-1 ml-1 h-full w-full rounded-lg border-2 border-neutral-700 bg-gradient-to-r from-green-400 to-blue-500"></div>
		</div>
	</div>
</main>

{% endblock content %}