@(files: List[models.File])(implicit user: Option[models.User])
<h2 style="text-align: center">Latest Contributions</h2>
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
        <ol class="carousel-indicators">
            @for((f,i) <- files.zipWithIndex) {
                @if(i==0) {
                    <li data-target="#carousel-example-generic" data-slide-to="@i" class="active"></li>
                } else {
                    <li data-target="#carousel-example-generic" data-slide-to="@i"></li>
                }
            }
        </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
  	@for((f,i) <- files.zipWithIndex) {
        @if(i==0) {
            <div class="item active">
        } else {
            <div class="item">
        }

        <a href="@(routes.Files.file(f.id))">
            @if(user.isDefined) {
                <img src="@routes.Files.download(f.id)" alt="@(f.filename)" class="center-block" style="max-height:300px;">
            } else {
                <img src="http://placehold.it/900x500" alt="placeholder image" class="center-block">
            }

        </a>
        <div class="carousel-caption">
            @f.filename
        </div>
        </div>
    }
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
  </a>
</div>

<script type="text/javascript">
$(document).ready(function () {
    $('.carousel').carousel({
        interval: 10000
    });
    $('.carousel').carousel('cycle');
});
</script>