{% extends "!layout.html" %}

{% set bootswatch_css_custom = ['_static/docs.css'] %}

{%- block content %}
  {{ navBar() }}
  {% if pagename == '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="_static/img/dash.png">
          <div class="carousel-caption">
            <div>
              <h1>Caravel</h1>
              <p>
                an open source data visualization platform
              </p>
            </div>
          </div>
        </div>
        <div class="item">
          <img src="_static/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="_static/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="_static/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="_static/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="jumbotron">
        <h1>Caravel</h1>
        <p>
        is an open source data visualization platform that provides easy
        exploration of your data and allows you to create and share
        beautiful charts and dashboards
        </p>
      </div>
    </div>
  {% endif %}
  <div class="container mainbody">
  {% block body %}{% endblock %}
  </div>
{%- endblock %}