{% extends "base.html" %}
{% block content %}

<div class="container">

  <div class="row"> <!-- Content row -->
    <div class="col-md-6 hidden-xs hidden-sm"> <!-- Slideshow -->
      <div class="panel panel-default">
        <div class="panel-body">

          <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner" role="listbox">
              {% for p in page.all_photos %}
              <div class="item {% if loop.index==1 %}active{% endif %}" data-slide-number="{{ loop.index-1 }}">
                {% if page.endpoint %}
                <a href="{{ p.url }}" title="{{ p.alt }}">
                {% else %}
                <a href="{{ p.page }}" title="{{ p.alt }}">
                  {% endif %}
                  <img src=" {{ p.slide }}" class="img-responsive" alt="{{ p.alt }}">
                </a>
              </div>
              {% endfor %}
            </div>
          </div>
        </div>

        {% if page.endpoint %}
        <div class="panel-footer" id="slider-thumbs">
          <ul class="list-inline">
            {% for p in page.all_photos %}
            <li>
              <a id="carousel-selector-{{ loop.index-1 }}" class="thumbnail {% if loop.index==1 %}selected{% endif %}" style="width: 100px; height=100px;">
                <img src="{{ p.thumbnail }}" width=100 height=100 alt="{{ p.alt }}">
              </a>
            </li>
            {% endfor %}
          </ul>
        </div>
        {% endif %}
      </div>
    </div> <!-- Slideshow -->

    <div class="col-md-6 col-sm-12"> <!-- Content -->
      <div class="panel panel-default">
        <div class="panel-body">
          <div class="panel-title"> <h2>{{ page.title }}</h2> </div>
          {{ page.description | markdown }}
        </div>
        <div class="panel-footer">
          {% if page.endpoint %}
          <a href="mailto:order@designbyloven.se" class="btn btn-default"><span class="glyphicon glyphicon-envelope"></span>&nbsp;Beställ</a>
          {% endif %}
        </div>
      </div>
    </div> <!-- Content -->
  </div> <!-- Content row -->

  {% if page.endpoint %}
  <div class="row"> <!-- Slideshow for small screens -->
    <div class="col-md-6 visible-xs visible-sm">
      <div class="well">
        <ul class="list-inline">
          {% for p in page.photos %}
          <li>
            <a class="thumbnail" style="width:100px; height=100px;" href="{{ p.url }}">
              <img src="{{ p.thumbnail }}" width=100 height=100 alt="{{ p.alt }}">
            </a>
          </li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </div> <!-- Slideshow for small screens -->
  {% else %}
  <div class="row"> <!-- Subsection list !-->
  {% for c in page.children %}
    <div class="col-xs-6 col-md-3">
      <div class="thumbnail">
        <div class="caption" style="padding: 0;">
          <div class="text-center"><a href="{{ c.permalink }}"><h3>{{ c.title }}</h3></a></div>
        </div>
        <a href="{{ c.permalink }}"><img src="{{ c.thumbnail.thumbnail }}" class="img-responsive"></a>
      </div>
    </div>
  {% endfor %}
  </div> <!-- Subsection list -->
  {% endif %}


</div>



{% endblock %}

{% block scripts %}
{{super()}}
<script>
$('#myCarousel').carousel({
  interval: 5000
});

$('[id^=carousel-selector-]').click(function() {
  var id_selector = $(this).attr("id");
  var id = id_selector.substr(id_selector.length -1);
  id = parseInt(id);
  $('#myCarousel').carousel(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $(this).addClass('selected');
});

$('#myCarousel').on('slid.bs.carousel', function (e) {
  var id = $('.item.active').data('slide-number');
  id = parseInt(id);
  $('[id^=carousel-selector-]').removeClass('selected');
  $('[id=carousel-selector-'+id+']').addClass('selected');
});
</script>
{% endblock %}