{% extends 'layout/default.html' %}

{% block pageScripting %}
<script src="/assets/scripts/scheduler.js"></script>
{% endblock %}

{% block content %}
<h2>Create Scheduled Job</h2>
<form method="post" action="/jobschedule/post">
	<div class="form">
		{% if _id %}
		<input type="hidden" name="jobSchedule[_id]" value="{{ _id }}" />
		{% endif %}
		<div class="input-row">
			<label for="input-command">System Command</label>
			<input type="text" id="input-command" name="jobSchedule[command]" value="{{ command }}" />
		</div>
		{% if parameters && parameters.length %}
		{% for commandParam in parameters %}
		<div class="input-row">	
			{% if loop.first %}
			<label for="input-params">Parameters</label>
			<input type="text" name="jobSchedule[parameters][]" id="input-params" value="{{ commandParam }}" />
			<img id="tock-param-add" src="/assets/images/application-plus-black.png" />
			{% else %}
			<label></label>
			<input type="text" name="jobSchedule[parameters][]" value="{{ commandParam }}" />
			{% endif %}
		</div>
		{% endfor %}
		{% else %}
		<div class="input-row input-parameters">
			<label for="input-params">Parameters</label>
			<input type="text" name="jobSchedule[parameters][]" id="input-params" />
			<img id="tock-param-add" src="/assets/images/application-plus-black.png" />
		</div>
		{% endif %}
		<div class="input-row">
			<label for="input-maxrunning">Max # of Concurrent Running</label>
			<input type="text" name="jobSchedule[maxRunning]" id="input-maxrunning" value="{% if maxRunning %}{{ maxRunning }}{% else %}1{% endif %}" />
		</div>
	</div>
	<div class="accordion tock-schedule-container">
		<h3>
			<a href="#">Minutes</a>
			<div class="tock-value"></div>
		</h3>
		<div class="tock-selection-div">
			<input type="hidden" name="jobSchedule[minutes]" class="tock-schedule-selector" value="{{ minutes }}" />
			<div id="tabs-minutes" class="tabs ui-tabs">
				<ul>
					<li><a href="#tabs-minutes-1" class="tock-select-all">every minute</a></li>
					<li><a href="#tabs-minutes-2">every (n) minutes</a></li>
					<li><a href="#tabs-minutes-3" class="tock-select-each">each selected minute</a></li>
				</ul>
				<div id="tabs-minutes-1">
					<span class="font-extra-large">*</span>
				</div>
				<div id="tabs-minutes-2">
					<div class="slider" data-max="59"></div>
				</div>
				<div id="tabs-minutes-3">
					<div id="minute-block" class="block-selector"></div>
				</div>
			</div>
		</div>
		<h3>
			<a href="#">Hours</a>
			<div class="tock-value"></div>
		</h3>
		<div class="tock-selection-div">
			<input type="hidden" name="jobSchedule[hours]" class="tock-schedule-selector" value="{{ hours }}" />
			<div id="tabs-hours" class="tabs ui-tabs">
				<ul>
					<li><a href="#tabs-hours-1" class="tock-select-all">every hour</a></li>
					<li><a href="#tabs-hours-2">every (n) hours</a></li>
					<li><a href="#tabs-hours-3" class="tock-select-each">each selected hour</a></li>
				</ul>
				<div id="tabs-hours-1">
					<span class="font-extra-large">*</span>
				</div>
				<div id="tabs-hours-2">
					<div class="slider" data-max="23"></div>
				</div>
				<div id="tabs-hours-3">
					<div id="hour-block" class="block-selector"></div>
				</div>
			</div>
		</div>
		<h3>
			<a href="#">Days Of Month</a>
			<div class="tock-value"></div>
		</h3>
		<div class="tock-selection-div">
			<input type="hidden" name="jobSchedule[daysOfMonth]" class="tock-schedule-selector" value="{{ daysOfMonth }}" />
			<div id="tabs-daysofmonth" class="tabs ui-tabs">
				<ul>
					<li><a href="#tabs-daysofmonth-1" class="tock-select-all">every day</a></li>
					<li><a href="#tabs-daysofmonth-2">every (n) days</a></li>
					<li><a href="#tabs-daysofmonth-3" class="tock-select-each">each selected day</a></li>
				</ul>
				<div id="tabs-daysofmonth-1">
					<span class="font-extra-large">*</span>
				</div>
				<div id="tabs-daysofmonth-2">
					<div class="slider" data-max="31"></div>
				</div>
				<div id="tabs-daysofmonth-3">
					<div id="dayofmonth-block" class="block-selector"></div>
				</div>
			</div>
		</div>
		<h3>
			<a href="#">Months</a>
			<div class="tock-value"></div>
		</h3>
		<div class="tock-selection-div">
			<input type="hidden" name="jobSchedule[months]" class="tock-schedule-selector" value="{{ months }}" />
			<div id="tabs-months" class="tabs ui-tabs">
				<ul>
					<li><a href="#tabs-months-1" class="tock-select-all">every month</a></li>
					<li><a href="#tabs-months-3" class="tock-select-each">each selected month</a></li>
				</ul>
				<div id="tabs-months-1">
					<span class="font-extra-large">*</span>
				</div>
				<div id="tabs-months-3">
					<div id="month-block" class="block-selector"></div>
				</div>
			</div>
		</div>
		<h3>
			<a href="#">Days Of Week</a>
			<div class="tock-value"></div>
		</h3>
		<div class="tock-selection-div">
			<input type="hidden" name="jobSchedule[daysOfWeek]" class="tock-schedule-selector" value="{{ daysOfWeek }}" />
			<div id="tabs-daysofweek" class="tabs ui-tabs">
				<ul>
					<li><a href="#tabs-daysofweek-1" class="tock-select-all">every day of week</a></li>
					<li><a href="#tabs-daysofweek-3" class="tock-select-each">each selected day of week</a></li>
				</ul>
				<div id="tabs-daysofweek-1">
					<span class="font-extra-large">*</span>
				</div>
				<div id="tabs-daysofweek-3">
					<div id="dayofweek-block" class="block-selector"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="button-row">
		<input type="submit" value="Create Scheduled Job" />
	</div>
</form>
{% endblock %}