<?xml version="1.0" encoding="utf-8"?>

<div
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:py="http://www.whads.com/ns/cocktail/templates">

    <?py-class
    autoplay = True
    interval = 3000
    transition_duration = 500
    slides_selector = ".slides > *"
    navigation_controls = False
    ?>

    <?py    
    self.add_resource("/cocktail/scripts/SlideShow.js")
    ?>

    <py:ready>
        <?py
        self.set_client_param("autoplay", self.autoplay)
        self.set_client_param("interval", self.interval)
        self.set_client_param("transitionDuration", self.transition_duration)
        self.set_client_param("slidesSelector", self.slides_selector)
        self.set_client_param("navigationControls", self.navigation_controls)
        ?>
    </py:ready>

    <div py:id="slides"></div>

    <py:new 
        py:element="self.create_navigation_button()" 
        py:id="previous_slide_button"
        py:visible="@{self.navigation_controls}"
        py:client_model="cocktail.html.SlideShow.previousSlideButton">&lt;</py:new>

    <py:new 
        py:element="self.create_navigation_button()" 
        py:id="next_slide_button"
        py:visible="@{self.navigation_controls}"
        py:client_model="cocktail.html.SlideShow.nextSlideButton">&gt;</py:new>

    <button 
        py:def="navigation_button"
        type="button"/>

</div>

