<table class="table table-striped text-center">
	<thead>
	<tr>
		<td><b>Requirement</b></td>
		<td><b>Settings</b></td>
	</tr>
	</thead>
	<tbody id="challenge-solves-body">
	{% set requirements = challenge.requirements %}
	{% if challenge.requirements %}
		{% for prereq in requirements['prerequisites'] %}
			<tr>
				<td>{{ challenges[prereq] }}</td>
				<td>
					<i role='button' class='btn-fa fas fa-times delete-requirement' challenge-id="{{ prereq }}"></i>
				</td>
			</tr>
		{% endfor %}
	{% endif %}
	</tbody>
</table>

<form id="prerequisite-add-form">
	<div class="form-group">
		<select class="form-control custom-select" name="prerequisite">
			<option value=""> -- </option>
			{% for challenge_id in challenges %}
				{% if challenge.requirements %}
					{% if challenge_id not in challenge.requirements['prerequisites'] %}
						<option value="{{ challenge_id }}">{{ challenges[challenge_id] }}</option>
					{% endif %}
				{% elif challenge_id != challenge.id %}
					<option value="{{ challenge_id }}">{{ challenges[challenge_id] }}</option>
				{% endif %}
			{% endfor %}
		</select>
	</div>
	<div class="form-group">
		<button class="btn btn-success float-right">Add Prerequisite</button>
	</div>
</form>

<script>
	var CHALLENGE_REQUIREMENTS = {{ challenge.requirements | tojson }} || {prerequisites: []};
</script>