<div class="row team-project">
    <div class="projects-top-bar">
        <h1>VIP PROJECTS</h1>
        <div class="col-md-4" style="padding-left: 1px; padding-right: 1px;">
            <button ui-sref="studentconfirminfo" class="btn btn-primary btn-feature">
                <strong>APPLY FOR A PROJECT </strong>
                <small>
                    <i>for Students</i>
                </small>
            </button>
        </div>
        <div class="col-md-4" style="padding-left: 1px; padding-right: 1px;">
            <button ui-sref="projectProposal" class="btn btn-primary btn-feature">
                <strong>PROPOSE A PROJECT </strong>
                <small>
                    <i>for Faculty/Staff</i>
                </small>
            </button>
        </div>
        <div class="col-md-4" style="padding-left: 1px; padding-right: 1px;">
            <button class="btn btn-primary btn-feature" ng-click="vm.printFriendlyViewfunc()">
                <strong>{{vm.printFriendlyViewButtonText1}}</strong>
            </button>
        </div>
        <br>
        <br>
    </div>

    <!-- Project cards here -->
    <div style="margin: 0 auto; color: black; text-align: center; font-size: 2em ;font-family: calibri, sans-serif;">
    </div>
    <br>
    <div class="col-md-4 panel panel-default" ng-if="!vm.printFriendlyView"
        style="max-height: 90px; width: 100%; border:none; box-shadow:none;">
        <!--Updated User Story #1195 Ndand002-->
        <table class="table filters-table" style="max-width:75%; border: none;">
            <tr>
                <td>
                    <label type="hidden" ng-model="userproject">Sort order: {{vm.selectedFilter}}
                        <select class="form-control" ng-model="vm.selectedFilter" ng-change="applyFilter()">
                            <!--ng-options="projects as projects.name for projects in vm.filters"
                            -->
                            <option selected="selected" value="A-Z">A-Z</option>
                            <option value="Z-A">Z-A</option>
                        </select>
                    </label>

                </td>
                <td>
                    <label>Filter: {{vm.searchText}}
                        <input class="form-control" ng-model="vm.searchText" ng-change="testingChange()"
                            placeholder="Search Projects" />
                    </label>
                </td>
            </tr>
        </table>
        </tr>
    </div>


    <br>
    <br>
    <center ng-hide="vm.done">
        <img ng-hide="vm.done" width="30%" height="30%" src="img/loading.gif" />
    </center>

    <div align='center' ng-if="vm.done && vm.printFriendlyView" style="width:100%;margin-left: 0px;">
        <h2 style="margin-top: 0px; margin-bottom: 20px;"><strong>Projects/Teams final lineup</strong></h2>
    </div>

    <div class="panel panel-default" ng-if="vm.done && vm.printFriendlyView && project.members_detailed > ''"
        style="width:100%;margin-left: 0px;background-color:rgb(250, 250, 250);"
        ng-repeat="project in testArr | filter: searchText">

        <div style="margin: 5px">
            <ul class="unstyled list-inline" style="margin-bottom: 0px; margin-left: 0px;">
                <li class="list-inline-item" style="padding-left: 0px;">
                    <h4> <a ng-href="/#/vip-projects-detailed/{{project._id}}">{{project.title}}</a></h4>
                </li>
            </ul>

            <div id="collapseModule">
                <p class="collapse" aria-expanded="false" ng-bind-html="project.description"></p>
            </div>

            <ul class="unstyled list-inline" style="margin-bottom: 0px;">
                <lh class="muted list-inline-item">Owner:</lh>
                <li class="list-inline-item"><a>{{project.owner_name}}</a></li>
            </ul>
            <ul class="unstyled list-inline" style="margin-bottom: 0px;">
                <lh class="muted list-inline-item">Mentor(s): </lh>
                <li class="list-inline-item" ng-repeat="mentor in project.mentor"><a>{{mentor.name}}</a></li>
            </ul>
            <ul class="unstyled list-inline" style="margin-bottom: 0px;">
                <lh class="muted list-inline-item">Team Members:</lh>
                <li class="list-inline-item" ng-repeat="member in project.members_detailed"><a>{{member}}</a>

                </li>
            </ul>
            <ul class="unstyled list-inline" style="margin-bottom: 0px;">
                <lh class="muted list-inline-item">Status:</lh>
                <li class="label label-success">APPROVED</li>
            </ul>
        </div>
        <br>
        <br>
    </div>

    <!--<div class="col-md-6 project-info" ng-if="vm.done && !vm.printFriendlyView" ng-repeat="project in vm.filteredprojects | filter: 'mobile' | filter:project.status = 'Active'">
    -->
    <div class="col-md-6 project-info" ng-if="vm.done && !vm.printFriendlyView"
        ng-repeat="project in testArr | filter: searchText | filter: {status: 'Active'}">
        <!--end-->
        <div>
            <div class="outer-wrapper">
                <div class="wrapper">
                    <div class="proj-image-container">
                        <img ng-src="{{project.image}}" alt="{{project.title}}">
                    </div>
                    <h3 class="proj-semester-teams">{{project.semester}}</h3>
                    <h3 class="proj-title-teams">
                        <a ng-href="/#/vip-projects-detailed/{{project._id}}">{{project.title}}</a>
                    </h3>
                    </h3>
                    <h5 class="proj-title-owner">Owner: {{project.owner_name}}</h5>
                    <!-- User Story #1142-->
                    <!-- <p class="proj-descrip-teams">{{project.description}}</p>  -->
                    <!-- <div class="proj-descrip-teams-vid"  ng-show="project.video_url[0]"ng-click="vm.viewDetails(project)" style="cursor:pointer;" ng-bind-html="project.description"></div> -->
                    <div class="proj-descrip-teams" ng-click="vm.viewDetails(project)" style="cursor:pointer;"
                        ng-bind-html="project.description"></div>
                </div>
                <div class="read-btn">
                    <button type="button" class="btn btn-primary btn-sm" id="readMore"
                        ng-click="vm.viewDetails(project)">
                        <i class="fa fa-share" aria-hidden="true"></i> Read More</button>
                </div>
            </div>
            <div class="thumb-card-container">
                <div style="text-align:center; color:red;" ng-hide="project.video_url[0]">
                    <h4>
                        <i class="fa fa-film fa-lg" aria-hidden="true"></i> There are no videos for this project.</h4>
                </div>
                <div class="video-thumb-card" ng-if="project.video_url[0]" ng-repeat="videothumb in project.video_url">
                    <img src="{{videothumb.vimgurl}}" ng-click="vm.setVideoModal(videothumb.vidurl, project._id)"
                        height="80px" width="80px" data-dismiss="modal" data-toggle="modal"
                        data-target="#videoCardModal">
                </div>
            </div>
            <div class="proj-card-skills">
                <label>Skills preferred:</label> {{project.reqskillItem}}</div>
            <br>
            <label>Currently enrolled:</label> {{project.members.length}} student(s) &nbsp; &nbsp; &nbsp; &nbsp;
            <br>
            <label>Max capacity:</label> {{project.maxStudents}} student(s)
            <br>
            <label>Current Members: </label> {{arrayToString(project.members_detailed)}}
            <br>
        </div>
        <br>
    </div>
