<div id="add-cron-modal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      Add a Wurker Cron
    </div>
    <div style="width:500; height:auto;">
      <form id="add-cron-form" class="modal-form" data-droneid="">

	<div class="form-row">
	  <label for="name">Name<span style="color:red;">*</span> </label>
	  <input type="text" name="name" id="add-cron-name" title="Name this Cron"
		 placeholder="Required Cron Name&#8230;" value="">
	</div>

	<div class="form-row">
	  <label for="cron">Cron</label>
	  <input type="text" name="cron" id="add-cron-cron" title="Define this Cron"
	    placeholder="Set to schedule. Leave empty to supervise&#8230;" value="">
	</div>

	<div class="form-row">
	  <label for="overrun">Overrun</label>
	  <input type="text" name="overrun" id="add-cron-overrun" title="Allowed Timeout Overruns"
	    placeholder="Set allowed timeout overruns. Empty: 0&#8230;" value="">
	</div>

      </form>
    </div>

    <div class="modal-footer">
      <div class="float-right">
	<button class="cancel">Cancel</button>
	<button class="submit">Add Cron</button>
      </div>
    </div>

  </div>
</div>

<div id="edit-cron-modal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      Edit Wurker Cron
    </div>
    <div style="width:500; height:auto;">
      <form id="edit-cron-form" class="modal-form" data-droneid="">

	<div class="form-row">
	  <label for="edit-cron">Edit<span style="color:red;">*</span> </label>
	  <select name="edit-cron" id="edit-cron-selector" title="Select a Cron to Edit">
	    <option value="" disabled selected hidden>Choose Cron to Edit&#8230;</option>
	    {% for item in cronData %}
	      <option value="{{ item['slug'] }}">
		{{ item['name'] }}
	      </option>
	    {% endfor %}
	  </select>
	</div>

	<div class="form-row">
	  <label for="name">Name </label>
	  <input type="text" name="name" id="edit-cron-name" title="Name this Cron"
		 placeholder="Required Cron Name&#8230;" value="">
	</div>

	<div class="form-row">
	  <label for="cron">Cron</label>
	  <input type="text" name="cron" id="edit-cron-cron" title="Define this Cron"
	    placeholder="Set to schedule. Leave empty to supervise&#8230;" value="">
	</div>

	<div class="form-row">
	  <label for="overrun">Overrun</label>
	  <input type="text" name="overrun" id="edit-cron-overrun" title="Allowed Timeout Overruns"
	    placeholder="Set allowed timeout overruns&#8230;" value="">
	</div>

      </form>
    </div>

    <div class="modal-footer">
      <div class="float-right">
	<button class="cancel">Cancel</button>
	<button class="submit">Save</button>
      </div>
    </div>

  </div>
</div>

<div id="remove-cron-modal" class="modal">
  <div class="modal-content">
    <div class="modal-header">
      Remove Wurker Cron
    </div>
    <div style="width:500; height:auto;">
      <form id="remove-cron-form" class="modal-form" data-droneid="">

	{% if not cronWidowed %}
	  <p>No unattached Crons to remove.</p>
	{% else %}
	  <p>Only unattached Crons may be removed.</p>
	  <div class="form-row">
	    <label for="remove-cron">Remove<span style="color:red;">*</span> </label>
	    <select name="remove-cron" id="remove-cron-selector" title="Select a Cron to Remove">
	      <option value="" disabled selected hidden>Choose Cron to Remove&#8230;</option>
	      {% for item in cronWidowed %}
		<option value="{{ item['slug'] }}">
		  {{ item['name'] }}
		</option>
	      {% endfor %}
	    </select>
	  </div>
	{% endif %}

      </form>
    </div>

    <div class="modal-footer">
      <div class="float-right">
	<button class="cancel">Cancel</button>
	<button class="submit" {% if not cronWidowed %}style="display:none;"{% endif %}>
	  Remove
	</button>
      </div>
    </div>

  </div>
</div>
