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

{% block head_css %}
{{super()}}
<style>
  .carousel img {
    max-height: 500px;
  }
  .carousel {
    overflow: hidden;
  }
  div.carousel-caption{
    background: rgba(0,0,0,0.5);
    border-radius: 20px;
    top: 150px;
    bottom: auto !important;
  }
  .carousel-inner > .item > img {
    margin: 0 auto;
  }
  div.navbar {
    margin: 0px;
  }
  .carousel-indicators li {
    background-color: #AAA;
    border: 1px solid black;
  }

  .carousel-indicators .active {
    background-color: #000;
    border: 5px solid black;
  }
</style>
{% endblock %}

{% block uncontained %}
<div id="carousel" style="height: 500px;" 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="dash.png") }}">
      <div class="carousel-caption">
        <div>
          <h1 style="font-size: 80px;">Panoramix</h1>
          <p style="font-size: 25px;">
            an open source data visualization platform
          </p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="{{ url_for("static", filename="bubble.png") }}">
      <div class="carousel-caption">
        <h1>Explore your data
        </h1>
        <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="dash.png") }}">
      <div class="carousel-caption">
        <h1>Create and share dashboards</h1>
        <p>Assemble many data visualization "slices" into a rich collection</p>
      </div>
    </div>
    <div class="item">
      <img src="{{ url_for("static", filename="cloud.png") }}">
      <div class="carousel-caption">
        <h1>Extend</h1>
        <p>Join the community and take part in extending the widget library</p>
      </div>
    </div>
    <div class="item">
      <img style="max-height: none;" src="{{ url_for("static", filename="servers.jpg") }}">
      <div class="carousel-caption">
        <h1>Connect</h1>
        <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='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='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='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>
{% endblock %}

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