{% extends "layout.html" %}
{% block title %}{{ this.name }}{% endblock %}
{% block outerbody %}
  <div class="container showcase-site">
    <div class="row">
      <div class="back-link">
        <a href="{{ this.parent|url }}">Back to Showcase</a>
      </div>
      <h1>{{ this.name }}</h1>
      <p class="site-link"><a href="{{ this.url }}">{{ this.url.host }}</a>
    </div>
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        {{ this.description }}
      </div>
    </div>
  </div>
  <div class="slideshow-wrapper">
    <div class="slideshow">
      <div class="slideshow-inner">
        <div class="carousel slide" data-ride="carousel" data-interval="8500" id="site-slides">
          <ol class="carousel-indicators">
          {% for slide in this.attachments.images %}
            <li data-target="#site-slides" data-slide-to="{{ loop.index0 }}"{%
              if loop.first %} class="active"{% endif %}></li>
          {% endfor %}
          </ol>
          <div class="carousel-inner" role="listbox">
            {% for image in this.attachments.images %}
            <div class="item slide{% if loop.first %} active{% endif %}">
              <div class="container">
                <img class="large" src="{{ image|url }}">
              </div>
            </div>
            {% endfor %}
          </div>
          <a class="left carousel-control" href="#site-slides" 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="#site-slides" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </div>
{% endblock %}