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

@main("Followers") {
    <div class="row">
        <div class="col-md-12">
            <h1>@name's Followers</h1>
        </div>
    </div>
    <div class="row">

        @for(row <- followers) {
            @users.tile(row, "col-lg-2 col-md-2 col-sm-3 col-xs-4", false)
        }
        @if(followers.size < 1) {
            <div class="text-center col-lg-12 col-md-12 col-sm-12 col-xs-12">
               <h2>This area will show users that follow you. Ask other users to follow you <a class="btn-link" href="@routes.Profile.viewProfileUUID(profileId)">here</a></h2>
            </div>
        }
    </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">
        $(document).ready(function() {
                $('#nextlink').attr('href', "@(routes.Users.getFollowers( next, limit))");
	            $('#prevlink').attr('href', "@(routes.Users.getFollowers(prev, limit))");

        });
    </script>
}