{% extends "appbuilder/base.html" %}

{% block uncontained %}
<div class="index">
<div id="carousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
    <li data-target="#carousel" data-slide-to="3"></li>
    <li data-target="#carousel" data-slide-to="4"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active text-center">
      <img src="{{ url_for("static", filename="img/dash.png") }}">
      <div class="carousel-caption">
        <div>
          <h1>Panoramix</h1>
          <p>
            an open source data visualization platform
          </p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="{{ url_for("static", filename="img/bubble.png") }}">
      <div class="carousel-caption">
        <h2>Explore your data
        </h2>
        <p>
          Intuitively navigate your data while slicing, dicing, and
          visualizing through a rich set of widgets
        </p>
      </div>
    </div>
    <div class="item">
      <img src="{{ url_for("static", filename="img/dash.png") }}">
      <div class="carousel-caption">
        <h2>Create and share dashboards</h2>
        <p>Assemble many data visualization "slices" into a rich collection</p>
      </div>
    </div>
    <div class="item">
      <img src="{{ url_for("static", filename="img/cloud.png") }}">
      <div class="carousel-caption">
        <h2>Extend</h2>
        <p>Join the community and take part in extending the widget library</p>
      </div>
    </div>
    <div class="item">
      <img src="{{ url_for("static", filename="img/servers.jpg") }}">
      <div class="carousel-caption">
        <h2>Connect</h2>
        <p>
          Access data from MySql, Presto.db, Postgres, RedShift, Oracle, MsSql,
          SQLite, and more through the SqlAlchemy integration. You can also
          query realtime data blazingly fast out of Druid.io
        </p>
      </div>
    </div>
  </div>
  <!-- Controls -->
  <div>
    <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>
<hr/>
<div class="container">
  <div class="row text-center">
    <div class="col-lg-4">
      <img class="img-circle" src="{{ url_for('static', filename='img/cardash.jpg') }}" width="140" height="140">
      <h2>Dashboards</h2>
      <p>Browse the dashboards list</p>
      <p><a class="btn btn-default" href="/dashboardmodelview/list/" role="button">
        <i class="fa fa-dashboard"></i>
      </a></p>
    </div><!-- /.col-lg-4 -->
    <div class="col-lg-4">
      <img class="img-circle" src="{{ url_for('static', filename='img/slice.jpg') }}" width="140" height="140">
      <h2>Slices</h2>
      <p>"Slices" are individual views into a single dataset</p>
      <p><a class="btn btn-default" href="/slicemodelview/list/" role="button">
        <i class="fa fa-line-chart"></i>
      </a></p>
    </div><!-- /.col-lg-4 -->
    <div class="col-lg-4">
      <img class="img-circle" src="{{ url_for('static', filename='img/gallery.jpg') }}" alt="Generic placeholder image" width="140" height="140">
      <h2>Gallery</h2>
      <p>Navigate through the growing set of visualizations</p>
      <p><a class="btn btn-default" href="#" onclick="alert('Not ready yet!');" role="button">
        <i class="fa fa-picture-o"></i>
      </a></p>
    </div><!-- /.col-lg-4 -->
  </div>
</div>
</div>
{% endblock %}

{% block tail_js %}
{{ super() }}
<script>
$(document).ready(function() {
  $('#carousel').carousel();
});
</script>
{% endblock %}