{% extends "index_tuplesright.html" %}
<html>

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

</head>
<h1>Scorpion Tutorial </h1>

<div id="tasks" class="row">
	<div class="col-md-12">
	</div>
</div>

<div class="row">
	<div class="col-md-12">


		<div class="row">
			<div class="col-md-6">
				<div class="row">
					<div class="col-md-3 col-md-offset-2">
						<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 id="" class="col-md-6" style="position: relative">
				<h1>&nbsp;</h1>
				<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> <!-- close col-md-6 -->
		</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/docs.min.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"/>
</html>
