<div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">#<%= app.id %>
        - <%= app.Name %></h5>
    <button type="button" class="close" data-dismiss="modal"
            aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<div class="modal-body">
    <form class="infoForm">
        <h6>Personal Info</h6>
        <hr>
        <ul>
            <li>Age: <%= app.Age %></li>
            <li>CU Student: <%= app.CUStudent %></li>
            <li>Academic Year: <%= app.Academic %></li>
            <li>Faculty: <%= app.Faculty %></li>
            <li>Major: <%= app.Major %></li>
            <li>Minor: <%= app.Minor %></li>
            <li>English: <%= app.English %></li>
            <li>Application Start: <%= app.Start %></li>
            <li>Application End: <%= app.End %></li>
        </ul>
        <label>Extra-Curricular Activities</label>
        <textarea disabled class="form-control"><%= app.Excur %></textarea>
        <div class="form-group">
            <label>Courses & Workshops Attended</label>
            <textarea disabled
                      class="form-control"><%= app.Courses %></textarea>
        </div>
        <br>
        <% let q = 0 %>
        <label>Team</label>
        <hr>
        <br><h6>Questions: <%= app.First %></h6>
        <% if(questions[app.First]) { %>
            <% questions[app.First].forEach((question, index) => { %>
                <% if (question.Type === 'textarea'){ %>
                    <div class="form-group">
                        <label><%= question.Text %></label>
                        <% if(app.Answers.Team){ %>
                            <textarea disabled
                                      class="form-control"><%= app.Answers.Team[q] %> </textarea>
                        <% } else { %>
                            <h6 class="text-red"> No Answers Found in DB</h6>
                        <% } %>
                        <% q = q + 1 %>
                    </div>
                <% }  else if (question.Type === 'image' && app.Answers.Files && app.Answers.Files.image) { %>
                        <div class="form-group">
                            <label><%= question.Text %></label>
                            <% let ans = app.Answers.Files.image.find(a => a.questionId == question.id);%>
                            <% if(ans){ %>
                                <img class="row" style="max-width: 40vw" src="/submissions/<%=ans.filename%>" alt="<%= question.Text %>">
                            <% } else { %>
                                <h6 class="text-red"> No Image Uploaded</h6>
                            <% } %>
                        </div>
                <% } else if (question.Type === 'choice' && app.Answers.Choices) { %>
                        <div class="form-group">
                            <label><%= question.Text %></label>
                            <% let ans = app.Answers.Choices.find(a => a.questionId == question.id);%>
                            <% if(ans){ %>
                                <input type="text" class="form-control" disabled value="<%=ans.answer%>">
                            <% } else { %>
                                <h6 class="text-red"> No Choice Selected</h6>
                            <% } %>
                        </div>
                <% } %>

            <% }) %>
        <% } %>
        <br>
        <h6>Questions: <%= app.Second %></h6>
        <% if(questions[app.Second]) { %>
            <% questions[app.Second].forEach((question, index) => { %>
                <% if (question.Type === 'textarea'){ %>
                    <div class="form-group">
                        <label><%= question.Text %></label>
                        <% if(app.Answers.Team){ %>
                            <textarea disabled
                                      class="form-control"><%= app.Answers.Team[q] %> </textarea>
                        <% } else { %>
                            <h6 class="text-red"> No Answers Found in DB</h6>
                        <% } %>
                    </div>
                    <% q = q + 1 %>
                <% } else if (question.Type === 'image' && app.Answers.Files && app.Answers.Files.image) { %>
                        <div class="form-group">
                            <label><%= question.Text %></label>
                            <% let ans = app.Answers.Files.image.find(a => a.questionId == question.id);%>
                            <% if(ans){ %>
                            <img class="row" style="max-width: 40vw" src="/submissions/<%=ans.filename%>" alt="<%= question.Text %>">
                            <% } else { %>
                                <h6 class="text-red"> No Image Uploaded</h6>
                            <% } %>
                        </div>
                    <% } else if (question.Type === 'choice' && app.Answers.Choices) { %>
                        <div class="form-group">
                            <label><%= question.Text %></label>
                            <% let ans = app.Answers.Choices.find(a => a.questionId == question.id);%>
                            <% if(ans){ %>
                            <input type="text" class="form-control" disabled value="<%=ans.answer%>">
                            <% } else { %>
                                <h6 class="text-red"> No Choice Selected</h6>
                            <% } %>
                        </div>
                    <% } %>

            <% }) %>
        <% } %>
        <br><h6>General</h6>
        <hr>
        <% questions["General"].forEach((question, index) => { %>
        <%if (question.Type === 'textarea') { %>
            <div class="form-group">
                <label><%= question.Text %></label>
                <textarea disabled
                          class="form-control"><%= app.Answers.General[index] %></textarea>
            </div>
            <% }else if (question.Type === 'image' && app.Answers.Files) { %>
            <div class="form-group">
                <label><%= question.Text %></label>
                <% let ans = app.Answers.Files.image.find(a => a.questionId == question.id);%>
                <% if(ans){ %>
                <img class="row" style="max-width: 40vw" src="/submissions/<%=ans.filename%>" alt="<%= question.Text %>">
                <% } else { %>
                    <h6 class="text-red"> No Image Uploaded</h6>
                <% } %>
            </div>
        <% }  else if (question.Type === 'choice' && app.Answers.Choices) { %>
            <div class="form-group">
                <label><%= question.Text %></label>
                <% let ans = app.Answers.Choices.find(a => a.questionId == question.id);%>
                <% if(ans){ %>
                <input type="text" class="form-control" disabled value="<%=ans.answer%>">
                <% } else { %>
                    <h6 class="text-red"> No Choice Selected</h6>
                <% } %>
            </div>
        <% } %>
        <% }) %>
        <br>
        <h6>Situational</h6>
        <hr>
        <% questions["Situational"].forEach((question, index) => { %>
        <%if (question.Type === 'textarea') { %>
            <div class="form-group">
                <label><%= question.Text %></label>
                <textarea disabled
                          class="form-control"><%= app.Answers.Situational[index] %></textarea>
            </div>
        <%}  else if (question.Type === 'image' && app.Answers.Files) { %>
            <div class="form-group">
                <label><%= question.Text %></label>
                <% let ans = app.Answers.Files.image.find(a => a.questionId == question.id);%>
                <% if(ans){ %>
                <img class="row" style="max-width: 40vw" src="/submissions/<%=ans.filename%>" alt="<%= question.Text %>">
                <% } else { %>
                    <h6 class="text-red"> No Image Uploaded</h6>
                <% } %>
            </div>
        <% } else if (question.Type === 'choice' && app.Answers.Choices) { %>
            <div class="form-group">
                <label><%= question.Text %></label>
                <% let ans = app.Answers.Choices.find(a => a.questionId == question.id);%>
                <% if(ans){ %>
                <input type="text" class="form-control" disabled value="<%=ans.answer%>">
                <% } else { %>
                    <h6 class="text-red"> No Choice Selected</h6>
                <% } %>
            </div>
        <% } %>
        <% }) %>
    </form>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-secondary"
            data-dismiss="modal">
        Close
    </button>
</div>
