{% extends "base.html" %}
{% load cms_tags %}

{% block body_class %}homepage{% endblock %}

{% block content %}
<section id="home-slideshow" class="slideshow">
  <ul class="bxslider">
    {% placeholder "slideshow" %}
  </ul>
</section>
<aside>
  <nav id="headlines">
  {% placeholder "headlines" %}
  </nav>
  <form id="survey" action="#">
    <h2>Survey</h2>
    <p>Which answer is most often the correct answer?</p>
    <label for="a"><input id="a" name="answer" type="radio" /> Answer A</label>
    <label for="b"><input id="b" name="answer" type="radio" /> Answer B</label>
    <label for="c"><input id="c" name="answer" type="radio" /> Answer C</label>
    <label for="d"><input id="d" name="answer" type="radio" /> Answer D</label>
    <a class="floatr" href="#">See results</a>
  </form>
</aside>
<section id="featured">
  {% placeholder "featured" %}
</section>
{% endblock %}

{% block extra_js %}
{% if not request.session.cms_edit %}
<script>
$(document).ready(function(){
     $('.bxslider').bxSlider({
         auto: true,
         autoHover: true,
         pause: 6000,
         controls: false,
     });
});
</script>
{% endif %}
{% endblock %}