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

<div class="container">

  <div class="row">
    <div class="col-md-6">
      <img class="pull-left" style="margin: 20px; margin-bottom: 10px;" src="{{url_for('static', filename='symbol.png')}}">
      {{presentation|markdown}}
    </div>
    <div class="col-md-6 hidden-xs hidden-sm">
      <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner thumbnail" role="listbox" style="width:100%; height:430px !important;">
          <div class="item active" data-slide-number="0">
            <a id="link-0" href="{{ url_for('category', category=img1['category']) }}"><img id="image-0" src="{{ url_for('slides', **img1) }}">
          </div>
          <div class="item" data-slide-number="1">
            <a id="link-1" href="{{ url_for('category', category=img2['category']) }}"><img id="image-1" src="{{ url_for('slides', **img2) }}">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    {% for cat in categories %}
    <div class="col-xs-6 col-md-3">
      <div class="thumbnail">
        <div class="caption" style="padding: 0;">
          <div class="text-center"><a href="{{ url_for('category', category=cat) }}"><h3>{{cat}}</h3></a></div>
        </div>
        <a href="{{ url_for('category', category=cat) }}"><img src="{{ url_for('thumbnails', category=cat) }}" class="img-responsive"></a>
      </div>
    </div>
    {% endfor %}
  </div>


</div>



{% endblock %}

{% block scripts %}
{{super()}}

<script>
$('#myCarousel').on('slid.bs.carousel', function (e) {
  var id = $('.item.active').data('slide-number');
  id = 1-parseInt(id);
  $.get("/randimg", function(data) {
    $('[id=link-'+id+']').attr('href', '/'+data.category+'/');
    $('[id=image-'+id+']').attr('src', '/slides/'+data.category+'/'+data.num);
  });
  });

</script>

{% endblock %}
