@(followedUsers: List[(UUID, String, String, String)], name: String, prev: Int, next: Int, limit: Int)(implicit user: Option[models.User])

@main("Following Users") {
    <div class="row">
        <div class="col-md-12">
            <h1>Users @name is Following</h1>
        </div>
    </div>
    <div class="row">
    @for(userInfo <- followedUsers) {
       @users.tile(userInfo, "col-lg-2 col-md-2 col-sm-3 col-xs-4", true)
    }

    </div>
    <div class="row">
        <div class="col-md-12">
            <ul class="pager">
                    <!-- The following items have to be links due to the way the list items render them. Ideally, they should be buttons. -->
                @if(prev >= 0) {
                    <li class="previous"><a id="prevlink" title="Page backwards" href="#"><span class="glyphicon glyphicon-chevron-left"></span> Previous</a></li>
                }
                @if(next >= 0) {
                    <li class ="next"><a id="nextlink" title="Page forwards" href="#">Next <span class="glyphicon glyphicon-chevron-right"></span></a></li>
                }
            </ul>
        </div>
    </div>
    <script type="text/javascript" language="javascript">
        var removeIndicator = true;
        $(document).ready(function() {
           $('#nextlink').attr('href', "@(routes.Users.getFollowing( next, limit))");
	       $('#prevlink').attr('href', "@(routes.Users.getFollowing(prev, limit))");
        });
    </script>
    <script src="@routes.Assets.at("javascripts/follow-button.js")" type="text/javascript"></script>
}