<div class="container-fluid">

        <!-- Nav -->
        <nav class="navbar navbar-default top-margin20">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#"> Crucible dashboard </a>
                </div>
            </div>
        </nav>

        <p>See the ongoing reviews</p>

        <!-- Review infos -->
        <div class="top-margin20">
            <c:forEach begin="0" end="${ongoingReviewsSize}" var="counter" step="3">

                <!-- LEFT COLUMN -->
                <div class="column-left col-md-4">
                    <div class="panel panel-default">
                        <div class="panel-heading" data-toggle="tooltip" data-placement="bottom" title="${ongoingReviews.reviewData[counter].description}">
                            <span class="label label-success">MPE-JAVA</span><span class="left-margin20">${ongoingReviews.reviewData[counter].name}</span>
                        </div>
                        <div class="panel-body">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th class="col-md-4">Author</th>
                                        <th class="col-md-4">Moderator</th>
                                        <th class="col-md-4">On review since</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="col-md-4">${ongoingReviews.reviewData[counter].author.displayName}</td>
                                        <td class="col-md-4">${ongoingReviews.reviewData[counter].moderator.displayName}</td>
                                        <td class="col-md-4">${ongoingReviews.reviewData[counter].createDate}</td>
                                    </tr>
                                    <tr>
                                        <td class="centered-text" colspan="3">${ongoingReviews.reviewData[counter].description}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- MIDDLE COLUMN -->
                <div class="column-middle col-md-4">
                    <div class="panel panel-default">
                        <div class="panel-heading" data-toggle="tooltip" data-placement="bottom" title="${ongoingReviews.reviewData[counter+1].description}">
                            <span class="label label-success">MPE-JAVA</span><span class="left-margin20">${ongoingReviews.reviewData[counter+1].name}</span>
                        </div>
                        <div class="panel-body">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th class="col-md-4">Author</th>
                                        <th class="col-md-4">Moderator</th>
                                        <th class="col-md-4">On review since</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="col-md-4">${ongoingReviews.reviewData[counter+1].author.displayName}</td>
                                        <td class="col-md-4">${ongoingReviews.reviewData[counter+1].moderator.displayName}</td>
                                        <td class="col-md-4">${ongoingReviews.reviewData[counter+1].createDate}</td>
                                    </tr>
                                    <tr>
                                        <td class="centered-text" colspan="3">${ongoingReviews.reviewData[counter+1].description}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- RIGHT COLUMN -->
                <div class="column-right col-md-4">
                    <div class="panel panel-default">
                        <div class="panel-heading" data-toggle="tooltip" data-placement="bottom" title="${ongoingReviews.reviewData[counter+2].description}">
                            <span class="label label-success">MPE-JAVA</span><span class="left-margin20">${ongoingReviews.reviewData[counter+2].name}</span>
                        </div>
                        <div class="panel-body">
                            <table class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th class="col-md-4">Author</th>
                                        <th class="col-md-4">Moderator</th>
                                        <th class="col-md-4">On review since</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td class="col-md-4">${ongoingReviews.reviewData[counter+2].author.displayName}</td>
                                        <td class="col-md-4">${ongoingReviews.reviewData[counter+2].moderator.displayName}</td>
                                        <td class="col-md-4">${ongoingReviews.reviewData[counter+2].createDate}</td>
                                    </tr>
                                    <tr>
                                        <td class="centered-text" colspan="3">${ongoingReviews.reviewData[counter+2].description}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </c:forEach>

        </div>
    </div>