#parse("generate-index/velocity/header.vm")
    <div class="row">
        <div class="span-one-third">
            <ul class="api">
#foreach( $entry in $classes.entrySet() )
                <li class="api">
                    <input class="api $examplesClasses.get($entry.key)" type="button"
                           api="$classes.get($entry.key)" value="$entry.key"
                           onclick="javascript:filterExamples(this)">
               </li>
#end
            </ul>
        </div>

        <div class="span-one-third">
            <ul id="examples">
#foreach( $example in $examples.entrySet() )
                <li example="$example.value" class="example $aggregatedClasses.get($example.value)">
                    <a href="$example.value">$example.key</a>
                    <a class="downloadzip" href="$zipLinks.get($example.value)">zip</a>
                </li>
#end
            </ul>
        </div>

        <div class="span-one-third">
            <h3><span>API:</span></h3>
            <input id="searchbox" type="text"/>
            <div id="api-info"></div>
        </div>
    </div>
#parse("generate-index/velocity/footer.vm")