{% extends "base.html" %}
{% block content %}

<h1 class="text-center">Quiz Extensions</h1>

<div id="container" class="container">
	<p>This tool will apply extra time to <strong>all existing</strong> quizzes/exams. For example, Suzy Johnson and
		Stephen Smith need Time and a Half. Select the students below and choose the appropriate amount of extra time
		e.g., Time and a Half (1.5x).</p>
	<p>If additional quizzes/exams are added during the semester, a message will appear below stating there are new
		quizzes which need extensions. Click the <strong>Apply Now</strong> button to add the same extensions.</p>
	<div id="alerts" class='text-center'>
		<div id="missing_alert" class='alert alert-warning fade in' role='alert' style="display: none;">
			<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
			<p>New quizzes available for extensions.&nbsp;&nbsp;&nbsp;&nbsp;<button id="apply_now" type="button"
					class="btn btn-success btn-sm" data-toggle="modal" data-target="#go_modal">Apply Now</button></p>
		</div>
	</div>
	<div id="lists" class="row">
		<div id="users" class="col-xs-6">
			<div id="form_div">
				<form id="filter_form" class="form-inline">
					<input type="text" id="filter_users" class="form-control" placeholder="Student Name">
					<button type="submit" id="filter_users_button" class="btn btn-info btn-sm"><span
							class="glyphicon glyphicon-search"></span> Search</button>
				</form>
			</div>
			<div id="user_list_div">
				<!-- user_list loads here -->
			</div>
		</div>
		<div id="selected_users" class="col-xs-6">
			<div id="selected_header">
				<h4>Selected Students</h4>
			</div>
			<div id="selected_user_list" class="btn-group-vertical"></div>
			<button id="go_button" type="button" class="btn btn-success pull-left" data-toggle="modal"
				data-target="#go_modal"><span class="glyphicon glyphicon-ok"></span> Submit</button>
			<button id="clear_button" type="button" class="btn btn-danger pull-right"><span
					class="glyphicon glyphicon-remove"></span> Clear</button>
		</div>
	</div>
</div>

<div id="go_modal" class="modal fade" role="dialog" data-backdrop="static">
	<div class="modal-dialog">

		<div class="modal-content">
			<div class="modal-header">
				<button type="button" id="close_x" class="close" data-dismiss="modal" aria-label="Close"><span
						aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">Extend Time</h4>
			</div>
			<div class="modal-body text-center">
				<div id="percent_form" class="form-inline">
					<p>Choose a predetermined extension or set a custom extension represented by percentage. For
						example, double time and a half would be 250%.</p>
					<select id="percent_select" class="form-control">
						<option value="100">Normal (1x)</option>
						<option value="150" selected>Time and a Half (1.5x)</option>
						<option value="200">Double (2x)</option>
						<option value="300">Triple (3x)</option>
						<option value="400">Quadruple (4x)</option>
					</select>
					or
					<input id="percent_input" type="number" min="100" class="form-control"> %

					<p>The following students will have <span id="modal_percent_added"></span>% of normal time on all
						quizzes:</p>
					<ul id="modal_selected_user_list" class="list-unstyled"></ul>
				</div>

				<div id="update_status" style="display: none;">
					<!-- BELOW HERE -->
					<div id="refresh">
						<h4>Refreshing Quizzes</h4>
						<p class="status-perc">0%</p>
						<div class="progress">
							<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
								aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
								<span class="sr-only">0% Complete</span>
							</div>
						</div>
						<p class="status-msg">Not Started</p>
					</div>
					<hr />
					<div id="update">
						<h4>Updating Quizzes</h4>
						<p class="status-perc">0%</p>
						<div class="progress">
							<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
								aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
								<span class="sr-only">0% Complete</span>
							</div>
						</div>
						<p class="status-msg">Not Started</p>
					</div>
					<!-- ABOVE HERE -->
				</div>

				<div id="results" style="display: none;">
					<h4>Extension Results</h4>
				</div>

			</div>
			<div class="modal-footer">
				<button id="results_button" type="button" class="btn btn-info" style="display: none;"><span
						class="glyphicon glyphicon-list-alt"></span> View Results</button>
				<button id="submit_button" type="button" class="btn btn-success"><span
						class="glyphicon glyphicon-ok"></span> Submit</button>
				<button id="close_button" type="button" class="btn btn-danger" data-dismiss="modal"><span
						class="glyphicon glyphicon-remove"></span> Close</button>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	var course_id = {{ course_id }};
	var filter_url = "{{ url_for('filter', course_id=course_id) }}";
	var update_url = "{{ url_for('update', course_id=course_id) }}";
	var refresh_url = "{{ url_for('refresh', course_id=course_id) }}";
	var missing_and_stale_quizzes_url = "{{ url_for('missing_and_stale_quizzes_check', course_id=course_id) }}";
</script>

{% endblock %}