{% extends "layout/backend.j2" %}
{% block content %}
<div class="row">
	<div class="col-10">
		<h1>Vote: {{ ballot.name }}</h1>
	</div>
	<div class="col-2 text-right">
		<a href="{{ url_for('vote.add_question', ballot_id=ballot.id) }}"><button class="btn btn-secondary btn-sm">Add question</button></a>
	</div>
</div>
<table class="table table-sm">
	<tr>
		<th scope="row">Description</th>
		<td>{{ ballot.description }}</td>
	</tr>
	<tr>
		<th scope="row">Start</th>
		<td>{{ ballot.start_at }}</td>
	</tr>
	<tr>
		<th scope="row">End</th>
		<td>{{ ballot.end_at }}</td>
	</tr>
    <tr>
        <th scope="row">Te gaan</th>
        <td class="countdown" date="{{ ballot.end_at }}"><span class="hours">00</span>:<span class="minutes">00</span>:<span class="seconds">00</span></td>
    </tr>
	<tr>
		<th scope="row">User</th>
		<td>{{ ballot.user.name }}</td>
	</tr>
	<tr>
		<th scope="row">Priority</th>
		<td>{{ ballot.priority.name }}</td>
	</tr>
</table>
<div class="row">
	{% for question in ballot.questions %}
	<div class="col-6 mb-4">
		<div class="card">
			<div class="card-body">
			    <h5 class="card-title">{{ question.name }}</h5>
				{% if question.description %}
			    <p class="card-text">{{ question.description }}</p>
			    {% endif %}
			</div>
			{% if question.options.all() | count %}
			<ul class="list-group list-group-flush">
				{% for option in question.options %}
				<li class="list-group-item d-flex justify-content-between align-items-center">
					{{ option.name }}
					<span class="badge badge-primary badge-pill">{{ option.votes.all() | count }}</span>
				</li>
				{% endfor %}
			</ul>
			{% else %}
			<hr>
			{% endif %}
			{% if not question.combined_approval_voting %}
			<div class="card-body">
				<form class="row" method="post">
					<input type="hidden" name="question_id" value="{{ question.id }}">
					<div class="col-10">
				    	<input type="text" class="form-control" name="name" placeholder="Option" required>
					</div>
					<div class="col-2">
					    <button type="submit" class="btn btn-primary">Add</button>
					</div>
				</form>
			</div>
			{% endif %}
		</div>
	</div>
	{% endfor %}
</div>
{% endblock %}