{% extends 'base.html' %}
{% load core_tags %}
{% block title %}Bands{% endblock %}

{% block custom_css %}
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/bx_styles.css">
{% endblock %}
{% block custom_js %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bxslider/jquery.bxSlider.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $('#slider1').bxSlider({
         mode: 'fade',
         speed: 500,
         auto: true,
         autoControls: true,
         autoHover: true,
         randomStart: true,
         pager: true,
         pagerType: 'full',
         nextImage: '{{ STATIC_URL }}images/icon_arrow_right.png',
         prevImage: '{{ STATIC_URL }}images/icon_arrow_left.png',
         wrapperClass: 'bands-slider-wrap'
      })
   })
</script>
<style>
   .hero-unit h1 { font-size: 50px; }
</style>
{% endblock %}

{% block content %}
{% navbar 'bands' %}

<div class="hero-unit">
   <div id="slider1">
      {% for band in object_list %}
         <div>
            <div class="row">
               <div class="span4">
                  <img src="http://placehold.it/200x200&text={{ band.name|escapejs }}">
               </div>
               <div class="span10">
                  <h1>{{ band.name }}</h1>
                  <br/>
                  <span>{{ band.notes }}</span>
                  <p style="margin-top:1em"><a class="btn default" href="">Band Site</a></p>
               </div>
            </div>
         </div>
      {% endfor %}
   </div>
</div>

{% endblock %}