{%extends "basedialog.html"%}
{%import "commonExecuteCallback.js" as commons%}
{%block title %}Predict Flight Delays with Apache Spark MLlib, FlightStats, and IBM Insights for Weather{%endblock%}

{%block body%}
  <style>
    {%include module + ":flights.css" with context%}
  </style>
  <div class="tab-content container-fluid" >
    <div class="tab-pane tab-pane-flightpredictdata row">
      <div class="col-sm-4">
        <div class="chart-wrapper" id="prediction-models">
          <div class="chart-title">
            <span>Prediction Models</span>
            <span class="memo"></span>
          </div>
          <div class="chart-stage">
            <ul class="prediction-models-list"></ul>
          </div>
          <div class="chart-notes">&nbsp;</div>
        </div>
        <div class="chart-wrapper" id="weather-forecasts">
          <div class="chart-title">
            <span>Weather Forecast</span>
            <span class="memo"></span>
          </div>
          <div class="chart-stage">
            <ul class="weather-forecast-list"></ul>
          </div>
          <div class="chart-notes">&nbsp;</div>
        </div>
      </div>
      <div class="col-sm-8">
        <div class="chart-wrapper">
          <div class="chart-title">
            <span>Map</span>
            <span class="memo"></span>
          </div>
          <div class="chart-stage">
            <div id="flightpredict-map" style="height: calc(70vh - 60px);"></div>
          </div>
          <div class="chart-notes">&nbsp;</div>
        </div>
      </div>
    </div>
    <div class="tab-pane tab-pane-flightpredictform row active">
      <div style="text-align: center;">
        <div class="chart-wrapper flight-info">
          <div class="chart-title">
            <span>Enter your flight information </span>
          </div>
          <div class="chart-stage" style="height: calc(70vh - 60px);">
            <div class="row">
              <form id="flightpredictform">
              <div class="flight-one">
                <div class="pixiedust-formfield">
                  <label for="flight-predict-departure-one">Departure Airport</label>
                  <input id="flight-predict-departure-one" name="flight-predict-departure-one" class="col-sm-12" type="text" readonly disabled value="{{initialAirport}}">
                </div>
                <div class="pixiedust-formfield">
                  <label for="flight-predict-date-one">Flight Date</label>
                  <input id="flight-predict-date-one" name="flight-predict-date-one" class="col-sm-12" placeholder="e.g., MM/DD/YYYY">
                </div>
                <div class="pixiedust-formfield">
                  <label for="flight-predict-time-one">Approximate Flight Time</label>
                  <select id="flight-predict-time-one" name="flight-predict-time-one" class="col-sm-12" type="text">
                    <option value="0">12:00am - 12:59am</option>
                    <option value="1">1:00am - 1:59am</option>
                    <option value="2">2:00am - 2:59am</option>
                    <option value="3">3:00am - 3:59am</option>
                    <option value="4">4:00am - 4:59am</option>
                    <option value="5">5:00am - 5:59am</option>
                    <option value="6">6:00am - 6:59am</option>
                    <option value="7">7:00am - 7:59am</option>
                    <option value="8">8:00am - 8:59am</option>
                    <option value="9">9:00am - 9:59am</option>
                    <option value="10">10:00am - 10:59am</option>
                    <option value="11">11:00am - 11:59am</option>
                    <option value="12">12:00pm - 12:59pm</option>
                    <option value="13">1:00pm - 1:59pm</option>
                    <option value="14">2:00pm - 2:59pm</option>
                    <option value="15">3:00pm - 3:59pm</option>
                    <option value="16">4:00pm - 4:59pm</option>
                    <option value="17">5:00pm - 5:59pm</option>
                    <option value="18">6:00pm - 6:59pm</option>
                    <option value="19">7:00pm - 7:59pm</option>
                    <option value="20">8:00pm - 8:59pm</option>
                    <option value="21">9:00pm - 8:59pm</option>
                    <option value="22">10:00pm - 10:59pm</option>
                    <option value="23">11:00pm - 11:59pm</option>
                  </select>
                </div>
                <div class="pixiedust-formfield" style="text-align:right;top:-10px;position:relative;">
                  <button class="btn btn-sm btn-search" data-flight-suffix="one">Search Flights</button>
                </div>
                <div class="pixiedust-formfield">
                  <label for="flight-predict-select-one">Flight</label>
                  <select id="flight-predict-select-one" name="flight-predict-select-one" class="col-sm-12" type="text"></select>
                </div>
                <div class="pixiedust-formfield fp-more-link">
                  <span>Taking multiple flights?<br/>Enter the second leg.<br/></span>
                  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                      height="24px" width="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
                    <g>
                      <polygon points="12,1 9,4 15,10 1,10 1,14 15,14 9,20 12,23 23,12"/>
                    </g>
                  </svg>
                </div>
              </div>
              
              <div class="flight-two">
                <div class="pixiedust-formfield">
                  <label for="flight-predict-departure-two">Departure Airport</label>
                  <input id="flight-predict-departure-two" name="flight-predict-departure-two" class="col-sm-12" type="text" readonly disabled>
                </div>
                <div class="pixiedust-formfield">
                  <label for="flight-predict-date-two">Flight Date</label>
                  <input id="flight-predict-date-two" name="flight-predict-date-two" class="col-sm-12" placeholder="e.g., MM/DD/YYYY">
                </div>
                <div class="pixiedust-formfield">
                  <label for="flight-predict-time-two">Approximate Flight Time</label>
                  <select id="flight-predict-time-two" name="flight-predict-time-two" class="col-sm-12" type="text">
                    <option value="0">12:00am - 12:59am</option>
                    <option value="1">1:00am - 1:59am</option>
                    <option value="2">2:00am - 2:59am</option>
                    <option value="3">3:00am - 3:59am</option>
                    <option value="4">4:00am - 4:59am</option>
                    <option value="5">5:00am - 5:59am</option>
                    <option value="6">6:00am - 6:59am</option>
                    <option value="7">7:00am - 7:59am</option>
                    <option value="8">8:00am - 8:59am</option>
                    <option value="9">9:00am - 9:59am</option>
                    <option value="10">10:00am - 10:59am</option>
                    <option value="11">11:00am - 11:59am</option>
                    <option value="12">12:00pm - 12:59pm</option>
                    <option value="13">1:00pm - 1:59pm</option>
                    <option value="14">2:00pm - 2:59pm</option>
                    <option value="15">3:00pm - 3:59pm</option>
                    <option value="16">4:00pm - 4:59pm</option>
                    <option value="17">5:00pm - 5:59pm</option>
                    <option value="18">6:00pm - 6:59pm</option>
                    <option value="19">7:00pm - 7:59pm</option>
                    <option value="20">8:00pm - 8:59pm</option>
                    <option value="21">9:00pm - 8:59pm</option>
                    <option value="22">10:00pm - 10:59pm</option>
                    <option value="23">11:00pm - 11:59pm</option>
                  </select>
                </div>
                <div class="pixiedust-formfield" style="text-align:right;top:-10px;position:relative;">
                  <button class="btn btn-sm btn-search" data-flight-suffix="two">Search Flights</button>
                </div>
                <div class="pixiedust-formfield">
                  <label for="flight-predict-select-two">Flight</label>
                  <select id="flight-predict-select-two" name="flight-predict-select-two" class="col-sm-12" type="text"></select>
                </div>
              </div>
              </form>
            </div>
            <div class="row flight-predict-message"></div>
            <div class="row fp-progress">
              <span class="fp-dep">{{initialAirport}}</span>
              <span class="fp-path-one">&nbsp;</span>
              <span class="fp-arr-one">&nbsp;</span>
              <span class="fp-path-two">&nbsp;</span>
              <span class="fp-arr-two">&nbsp;</span>
            </div>
          </div>
          <div class="chart-notes">&nbsp;</div>
        </div>
      </div>
    </div>
  </div>
{%endblock%}

{%block onCancel%}
  $('#results{{prefix}}').html('<p class="text-center">Flight Predict has been cancelled.</p>');
  $('#loading{{prefix}}').css('display','none');
{%endblock%}

{%block onOK%}
  $('#results{{prefix}}').html('<p class="text-center">Thank you for using Flight Predict. Have a safe flight!</p>');
  $('#loading{{prefix}}').css('display','none');
{%endblock%}

{%block onDialogShown%}
  {%include module + ":flights.js" with context%}
{%endblock%}

{%block onDialogHide%}
  
{%endblock%}

{%block cellOuputHTML%}
  <div id="loading{{prefix}}" style="display:none">
    <div style="width:100px;height:60px;left:47%;position:relative">
        <i class="fa fa-circle-o-notch fa-spin" style="font-size:48px"></i>
    </div>
    <div style="text-align:center">Generating the notebook cells for the demo. Please wait...</div>
  </div>
  <div id="results{{prefix}}"></div>
{%endblock%}
