{%import "commonExecuteCallback.js" as commons with context%}
{%import "executePythonDisplayMacro.js" as display with context%}
{%set editMode = this.options.get("nostore_edit")=='true'%}

<div class="page-header pd_save">
  <div class="text-center">
    <h1>Flight Predictor Configuration Dashboard</h1>
    <smaller>powered by PixieDust, FlightStats, Apache Spark and IBM Weather on Bluemix<smaller>
  </div>
  <div align="right" style="margin:10px">
    <button id="edit{{prefix}}" class="btn btn-default" type="button">{{ "Save Configuration" if editMode else "Edit Configuration"}} </button>
    <script>
        $('#edit{{prefix}}').click(function(){
            {{display.executeDisplay('{"nostore_edit":' + ("false" if editMode else "true") + '}', useCellMetadata=True)}}
        })
    </script>
  </div>
</div>

<style class="pd_save">
  .configureWizardContainer{
    border: forestgreen;
    border-width: 5px;
    border-style: solid;
    border-radius: 15px;
    padding: 5px;
  }
</style>

{% if editMode %}
<div class="container configureWizardContainer pd_save" id="myWizard" style="width:95%">
   <div class="progress">
     <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="5" style="width: 20%;">
       Step 1 of {{steps|count}}
     </div>
   </div>
  
   <div class="navbar pd_save" style="display:none">
      <div class="navbar-inner">
            <ul class="nav nav-pills">
              {%for step in steps%}
                <li {%if loop.index == 1%}class="active"{%endif%}>
                  <a href="#step{{loop.index}}" data-toggle="tab" data-step="{{loop.index}}">{{step["title"]}}</a>
                </li>
              {%endfor%}
            </ul>
      </div>
   </div>
   <div class="tab-content pd_save">
       {% set stepContext = "html"%}
       {%for step in steps%}
       {% set stepId = "step" ~ loop.index%}
        <div class="tab-pane fade in {%if loop.index == 1%}active{%endif%}" id="step{{loop.index}}"> 
            <div class="page-header text-center">
                <h1>{{step["title"]}}</h1>
            </div>
            {% with args=step["args"]%}
            {%include module + ":" + step["template"]%}
            {% endwith %}
            {%if loop.index > 1%}
            <a class="btn btn-default btn-lg prev" prev="step{{loop.index-1}}" href="#">Prev</a>
            {%endif%}
            {%if loop.index < loop.length%}
            <a class="btn btn-default btn-lg next" next="step{{loop.index+1}}" href="#">Next</a>
            {%endif%}
        </div> 
       {%endfor%}
   </div>  
</div>

<script class="pd_save">
$('.next').click(function(){
  var nextId = $(this).attr("next");
  $('[href=#'+nextId+']').tab('show');
  return false;
  
})

$('.prev').click(function(){
  var nextId = $(this).attr("prev");
  $('[href=#'+nextId+']').tab('show');
  return false;
  
})

var showTabCallbacks = {};
function registerShowTabCallback(step, callback){
  if (!showTabCallbacks.hasOwnProperty(step) ){
    showTabCallbacks[step]=[];
  }
  showTabCallbacks[step].push(callback);
}

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {  
  //update progress
  var step = $(e.target).data('step');
  var percent = (parseInt(step) / {{steps|count}}) * 100;
  
  $('.progress-bar').css({width: percent + '%'});
  $('.progress-bar').text("Step " + step + " of {{steps|count}}");
  
  //e.relatedTarget // previous tab

  var stepId = "step"+step;
  if (showTabCallbacks.hasOwnProperty(stepId)){
    for (var i=0; i < showTabCallbacks[stepId].length; i++ ){
      showTabCallbacks[stepId][i]();
    }
  }
  
})

$('.first').click(function(){
  $('#myWizard a:first').tab('show')
})
</script>

{%else%}
<table class="table table-hover pd_save" style="font-size:larger">
  <thead>
    <tr>
      <th align="center" valign="middle">Status</th>
      <th>Task</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
  {% for task in tasks %}
    <tr>
      <td><i class="fa fa-2x {{task['status-class']}}" aria-hidden="true"></i></td>
      <td>{{task['task']}}</td>
      <td>
        {% if task['code'] and task['id']%}
          <button class="btn btn-default" id="load{{task['id']+prefix}}">{{task['action']}}</button>
          <script>
              $("#load{{task['id']+prefix}}").click(function(){
                  {% call(results) commons.ipython_execute(task['code'], prefix) %}
                  {% endcall %};
              });
          </script>
        {% else %}
          {{task['action']}}
        {% endif %}
      </td>
    </tr>
  {% endfor %}
  </tbody>
</table>
{%endif%}