<div ng-if="!done">
    <center><img img width="250px" height="250px" src="img/loading.gif" /></center>
</div>

<div ng-if="done">
    <h2>PROJECT PROPOSAL FORM</h2>
    <hr>
    <p style="color:orange;"><strong>{{result}}</strong></p>
    <!-- User Story #1175 -->
    <label>Previous Projects</label>
    <select ng-model="project.previousProj" ng-change="populatePrevious()"
        ng-options="project._id as project.title for project in project.previous" class="form-control"
        value="previousProject" required>
        <option></option>
    </select>
    <form role="form" class="project_proposal" ng-submit="save()">
        <div class="form-group">

            <!-- User Story #1175 -->
            <label>*Team Title</label>
            <input type="text" class="form-control" placeholder="" ng-model="project.title" required />
        </div>

        <div class="form-group">
            <!-- User Story #1175 -->
            <label>*Semester:</label>

            <select ng-model="project.semester" ng-options="term.name as term.name for term in dropdownArray"
                class="form-control" required>
                <!--<select ng-model="project.semester" ng-options="term.name as term.name for term in dropdownArray" class="form-control"
                required>-->
            </select>

        </div>


        <div class="form-group" hidden>
            <label>Team Image:</label>
            <input type="url" class="form-control" ng-model="project.image" />
        </div>

        <div class="form-group">
            <label>Upload Team Image</label>
            <input onchange="uploadProposalClass.uploadImage2()" id="teamImage" accept=".jpg,.png,.gif" type="file"
                class="form-control" />
            <progress id="pI" class="form-control" style="visibility: hidden; width: 20%; border: none;" />
            <small><i>Picture size MUST be below 2MB</i></small>
        </div>

        <div class="form-group">
            <label>Video Link</label>
            <!-- <input type="text" ng-model="project.video_url" class="form-control"/>
    <small><i>It is recommended you put an intro video as the first video of a Youtube playlist for easier viewing</i></small> -->
            <table class="table table-striped">
                <tr>
                    <td>
                        <input id="project.videoAdd" type="text" class="form-control" ng-model="project.videoAdd" />
                        <small><i>Add several individual videos and/or entire YouTube playlists here.</i></small>
                    </td>
                    <td>
                        <button id="addVideoButton" type="button" class="btn btn-primary"
                            ng-click="addVideoToProject()">Add
                            Video</button>
                    </td>
                </tr>
                <tr ng-repeat="video in project.video_url">
                    <td><img src="{{video.vimgurl}}" height="50px" width="50px"> {{video.vidurl}}</td>
                    <td>
                        <button id="rmVideoButton" class="btn btn-danger"
                            ng-click="removeVideoFromProject(video)">Remove
                            Video</button>
                    </td>
                </tr>
            </table>
        </div>

        <!-- <button type="button" data-toggle="collapse" data-target="#vids" class="btn btn-primary">Add a secondary video</button> -->
        <div class="form-group" id="vids">
            <label>Link to your YouTube Channel</label>
            <input type="text" ng-model="project.youtube_url" class="form-control" />
        </div>
        <!-- User Story #1142-->
        <div class="form-group">
            <!-- User Story #1175 -->
            <label>*Team Description:</label>
            <!-- <div text-angular ng-model="project.description"></div> -->
            <!--<textarea ng-model="project.description" name="" class="form-control" rows="10">
    </textarea>-->
            <trix-editor angular-trix ng-model="project.description" name="" rows="10" required> </trix-editor>
        </div>

        <button type="button" data-toggle="collapse" data-target="#owner" class="btn btn-primary">Add a different
            product owner</button>
        <div class="form-group collapse" id="owner">
            <label>Product Owner (if left blank it will place you as product owner)</label>
            <input type="text" class="form-control" placeholder="" ng-model="project.owner_name" />
            <label>Email of Product Owner (if product owner not blank an email must be provided)</label>
            <input type="text" class="form-control" placeholder="" ng-model="project.owner_email" />
        </div>

        <button type="button" data-toggle="collapse" data-target="#faculty" class="btn btn-primary">Add faculty
            members</button>
        <div class="form-group collapse" id="faculty">
            <label>Add a Faculty Member</label><br>
            Name: <input type="text" class="form-control" ng-model="SelectedFacultyNames"
                placeholder="Michael Smith, Johnny Stuart, Daniel Riveron"
                value="{{updateFacultyNames(SelectedFacultyNames)}}" />
            Email: <input type="text" class="form-control" ng-model="SelectedFacultyEmails"
                placeholder="michael@fiu.edu, johnny@yahoo.com, daniel@gmail.com"
                value="{{updateFacultyEmails(SelectedFacultyEmails)}}" />
            <small><i>Note: Separate each with commas followed by one space!</i></small>
        </div>

        <button type="button" data-toggle="collapse" data-target="#mentor" class="btn btn-primary">Add mentors</button>
        <div class="form-group collapse" id="mentor">
            <label>Add a Mentor</label><br>
            Name: <input type="text" class="form-control" ng-model="SelectedMentorNames"
                placeholder="Michael Smith, Johnny Stuart, Daniel Riveron"
                value="{{updateMentorNames(SelectedMentorNames)}}" />
            Email: <input type="text" class="form-control" ng-model="SelectedMentorEmails"
                placeholder="michael@fiu.edu, johnny@yahoo.com, daniel@gmail.com"
                value="{{updateMentorEmails(SelectedMentorEmails)}}" />
            <small><i>Note: Separate each with commas followed by one space!</i></small>
        </div>

        <button type="button" data-toggle="collapse" data-target="#student" class="btn btn-primary">Add students
            manually</button>
        <div class="form-group collapse" id="student">
            <label>Add Students</label><br>
            Name: <input type="text" class="form-control" ng-model="SelectedStudentNames"
                placeholder="Michael Smith, Johnny Stuart, Daniel Riveron"
                value="{{updateStudentNames(SelectedStudentNames)}}" />
            Email: <input type="text" class="form-control" ng-model="SelectedStudentEmails"
                placeholder="michael@fiu.edu, johnny@yahoo.com, daniel@gmail.com"
                value="{{updateStudentEmails(SelectedStudentEmails)}}" />
            <small><i>Note: Separate each with commas followed by one space!</i></small>
        </div>

        <br /><br />
        <div class="form-group">
            <label>Upload Attachments for this project</label>
            <table class="table table-striped">
                <tr>
                    <td>
                        <input onchange="uploadProposalClass.uploadDoc()" id="project.projDoc" accept=".pdf" type="file"
                            class="form-inline" />
                        <small>Upload a file here. Allowed file types: PDF</small>
                        <progress id="pD" class="form-horizontal"
                            style="visibility: hidden; width: 20%; border: none;" />
                    </td>
                    <td>
                        <p><strong>or</strong></p>
                    </td>
                    <td>
                        <input id="project.docLink" type="text" style="width:250px;" class="form-inline"
                            ng-model="project.docLink" />
                        <small><i><br />Provide a shared document link (i.e. from Google Drive or Dropbox). <br />Please
                                check the link settings to be sure it is public.</i></small>
                    </td>
                    <td>
                        <input id="project.docTitle" type="text" class="form-inline" ng-model="project.docTitle" />
                        <small><i><br />Name your document</i></small>
                    </td>
                    <td>
                        <button id="addDocButton" type="button" class="btn btn-primary" ng-click="addDocToProject()">Add
                            Document</button>
                    </td>
                </tr>
            </table>
        </div>
        <div class="form-group">
            <table class="table table-striped">
                <tr ng-repeat="doc in project.attachments">
                    <td>{{doc.name}}</td>
                    <td>
                        <button id="rmDocButton" class="btn btn-danger" ng-click="removeDocFromProject(doc)">Remove
                            Document</button>
                    </td>
                </tr>
            </table>
        </div>

        <div class="form-group">
            <label>Github link</label>
            <input type="text" ng-model="project.github_url" class="form-control" />
        </div>

        <div class="form-group">
            <label>Google Drive link</label>
            <input type="text" ng-model="project.drive_url" class="form-control" />
        </div>

        <div class="form-group">
            <label>Mingle link</label>
            <input type="text" ng-model="project.mingle_url" class="form-control" />
        </div>

        <div class="form-group">
            <label>Link to Previous Semester's Project</label>
            <input type="text" ng-model="project.archive_url" class="form-control" />
        </div>

        <div class="form-group">
            <label>Minimum number of students:</label>
            <input type="number" min="0" class="form-control" placeholder="" ng-model="project.firstSemester" />
        </div>

        <div class="form-group">
            <label>Maximum number of students per semester:</label>
            <input type="number" min="0" class="form-control" placeholder="" ng-model="project.maxStudents" />
        </div>

        <div class="form-group">
            <label>Upload Previous Deliverables related to this project</label>
            <table class="table table-striped">
                <tr>
                    <td>
                        <input onchange="uploadProposalClass.uploadDeliverable()" id="project.projDeliverable"
                            accept=".pdf" type="file" class="form-control" />
                        <small>Upload a file here. Allowed file types: PDF</small>
                        <progress id="pDv" class="form-horizontal"
                            style="visibility: hidden; width: 20%; border: none;" />
                    </td>
                    <td>
                        <input id="project.deliverableTitle" type="text" ng-model="project.deliverableTitle" />
                        <small><i><br />Name your document</i></small>
                    </td>
                    <td>
                        <button id="addDeliverableButton" type="button" class="btn btn-primary"
                            ng-click="addDeliverableToProject()">Add
                            Document</button>
                    </td>
                </tr>
            </table>
        </div>

        <div class="form-group">
            <table class="table table-striped">
                <tr ng-repeat="deliverdocument in project.deliverables_attached">
                    <td>{{deliverdocument.name}}</td>
                    <td>
                        <button id="rmDeliverableButton" class="btn btn-danger"
                            ng-click="removeDeliverableFromProject(doc)">Remove
                            Document</button>
                    </td>
                </tr>
            </table>
        </div>

        <div class="form-group">
            <skills label="*Required Skills and Knowledge:" skills="project.reqskillItem"></skills>
        </div>

        <!-- User Story #1207 -->
        <div class="form-group" hidden>
            <label>Proposed Date:</label>
            <input class="form-control" placeholder="" ng-model="project.proposedDate" />
        </div>

        <h4><strong>* : required fields</strong></h4>
        <br>
        <!-- User Story #1191 -->
        <p>
            <h5>Hover and click to select the options</h5>
        </p>
        <div ng-repeat='college in colleges' class="dropdown" >
            <div style="margin-bottom: 3px;">
                <button ui-sref="dropdown" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                    style="display: inline-block;">
                    {{college['name']}}</button>
            </div>
            <ul class="dropdown-menu" style="background-color:white; list-style-type:none; margin-top: -2px;">
                <li ng-repeat='(key2, value2) in college["schools"]' class="dropdown-submenu"
                    style="background-color:white;">
                    &nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" ng-click="toggleCheckbox(value2)">{{value2}}
                </li>
            </ul>
        </div>
        <br />
        <br />
        <!-- User Story #1175 -->
        <input type="submit" class="btn btn-primary submit-btn"></input>
        <br />
        <br />

    </form>
</div>