</div>

<div class="col-md-6 project-info" ng-if="vm.done && !vm.printFriendlyView"
    ng-repeat="project in vm.filteredprojects | filter: { status: 'modified' }"
    ng-click="vm.viewDetails(project.old_project[0])">
    <div class="proj-info-box">
        <img ng-src="{{project.old_project[0].image}}" alt="{{project.old_project[0].title}}" class="proj-image">
        <h3 class="proj-title-teams">{{project.old_project[0].title}}</h3>
        <h5 class="proj-title-owner">Owner: {{project.old_project[0].owner_name}}</h5>

        <p class="proj-descrip-teams" ng-bind-html="project.old_project[0].description"></p>
    </div>
</div>

<div class="modal fade" id="videoCardModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button type="button" class="btn btn-danger" style="float: right; margin-bottom: 6px;"
                    id="videoCardModalClose" data-dismiss="modal">Close</button>
                <iframe width="514" height="300" ng-src="{{iFrameURLModal}}" id="vidframe" frameborder="0"
                    allowfullscreen style="display:block; margin:auto;"></iframe>
                <button type="button" class="btn btn-link" ng-click="vm.modalLink(projectidModal)"
                    style="display:block; margin:auto;" data-dismiss="modal">Enjoy this video? View the entire project
                    here!</button>
            </div>
            <h3 class="proj-semester-teams">{{project.semester}}</h3>
            <h3 class="proj-title-teams">
                <a ng-href="/#/vip-projects-detailed/{{project._id}}">{{project.title}}</a>
            </h3>
            </h3>
            <h5 class="proj-title-owner">Owner: {{project.owner_name}}</h5>

            <div class="proj-descrip-teams" ng-bind-html="project.description"></div>
        </div>
        <div class="read-btn">
            <button type="button" class="btn btn-primary btn-sm" id="readMore" ng-click="vm.viewDetails(project)">
                <i class="fa fa-share" aria-hidden="true"></i> Read more</button>
        </div>
    </div>
</div>

<!-- End here -->
</div>