{% 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">
{% 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">
	$(function() {
      $("#accordion").accordion({active: false});
	});
</script>
{% endblock %}

{% block content %}
{% navbar 'bands' %}
<h1>Bands</h1>
<p>This is too &quot;wall of text-y&quot;, so maybe break it up with band photos. And/or put a javascript slideshow of all the bands up here at the top.</p>
<dl>
{% for band in object_list %}
<dt><a href="{{ band.url }}">{{ band.name }}</a></dt>
<dd>{{ band.notes|linebreaksbr }}</dd>
{% endfor %}
</dl>

<p>And here is what it looks like as a jQuery accordion.</p>
<div id="accordion">
{% for band in object_list %}
<h3><a href="#">{{ band.name }}</a></h3>
<div>
   {{ band.notes|linebreaksbr }}
   <p style="margin-top:1em"><a class="btn default" href="{{ band.url }}">{{ band.name }} Website</a></p>
</div>
{% endfor %}
</div>

{% endblock %}