<template id="data-explorer" >
<style data-src="/src/external/font-awesome/css/font-awesome.css"></style>
<style data-src="/templates/livelystyle.css"></style>
<style>
  :host {
    height: auto;
    width: auto;
  }
  
  #content {
    padding: 14px;
  }
  [class*="col-"] {
    float: left;
    padding: 8xp 10px;
  }
  .row::after {
    content: "";
    clear: both;
    display: table;
  }
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  
  .parameterName {
    margin-right: 24px;
    display: inline-block;
    width: 140px;
  }
 
  .refinement {
    margin-bottom: 14px;
  }
  
</style>
<div id="content">
	<content>
      <div class="row">
        <div class="col-12">
          <h3>
            Exploration
          </h3>
        </div>
      </div>
      <div class="row refinement">
        <div class="col-3">
          Start Index: <input type="number" min="0" id="refinementStart"/>
        </div>
        <div class="col-3">
          End Index: <input type="number" min="1" id="refinementEnd"/>
        </div>
      </div>
      <div class="row">
          <span>Visualization:</span>
          <select id="visTypeSelection">
          </select>
        </div>
      <div class="row">
        <div class="col-12">
          <h4>
            Parameter:
          </h4>
        </div>
      </div>
      <div class="row" id="parameterSection">
      </div>
      <hr />
      <div class="row ">
        <div class="vis" id="visualization" style="height: 500px; width: 100%;">

        </div>
      </div>
  </content>
</div>
</template>


