<%@ page extends="oneit.servlets.jsp.JSPInclude" %>

<%@ include file="/inc/stdimports50.jsp" %><%-- This is in cougar --%>
<%@ include file="/inc/stdcms.jsp" %><%-- This is in cougar --%>
<%@ include file="/extensions/performa/inc/stdimports.jsp" %>
<%@page import="oneit.utils.text.FormatUtils"%>

<oneit:dynIncluded>
<%
    JobApplication  jobApplication  =   (JobApplication) process.getAttribute("JobApplication");

    Debug.assertion(jobApplication != null, "JobApplication is null in admin portal view applicants");
  
%>

<script type="text/javascript">
    $(document).ready(function(){
        $('.percent-green').percentageLoader({
            valElement: 'p',
            strokeWidth: 20,
            bgColor: '#e5e8eb',
            ringColor: '#67b413',
            textColor: '#67b413',
            fontSize: '30px',
            fontWeight: 'normal'
        });
        $('.percent-blue').percentageLoader({
            valElement: 'p',
            strokeWidth: 20,
            bgColor: '#e5e8eb',
            ringColor: '#03a0e7',
            textColor: '#03a0e7',
            fontSize: '30px',
            fontWeight: 'normal'
        });
  });
</script>

<oneit:form name="jobApplication" method="post"    enctype="multipart/form-data">
        
    <div class="dashboard-content-area first-part">
        <div class="officer-box">
            <div class="officer-name">
                <div class="chief-officer"><img src="images/post-p.png" />Chief Executive Officer</div>
                <div class="off-name"><span class="austr-post">Australia Post</span> by Dan Moore <span class="ex-management">?  Executive Management</span></div>
            </div>
            <div class="applicant-right-status">
                <span class="light-calendar">Closing in 13 days</span>
                <span class="job-status-appli"><span class="active-status-icon"></span>this job is active</span>
                <span class="edit-btn-dropdown"><a href="#">edit <img src="images/edit-dropdown-arrow.png" /></a></span>
            </div>
        </div>
    </div>
    <div class="dashboard-content-area second-part v-applicant-area">
        <div class="applicant-sidebar">
            <ul>
                <li class="active"><a href="#">Victor Hawkins <span class="green">85%</span></a></li>
                <li><a href="#">Mike Faulhaber<span class="blue">82%</span></a></li>
                <li><a href="#">David Barton<span class="blue">78%</span></a></li>
                <li><a href="#">Sarah Blacklock<span class="gray">76%</span></a></li>
                <li><a href="#">Jay Hollywood<span class="gray">68%</span></a></li>
                <li><a href="#">Firstname Lastname<span class="gray">67%</span></a></li>
                <li><a href="#">Victor Hawkins<span class="gray">65%</span></a></li>
                <li><a href="#">Victor Hawkins<span class="gray">61%</span></a></li>
                <li><a href="#">Victor Hawkins<span class="gray">60%</span></a></li>
                <li><a href="#">Victor Hawkins<span class="gray">54%</span></a></li>
            </ul>
        </div>
        <div class="main-applicant-content">
            <div class="applicant-header">
                <div class="main-appli-name">
                    <div class="appli-name">Victor Hawkins</div>
                    <div class="appli-applied">Applied via seek.com.au <span>?  April 30 2017</span></div>
                </div>
                <div class="main-export">
                    <span class="export-candidate">
                        <select class="form-control">
                            <option>Export Candidate Report</option>
                            <option>PDF</option>
                            <option>Excel</option>
                        </select>
                    </span>
                    <span class="appli-status-short">
                        <select class="form-control status-img">
                            <option data-image="images/active.png">Active</option>
                            <option data-image="images/complete.png">Completed</option>
                            <option data-image="images/shortlisted.png">Shortlisted</option>
                        </select>
                    </span>
                </div>
            </div>
        <div class="applicant-sub-part">
            <div class="applicant-left">
                <div class="applicant-progress">
                    <div class="col-sm-4 col-xs-12 text-center">
                        <label class="progress-label">job match</label>
                        <div class="percent-green fixed-width">
                            <p style="display:none;">83%</p>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-12 text-center">                
                        <label class="progress-label">culture</label>
                        <div class="percent-green fixed-width">
                            <p style="display:none;">83%</p>
                        </div>
                    </div>
                    <div class="col-sm-4 col-xs-12 text-center">
                        <label class="progress-label">Selection criteria</label>
                        <div class="percent-blue fixed-width">
                            <p style="display:none;">70%</p>
                        </div>                
                    </div>
                </div>
                <div class="applicant-tab">
                    <ul class="nav nav-pills nav-justified">
                        <li class="active"><a href="#1a" data-toggle="tab">job match</a></li>
                        <li><a href="#2a" data-toggle="tab">Culture</a></li>
                        <li><a href="#3a" data-toggle="tab">Selection Criteria</a></li>
                        <li><a href="#4a" data-toggle="tab">Areas of concern</a></li>
                    </ul>
                    <div class="tab-content clearfix">
                        <div class="tab-pane active" id="1a">
                            <div class="main-pro-bar">
                                <div class="pro-bar">
                                    <span class="appli-label">Career Drive</span>
                                    <span class="appli-percen">82%</span>
                                    <span class="appli-progress-bar">
                                        <div class="progress">
                                            <div class="progress-bar" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width:82%"></div>
                                        </div>
                                    </span>
                                    <span class="expand-box">
                                        <span><img src="images/select-top-arrow.png"></span>
                                    </span>
                                </div>
                                <div class="expand-hide-tag" style="display: block;">
                                    <div class="tab-row">
                                        <div class="tab-view-label">
                                            Achievement
                                        </div>
                                        <div class="tab-view-side">
                                            <div class="result-want">
                                                <div class="result">Not results focused</div>
                                                <div class="wants">Wants results</div>
                                            </div>
                                            <div class="result-bar">
                                                <ul>
                                                    <li class="red-b" style="width: 26.5%;"></li>
                                                    <li class="yellow-b" style="width: 26.5%;"></li>
                                                    <li class="green-b" style="width: 47%;"></li>                
                                                </ul>
                                                <span class="triangle-arrow" style="left: 48%;"></span>
                                            </div>
                                            <div class="like-strive">Likely to strive to achive results</div>
                                        </div>
                                    </div>
                                    <div class="tab-row">
                                        <div class="tab-view-label">
                                            Remuneration
                                        </div>
                                        <div class="tab-view-side">
                                            <div class="result-want">
                                                <div class="result">Low concern</div>
                                                <div class="wants">High concern</div>
                                            </div>
                                            <div class="result-bar">
                                                <ul>
                                                    <li class="red-b" style="width: 23.2%;"></li>
                                                    <li class="yellow-b" style="width: 57.6%;"></li>
                                                    <li class="green-b" style="width: 19.2%;"></li>                
                                                </ul>
                                                <span class="triangle-arrow" style="left: 72%;"></span>
                                            </div>
                                            <div class="like-strive">Financial reward is less of a motivation than many other factors</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="main-pro-bar">
                                <div class="pro-bar">
                                    <span class="appli-label">Conflict Management Style</span>
                                    <span class="appli-percen">82%</span>
                                    <span class="appli-progress-bar">
                                        <div class="progress">
                                            <div class="progress-bar" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" style="width:82%"></div>
                                        </div>
                                    </span>
                                    <span class="expand-box">
                                        <span class="hasarrow"><img src="images/select-down-arrow.png" /></span>
                                    </span>
                                </div>
                                <div class="expand-hide-tag">
                                    <div class="tab-row">
                                        <div class="tab-view-label">
                                            Achievement
                                        </div>
                                        <div class="tab-view-side">
                                            <div class="result-want">
                                                <div class="result">Not results focused</div>
                                                <div class="wants">Wants results</div>
                                            </div>
                                            <div class="result-bar">
                                                <ul>
                                                    <li class="red-b" style="width: 26.5%;"></li>
                                                    <li class="yellow-b" style="width: 26.5%;"></li>
                                                    <li class="green-b" style="width: 47%;"></li>                
                                                </ul>
                                                <span class="triangle-arrow" style="left: 48%;"></span>
                                            </div>
                                          <div class="like-strive">Likely to strive to achive results</div>
                                        </div>
                                    </div>
                                    <div class="tab-row">
                                      <div class="tab-view-label">
                                        Remuneration
                                      </div>
                                      <div class="tab-view-side">
                                        <div class="result-want">
                                          <div class="result">Low concern</div>
                                          <div class="wants">High concern</div>
                                        </div>
                                        <div class="result-bar">
                                          <ul>
                                            <li class="red-b" style="width: 23.2%;"></li>
                                            <li class="yellow-b" style="width: 57.6%;"></li>
                                            <li class="green-b" style="width: 19%;"></li>                
                                          </ul>
                                          <span class="triangle-arrow" style="left: 72%;"></span>
                                        </div>
                                        <div class="like-strive">Financial reward is less of a motivation than many other factors</div>
                                      </div>
                                    </div>
                                </div>
                          </div>
                          <div class="main-pro-bar">
                          <div class="pro-bar">
                              <span class="appli-label">Coping</span>
                              <span class="appli-percen blue">78%</span>
                              <span class="appli-progress-bar">
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100" style="width:78%"></div>
                                </div>
                              </span>
                              <span class="expand-box">
                                <span class="hasarrow"><img src="images/select-down-arrow.png" /></span>
                              </span>
                            </div>
                            <div class="expand-hide-tag">
                              <div class="tab-row">
                                <div class="tab-view-label">
                                  Achievement
                                </div>
                                <div class="tab-view-side">
                                  <div class="result-want">
                                    <div class="result">Not results focused</div>
                                    <div class="wants">Wants results</div>
                                  </div>
                                  <div class="result-bar">
                                    <ul>
                                      <li class="red-b" style="width: 26.5%;"></li>
                                      <li class="yellow-b" style="width: 26.5%;"></li>
                                      <li class="green-b" style="width: 47%;"></li>                
                                    </ul>
                                    <span class="triangle-arrow" style="left: 48%;"></span>
                                  </div>
                                  <div class="like-strive">Likely to strive to achive results</div>
                                </div>
                              </div>
                              <div class="tab-row">
                                <div class="tab-view-label">
                                  Remuneration
                                </div>
                                <div class="tab-view-side">
                                  <div class="result-want">
                                    <div class="result">Low concern</div>
                                    <div class="wants">High concern</div>
                                  </div>
                                  <div class="result-bar">
                                    <ul>
                                      <li class="red-b" style="width: 23.2%;"></li>
                                      <li class="yellow-b" style="width: 57.6%;"></li>
                                      <li class="green-b" style="width: 19%;"></li>                
                                    </ul>
                                    <span class="triangle-arrow" style="left: 72%;"></span>
                                  </div>
                                  <div class="like-strive">Financial reward is less of a motivation than many other factors</div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="main-pro-bar">
                            <div class="pro-bar">
                              <span class="appli-label">People Orientation</span>
                              <span class="appli-percen gray">68%</span>
                              <span class="appli-progress-bar">
                                <div class="progress">
                                    <div class="progress-bar" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" style="width:68%"></div>
                                </div>
                              </span>
                              <span class="expand-box">
                                <span class="hasarrow"><img src="images/select-down-arrow.png" /></span>
                              </span>
                            </div>
                            <div class="expand-hide-tag">
                              <div class="tab-row">
                                <div class="tab-view-label">
                                  Achievement
                                </div>
                                <div class="tab-view-side">
                                  <div class="result-want">
                                    <div class="result">Not results focused</div>
                                    <div class="wants">Wants results</div>
                                  </div>
                                  <div class="result-bar">
                                    <ul>
                                      <li class="red-b" style="width: 26.5%;"></li>
                                      <li class="yellow-b" style="width: 26.5%;"></li>
                                      <li class="green-b" style="width: 47%;"></li>                
                                    </ul>
                                    <span class="triangle-arrow" style="left: 48%;"></span>
                                  </div>
                                  <div class="like-strive">Likely to strive to achive results</div>
                                </div>
                              </div>
                              <div class="tab-row">
                                <div class="tab-view-label">
                                  Remuneration
                                </div>
                                <div class="tab-view-side">
                                  <div class="result-want">
                                    <div class="result">Low concern</div>
                                    <div class="wants">High concern</div>
                                  </div>
                                  <div class="result-bar">
                                    <ul>
                                      <li class="red-b" style="width: 23.2%;"></li>
                                      <li class="yellow-b" style="width: 57.6%;"></li>
                                      <li class="green-b" style="width: 19%;"></li>                
                                    </ul>
                                    <span class="triangle-arrow" style="left: 72%;"></span>
                                  </div>
                                  <div class="like-strive">Financial reward is less of a motivation than many other factors</div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="tab-pane" id="2a">

                        </div>
                        <div class="tab-pane" id="3a">

                        </div>
                        <div class="tab-pane" id="4a">

                        </div>
                    </div>
            </div>
            </div>
            <div class="applicant-right">
              <div class="app-right-b">
                <div class="overall-suit">overall suitablity</div>
                <div class="big-percentage">85%</div>
              </div>
              <div class="applicant-contact-info">
                <div class="contact-title">Contact</div>
                <div class="contact-row">
                  <div class="contact-label">E</div>
                  <div class="contact-value"><a href="#">Victor@performa.net.au</a></div>
                </div>
                <div class="contact-row">
                  <div class="contact-label">P</div>
                  <div class="contact-value">0403 228 170</div>
                </div>
                <div class="contact-row">
                  <div class="contact-label"><img src="images/linkdin-icon.png" /></div>
                  <div class="contact-value"><a href="#">View LinkedIn profile</a></div>
                </div>
                <div class="contact-row">
                  <div class="contact-label"><img src="images/download-icon.png" /></div>
                  <div class="contact-value"><a href="#">Download Resume</a></div>
                </div>
              </div>
              <div class="applicant-note">
                <div class="applicant-note-title">Notes</div>
                <div class="note-txt-box">
                  <textarea class="form-control"></textarea>
                  <input type="button" class="add-note-btn" value="ADD NOTE" />
                </div>
              </div>
              <div class="admin-notes">
                <div class="admin-name">Admin name</div>
                <div class="date-value">TODAY</div>
                <div class="admin-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent accumsan interdum nisi, sed laoreet dui rhoncus.</div>
                <div class="admin-br-line"></div>
                <div class="admin-name">Admin name</div>
                <div class="date-value">2 days ago</div>
                <div class="admin-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
</oneit:form>

</oneit:dynIncluded>