{% extends "layout.html" %}
{% block body %}
<div class="row">
  <div class="col-sm-9 col-md-10 col-sm-push-3 col-md-push-2">
    <h3 id="info-header"> Processing... </h3>
    <p id="info-text"> Your assistant is now running. You may be asked for questions in the process </p>

    <div class="progress">
      <div id="progressbar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
        <span class="sr-only" id="progresstext">0% complete</span>
      </div>
    </div>

    <h3> Information Log: </h3>
    <div class="well" style="overflow: hidden"> <div style="overflow-y: scroll; height: 250px" id="log"></div></div>

    <a href="javascript:history.back()" id="close-button" class="btn btn-danger pull-right">Abort</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Question</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-3 control-label" for="textInput-modal-markup">What is your name?</label>
            <div class="col-sm-9">
              <input type="text" id="textInput-modal-markup" class="form-control"></div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Answer</button>
      </div>
    </div>
  </div>
</div>


  </div>
  <div class="col-sm-3 col-md-2 col-sm-pull-9 col-md-pull-10 sidebar-pf sidebar-pf-left">
    <h3>{% if runnable["img"] %}
		<img class="media-object" src="{{ runnable['img'] }}" style="width: 20px;float: left;" alt="runnable['tooltip']">
	{% endif %}
	{{ runnable.fullname }} </h3>
    <p> {{ runnable.description }} </p>
  </div>
</div>
<script>
$(function() {
var i = 0;
var p = 0;
var on = 1;

$(window).bind("beforeunload",function(event) {
    if (i < 20) return "Assistant is running, if you go away, it will be aborted.";
});

var interval = setInterval(function(){
  if (on == 1) {
    if (i < 19) {
      $("div#log").append("INFO: Lorem ipsum, donor it amed<br />");
    }
    if (i == 2) {
      $("div#log").append("INFO: Asking question<br />");
      on = 0;
      $('#myModal').modal({
        keyboard: false
      })
      $('#myModal').on('hidden.bs.modal', function (e) {
        $("div#log").append("INFO: Answered<br />");
        on = 1;
      })
    }
    if (i == 19) {
      $("div#log").append("INFO: Done.<br />");
      $("a#close-button").text("Back");
      $("a#close-button").attr("class", "btn btn-primary pull-right");
      $("p#info-text").text("Your assistant has successfully completed.");
      $("h3#info-header").text("Finished");
    }
    i++;
    p = Math.min(i*5, 100);
    $("span#progresstext").text("" + p + "% complete");
    $("div#progressbar").attr("aria-valuenow", "" + p);
    $("div#progressbar").attr("style", "width: " +p + "%");
    if (i >= 20) {
      clearInterval(interval);
    }
  }
}, 1000);


});
</script>

{% endblock %}