<html>

<head>
  <script src="/static/js/lib/tether.js"></script>
  <script data-main="/static/js/summary1" src="/static/js/require.js"></script>

</head>



<h1>Scorpion Tutorial </h1>


<div class="row">
  <div class="col-md-6">
    <div class="row">
      <div class="col-md-2"> </div>
      <div class="col-md-3">
        <span>
          <div id="selection-type" data-toggle="tooltip" data-placement="top" class="onoffswitch">
              <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
              <label class="onoffswitch-label" for="myonoffswitch">
                  <span class="onoffswitch-inner"></span>
                  <span class="onoffswitch-switch"></span>
              </label>
          </div>
        </span>
      </div>
      <div class="col-md-3">
        <span id="apply-btn" data-toggle="tooltip" data-placement="top" title="Set base query to current selection" class="btn btn-primary btn-sm">Add Filters to Query</span>
      </div>
    </div>

    <div class='row'>
      <div class="col-md-10 col-md-offset-2" style='max-width:450px; padding-left: 80px;' id='where'></div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <div id="facets"></div>
      </div>
    </div>
  </div><!-- close col-md-6 -->



  <div class='col-md-6'>
    <div class="row">
      <div class="col-md-12">
        <span id="q-toggle" class="btn-sm" data-toggle="tooltip" data-placement="top" title="Toggle between query builder form and visualization" >Show Query Form</span>
      </div>
    </div>

    <div class="row"> 
      <div class="col-md-12" id="right">
          <div class='row'>
            <div class="col-md-12">
              <div id="tuples"></div>
            </div>
          </div>

        <div style="clear:both;"></div>
      </div>
    </div>
  </div>
</div>


{% include 'wherelabel.html' %}
{% include 'cstat.html' %}
{% include 'qform.html' %}
{% include 'scorpionresults.html' %}
{% include 'walkthrough.html' %}
{% include 'tuples.html' %}
{% include 'tasks.html' %}


	<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/tether.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/tether-theme-arrows.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/shepherd-theme-arrows.css"/>
	<!--
	<link rel="stylesheet" type="text/css" href="/static/css/guiders.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/tourist.css"/>
	-->
</html>
