
{% extends "base.html" %}
{% block styles %}
{{super()}}

<style>
.selected img {
  opacity: 0.5;
}
</style>

{% endblock %}
{% block content %}

<div class="container">

  <div class="row">
    <div class="col-md-6 hidden-xs hidden-sm">
      <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 i in range(images) %}
          <div class="item {% if i==0 %}active{% endif %}" data-slide-number="{{i}}">
            <a href="{{url_for('cat_photo', category=category, num=i) }}">
            <img src=" {{ url_for('slides', category=category, num=i) }}" class="img-responsive">
            </a>
          </div>
          {% endfor %}
        </div>
      </div>
      </div>

      <div class="panel-footer" id="slider-thumbs">
        <ul class="list-inline">
          {% for i in range(images) %}
          <li>
            <a id="carousel-selector-{{i}}" class="thumbnail {% if i==0 %}selected{% endif %}" style="width: 100px; height=100px;">
              <img src="{{ url_for('thumbnails', category=category, num=i) }}" width=100 height=100>
            </a>
          </li>
          {% endfor %}
        </ul>
      </div>
      </div>


    </div>

    <div class="col-md-6">
      <div class="panel panel-default">
        <!-- <div class="panel-heading"> -->
        <!--   <div class="panel-title"> <h2>{{ category }}</h2> </div> -->
        <!-- </div> -->
        <div class="panel-body">
          {{ presentation | markdown }}
        </div>
        <div class="panel-footer">
          <a href="mailto:order@designbyloven.se" class="btn btn-default"><span class="glyphicon glyphicon-envelope"></span>&nbsp;Beställ</a>
        </div>
      </div>
    </div>
    <div class="col-md-6 visible-xs visible-sm">
      <div class="well">
        <ul class="list-inline">
        {% for i in range(images) %}
        <li>
          <a class="thumbnail" style="width:100px; height=100px;" href="{{ url_for('cat_photo', category=category, num=i) }}">
            <img src="{{ url_for('thumbnails', category=category, num=i) }}" width=100 height=100>
          </a>
        </li>
        {% endfor %}
        </ul>
      </div>
    </div>
  </div>

</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 %}
