<!-- Posted PROJECTS -->
    <div id="project_tag" class="row">
        <div class="container">
            <div class="d-flex justify-content-between mb-30">
                <button class="btn btn-dark btn-outline" onclick="location.href ='{{guideAllocation}}';"> <icon class="fa fa-envelope"></icon> Project Invitations </button>
                <div class="d-flex">
                    <div class="mr-10 text-center" style="padding: 5px 15px;border-right: 1px solid;">
                        <div>Total Recieved</div>
                        <div class="bold"> {{total_invites}} </div>
                    </div>
                    <div class="mr-10 text-center" style="padding: 5px 15px;border-right: 1px solid;">
                        <div >Pending</div>
                        <div class="bold"> {{total_pending}} </div>
                    </div>
                    <div class="mr-10 text-center" style="padding: 5px 15px;border-right: 1px solid;">
                        <div >Accepted</div>
                        <div class="bold"> {{total_accepted}} </div>
                    </div>
                    <div class="mr-10 text-center" style="padding: 5px 15px;">
                        <div >Rejected</div>
                        <div class="bold"> {{total_rejected}} </div>
                    </div>
                </div> 
            </div>
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link " data-toggle="tab" href="#paid">ALL</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#free">ON-GOING</a>
                </li>
                <!-- <li class="nav-item ml-auto">
                        <div class="input-append span12">
                            <input type="text" class="search-query" placeholder="Search"> 
                            </div>
                </li> -->
            </ul>
            
        <!-- Tab panes -->
            <div class="tab-content">
                <div id="paid" class="container tab-pane ">
                    <div class="row">
                        <div class="col-sm-12"> 
                            
                                <table id="myprojects" class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>PROJECT</th>
                                            <th>TYPE</th>
                                            <th>OWNER</th>
                                            <th>TEAM</th>
                                            <th>STATUS</th>
                                            <!-- <th>SYNOPSIS</th> -->
                                            <th>FEEDBACK</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                            {{#repo2}}
                                        <tr>
                                            <td>{{{sn}}}</td>
                                            <td>{{{pname}}}</td>
                                            <td>{{{ptype}}}</td>
                                            <td>{{{owner}}}</td>
                                            <td>{{{teamid}}}</td>
                                            <td>{{{pstatus}}}</td>
                                            <!-- <td>{{{synopsis}}}</td> -->
                                            <td>{{{feedback}}}</td>
                                        </tr>
                                        {{/repo2}}

                                    </tbody>
                                </table> 
                            {{^repo2}}
                                <div class="no-msg col-sm-12" style="text-align: center;">NO DATA AVAILABLE </div>
                            {{/repo2}}
                        </div> 
                            </div><!--/row-->
                    </div>

            <div id="free" class="container tab-pane active">
                <div class="row">
                        <div class="col-sm-12"> 
                                    <table id="myongoing" class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>PROJECT</th>
                                                <th>TYPE</th>
                                                <th>OWNER</th>
                                                <th>TEAM</th>
                                                <th>DEADLINE</th>
                                                <!-- <th>SYNOPSIS</th> -->
                                                <th>PROGRESS</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {{#repo}}
                                                <tr>
                                                    <td>{{{sn}}}</td>
                                                    <td>{{{pname}}}</td>
                                                    <td>{{{ptype}}}</td>
                                                    <td>{{{owner}}}</td>
                                                    <td>{{{teamid}}}</td>
                                                    <td>{{{deadline}}}</td>
                                                    <!-- <td>{{{synopsis}}}</td> -->
                                                    <td>{{{viewprogress}}}</td>
                                                </tr>
                                            {{/repo}}
                                        </tbody>
                                    </table> 
                                    {{^repo}}
                                        <div class="no-msg col-sm-12" style="text-align: center;">NO DATA AVAILABLE </div>
                                    {{/repo}}
                            </div> 
            </div><!--/row-->
            </div>
            </div>

        </div><!--/container -->
    </div>  
        


    <div class="modal fade" id="exampleModal" tabindex="-1"  role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog"  role="document">
                <div class="modal-content" id="project_big_view">

            </div>
        </div>
    </div>

    <div class="modal fade" id="projectreview" tabindex="-1"  role="dialog" aria-labelledby="projecctreview" aria-hidden="true">
        <div class="modal-dialog"  role="document">
            <div class="modal-content" id="projectreview">
                      
                <div class="container">
                    <div class="card shadow-lg my-4 p-4">
                        <div class="row">

                            <div class="col-md-3">
                                <div class="card-body">
                                    <h2 class="card-title font-weight-light mb-3">Reviews</h2>
                                    <span class="mt-4 display-4">0</span>
                                    <div class="clearfix"></div>
                                    <button type="button" class="btn btn-warning mt-3 gradient-btn" data-toggle="collapse" data-target="#reviews">Read reviews</button>
                                </div>
                            </div>

                            <!-- <div class="col col-md-auto p-0 mx-3 mx-lg-0 border-bottom border-right border-grey"></div> -->
                                       
                            <div class="col-md-3">
                                <ul class="list-unstyled pr-3 text-center">
                                    <li class="p-3">
                                        <div class="d-flex p-2">
                                            <span class="text-muted display-4 mr-3"><i class="fa fa-smile-o" style=" color:#28a745; " ></i></span>
                                            <div class="ml-2">
                                                <h3 class="card-title font-weight-light">Positive</h3>
                                                        <p>4 & 5 <i class="fa fa-star text-warning"></i></p>
                                                <h6 class="font-weight-light">0 Reviews</h6>
                                            </div>
                                        </div>
                                        <div class="progress" style="height: 5px;">
                                                <div class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
                                                
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-3">
                                <ul class="list-unstyled pr-3 text-center">
                                    <li class="p-3">
                                        <div class="d-flex p-2">
                                            <span class="text-muted display-4 mr-3"><i class="fa fa-meh-o" style=" color:#62a8ea; " ></i></span>
                                            <div class="ml-2">
                                                <h3 class="card-title " style=" font-weight:600; color:#62a8ea; margin-top: 11px;" >Neutral</h3>
                                                <p>3 <i class="fa fa-star text-warning"></i></p>
                                                <h6 class="font-weight-light">0 Reviews</h6>
                                            </div>
                                        </div>
                                        <div class="progress" style="height: 5px;">
                                                <div class="progress-bar bg-primary" role="progressbar" style="width: 0%;" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="col-md-3">
                                <ul class="list-unstyled pr-3 text-center">
                                    <li class="p-3">
                                        <div class="d-flex p-2">
                                            <span class="text-muted display-4 mr-3"><i class="fa fa-frown-o" style=" color:#dc3545; " ></i></span>
                                            <div class="ml-2">
                                                <h3 class="card-title" style=" font-weight:600; color:#dc3545; margin-top: 11px;" >Negative</h3>
                                                <p>1 & 2 <i class="fa fa-star text-warning"></i></p>
                                                <h6 class="font-weight-light">0 Reviews</h6>
                                            </div>
                                        </div>
                                        <div class="progress" style="height: 5px;">
                                                <div class="progress-bar bg-danger" role="progressbar" style="width: 0%;" aria-valuenow="" aria-valuemin="0" aria-valuemax="100"></div>
                                        </div>
                                    </li>
                                </ul>
                            </div>                                 
                        </div> <!-- end of row -->
                   
                        <!-- <div class="col-md-12"><hr/>
                            <div class="p-3 collapse" id="reviews">
                                <div class="row">
                                    <div class="col-md-2 text-center">
                                        <img src="http://dummyimage.com/60x60/666/ffffff&text=No+Image" class="img-rounded rounded-circle mb-3">
                                        <div class="review-block-name"><a href="#">student1</a></div>
                                    </div> 
                                    <div class="col-md-10">
                                        <div class="review-block-rate">
                                                <span class="mr-2"><b>5.0</b></span>
                                                <i class="fa fa-star text-warning"></i>
                                                <i class="fa fa-star text-warning"></i>
                                                <i class="fa fa-star text-warning"></i>
                                                <i class="fa fa-star text-warning"></i>
                                                <i class="fa fa-star text-warning"></i>                                                       
                                        </div>
                                        <div class="review-block-title"><b>This was nice in buy</b></div>
                                        <div class="review-block-description">The example form below demonstrates common HTML form elements that receive updated styles from Bootstrap with additional classes.</div>
                                    </div>
                                </div><hr/>
                            </div>
                        </div> -->
                        <div class="col-md-12"><hr/>
                            <div class="p-3 collapse" id="reviews">
                                <div class="row">
                                   
                                    <div class="col-md-8">
                                       No Reviews Yet !!
                                    </div>
                                </div>
                            </div>
                        </div> 
                    </div>
                </div>
            </div> 
        </div>
    </div>



    

<!-- 
    <div id="Testing">
            {{pname}}
        </div>
         -->