<div class="scrollable_content">

    <?php echo $this->getPartialHtml("cover"); ?>

    <div class="list l3">
        <ul>
            <li ng-repeat="item in collection" ng-class="{first: $index == 0, has_picture: item.picture }" ng-hide="item.is_hidden">
                <a class="block" ng-href="{{ item.url }}" ng-class="{ arrow_right: item.url }">
                    <div class="left picture" image-src="item.picture" ng-if="item.picture" sb-image></div>
                    <div class="details padding" ng-class="{has_picture: item.picture}">
                        <h3 class="title">{{ item.title }}</h3>
                        <div class="subtitle" ng-bind-html="item.subtitle"></div>
                        <div class="clear"></div>
                    </div>
                </a>
            </li>
            <li class="empty" ng-if="collection_is_empty">
                <p class="a-center"><?php echo $this->_("Nothing to display"); ?></p>
            </li>
        </ul>
    </div>
</div>