{% extends "base.html" %}
{% load custom_tags %}
{% block styling %}
{% load static %}
.statistic:not(.last-stat){
	border-right: 1px solid #e0e1e2 ;
}
.statistics th:not(.last-th){
	border-right: 1px solid #dddddd;
}

{% endblock %}

{% block content %}
<br>
<div class="ui container">
	<div class="ui grid"  style="margin-top: 1rem;">
		<div class="six wide column">
			<div class="ui fluid raised card">
				<div class="content">
					<div class="ui two statistics">
						<div class="teal statistic">
							<div class="value">
								{{ current_round.roundNo }}
							</div>
							<div class="label">
								<br>
								Current Round
							</div>
						</div>
						<div class="red statistic last-stat">
							<div class="text value" style="padding-top: 1rem;">
								{{ current_round.endDate }}
							</div>
							<div class="label">
								<br>
								Last date 
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="ten wide column">
			<div class="ui fluid raised card">
				<div class="content">
					<div class="ui three statistics divided">
						<div class="yellow statistic">
							<div class="value">
								{{ unappliedPositions|length }}
							</div>
							<div class="label">
								<br>
								Available Positions
							</div>
						</div>
						<div class="green statistic">
							<div class="value">
								{{ appliedPositions|length }}
							</div>
							<div class="label">
								<br>
								Submitted Applications
							</div>
						</div>
						<div class="statistic last-stat">
							<div class="text value" style="color:#5279a2;padding-top: 1rem;" >
								{% if applicationDetails.alloted_project %}Alloted{% else %} Not alloted {% endif %}
							</div>
							<div class="label">
								<br>
								Status
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<br>
	<div class="ui yellow icon large floating message" style="margin-top: 3rem;">
		<i class="calendar check icon"></i>
		<div class="content">
			<div class="header" style="padding-bottom:1rem;">
				Time remaining for Round {{ current_round.roundNo }}
			</div>
			<div class="ui progress {% get_progress_color current_round.endDate %}" data-percent="{% get_progress_percent current_round  %}" id="time-progress" style="opacity: 0.85">
				  <div class="bar">
				    <div class="progress"></div>
				  </div>
				  <div class="label header">{%  get_remaining_days current_round.endDate  %}</div>
			</div>
		</div>
	</div>
	{% if applicationDetails.alloted_project %}
		<div class="ui success icon large message" style="padding-top: 1rem;margin-top: 3rem;">
			<i class="university icon"></i>
			<div class="content">
				<div class="ui center aligned header">
					CONGRATULATIONS {{ applicationDetails.student.get_full_name }} !!!
				</div>
				<ul class="list">
					<li >You are alloted to <span class="header" style="display: inline;background-color:rgba(0, 0, 0, 0.06); "> {{ applicationDetails.alloted_project.title }} </span></li>
					<li>You will be working with Prof.<span class="header" style="display: inline;background-color:rgba(0, 0, 0, 0.06); "> {{ applicationDetails.alloted_project.faculty.get_full_name }} </span> </li>
				</ul>
			</div>
		</div>
	{% endif %}
</div>

<br>
<br>
<div class="ui three item stackable tabs inverted menu " style="font-size: large;">
	<a class="item active" data-tab="first">Available Projects</a>
	<a class="item" data-tab="second">Applied Projects</a>
	<a class="item" data-tab="third">My profile</a>
</div>

<div class="ui tab active" data-tab="first">
	{% if applicationDetails %}
		<div class="ui warning message">
		  <i class="close icon"></i>
		  <div class="header ui center aligned">
		    Instructions to Candidates
		  </div>
		  <ul>
		  	<li>Use the <span class="header" style="display: inline;background-color:rgba(0, 0, 0, 0.06); "> Info </span> button to know more about the project.</li>
		  	<li>Click on <span class="header" style="display: inline;background-color:rgba(0, 0, 0, 0.06); "> Apply </span> to submit your application for the said role.</li>
		  	<li>You can find the shortlisted applications in the <span class="header" style="display: inline;background-color:rgba(0, 0, 0, 0.06); ">Applied Projects</span> tab</li>
		  </ul>
		</div>
	{% else %}
		<div class="ui warning message">
		  <i class="close icon"></i>
		  <div class="header ui center aligned">
		    Create your profile
		  </div>
		  <ul>
		  	<li>You have not built your profile. This will help faculties know you better</li>
		  	<li>You must fill the <span class="medium header" style="display: inline;background-color:rgba(0, 0, 0, 0.06); ">Profile</span> before applying to faculties.</li>
		  	<li>Thy shall go to the <span class="medium header" style="display: inline;background-color:rgba(0, 0, 0, 0.06); ">My Profile</span> section to do the same.</li>
		  </ul>
		</div>
	{% endif %}
	<table id="example" class="ui table raised segment center aligned" style="width:100%">
		<thead>
			<tr>
				<th>FACULTY NAME</th>
				<th>PROJECT TITLE</th>
				<th>CONTACT DETAILS</th>
				<th>OPEN POSITIONS</th>
				<th class="last-th">ACTIONS</th>
			</tr>
		</thead>
		<tbody>
			{% for position in unappliedPositions %}
			<tr>
				<td>
					<span class="ui" style="color: #b58105;">{{ position.faculty.get_full_name }}</span>
				</td>
				<td>
					<span style="color: #5279a2;">{{ position.title }}</span>
				</td>
				<td>
				{{ position.contact_details }}
				</td>
				<td>
					<span class="ui orange header">{{ position.total_positions }}</span>
				</td>
				<td>
					<div style="display: inline-flex;">
						<button class="ui vk button column" onclick="show_project_detail({{ position.id }})">
							<i class="address card icon"></i>
							Info
						</button>

						{% if applicationDetails and not applicationDetails.alloted_project %}
							<form action="{% url 'gap:shortlist' %}" method="POST" class="ui column">
								{% csrf_token %}
								<input type="hidden" name="project_Id" value="{{ position.id }}">
								<input type="hidden" name="action" value="shortlist">
								<button class="ui icon right labeled teal button" onclick="return confirm('Do you want to SHORTLIST this application?');" >
									<i class="check icon"></i>
									Apply
								</button>
							</form>
						{% endif %}
					</div>	
				</td>
			</tr>
			{% endfor %}
		</tbody>
	</table>
</div>

<div class="ui tab " data-tab="second">
	<div class="ui warning message">
	  
	  <div class="header ui center aligned">
	    Instructions to use the priority window
	  </div>
	  <ul>
	  	<li>Arrangement of the application should be in <span class="header" style="display: inline;background-color:rgba(0, 0, 0, 0.06); ">Ascending order</span>.</li>
	  	<li>You can <span class="header" style="display: inline;background-color:rgba(0, 0, 0, 0.06); ">hold and move</span> the applications to change the priority arrangements </li>
	  	<li>Click on the <span class="header" style="display: inline;background-color:rgba(0, 0, 0, 0.06); ">Update priorities</span> to make changes permanent.</li>
	  </ul>
	</div>
	<div class="ui grid">
		
		<div class="right floated four wide column">
			{% if appliedPositions %}
			<button class="fluid ui labeled teal icon button" onclick="submit_priorities()" >
				<i class="plus icon"></i>
				Update priorities
			</button>
			{% endif %}
		</div>
	</div>

	<div class="ui segment fluid raised card">
		<div class="ui middle aligned selection divided list" style="margin-bottom: 0px;">
			<div class="item" style="padding-bottom: 0px;padding-top: 0px;background-color: rgb(0,0,0,0.03);">
				<div class="ui grid center aligned divided" style="margin-top: 0px;">
					<div class="three wide column ui tiny header">FACULTY NAME</div>
					<div class="four wide column ui tiny header ">PROJECT TITLE</div>
					<div class="four wide column ui tiny header">CONTACT DETAILS</div>
					<div class="two wide column ui tiny header">OPEN POSITIONS</div>
					<div class="three wide column ui tiny header">ACTIONS</div>
				</div>
			</div>
			<div class="ui divider" style="margin-bottom: 0px;"></div>
		</div>
		<div class="ui middle aligned selection divided list" style="margin-top: 0px;" id="sortable">
			{% for position in appliedPositions %}
				<div class="item">
					<div class="ui grid">
						<input type="hidden" readonly="" disabled="" class="applied-project-id" value="{{ position.id }}">
						<div class="column three wide center aligned middle aligned"><span class="ui" style="color: #b58105;">{{ position.faculty.get_full_name }}</span></div>
						<div class="column four wide center aligned middle aligned"><span style="color: #5279a2;">{{ position.title }}</span></div>
						<div class="column four wide center aligned middle aligned">{{ position.contact_details }}</div>
						<div class="column two wide center aligned middle aligned"><span class="ui header" style="color: #f2711c;">{{ position.total_positions }}</span></div>
						<div class="right floated three wide column">
							<div class="ui center aligned" style="display: inline-flex;">
								<button class="ui vk button" onclick="show_project_detail({{ position.id }})">
									<i class="address card icon"></i>
									Info
								</button>
								<form action="{% url 'gap:shortlist' %}" method="POST" class="ui column">
									{% csrf_token %}
									<input type="hidden" name="project_Id" value="{{ position.id }}">
									<input type="hidden" name="action" value="discard">
									<button class="ui right labeled icon negative button" onclick="return confirm('Do you want to DISCARD this application?');">
									<i class="trash icon"></i>
									Discard
								</button>
								</form>
							</div>	
						</div>
					</div>
				</div>
			{% endfor %}
		</div>
	</div>
</div>

<div class="ui tab" data-tab="third">
	<div class="ui fluid raised card" style="width: 75%;margin-left: auto;margin-right: auto;margin-bottom: 1rem;">
		<div class="content">
			<div class="ui grid">
				<div class="six wide column ui center aligned middle aligned" style="padding-top: 5rem;">
					<div class="ui medium image">
						<div class="ui large icon header">
							<i class="user circle massive grey icon"></i>
						</div>
					</div>
				</div>
				<div class="ten wide fluid column">
					<div class="ui image">
						<div class="ui large header center aligned brown">Personal Details</div>
						<div class="ui divider"></div>
						<br>
						<div class="ui grid center aligned">
							<div class="five wide column">
								<div class="ui medium header left aligned">
									Student Name
								</div>	
							</div>
							<div class="two wide column">
								<div class="ui small header center aligned">
									: 	
								</div>	
							</div>
							<div class="six wide column">
								<div class="ui medium header center aligned grey">
									{{ request.user.get_full_name }}
								</div>	
							</div>
							<div class="five wide column">
								<div class="ui medium header left aligned">
									Email ID	
								</div>	
							</div>
							<div class="two wide column">
								<div class="ui small header center aligned">
									: 	
								</div>	
							</div>
							<div class="six wide column">
								<div class="ui medium header center aligned grey">
									{{ request.user.email }}
								</div>	
							</div>
							<div class="five wide column">
								<div class="ui medium header left aligned">
									Qualities	
								</div>	
							</div>
							<div class="two wide column">
								<div class="ui small header center aligned">
									: 	
								</div>	
							</div>
							<div class="six wide column">
								<div class="ui tiny header center aligned grey">
									{{ applicationDetails.qualities }}
								</div>	
							</div>
							<div class="eleven wide column center aligned">
								<div class="ui icon info message">
									<i class="download icon"></i>
									<div class="content">
										<div class="header">
											Resume of the applicant 
										</div>
										{% if ResumeDetails %}
											<div class="ui center aligned" ><a href="{{ ResumeDetails.file.file.url }}" target="_blank">Click me to download resume</a></div>
										{% else %}
											<div class="ui center aligned" ><div style="color:slategrey;">You have not uploaded the Resume.</div></div>
										{% endif %}
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<br>
			<br>
			<div class="ui">
				<div class="ui large header center aligned brown">
					Applicant Details
				</div>
				<div class="ui divider"></div>
				<div class="ui left aligned"><h3><u>Project Details</u></h3></div>
				<div class="ui segment fluid raised card">
					<div class="ui middle aligned selection divided list" style="margin-bottom: 0px;">
						<div class="item" style="padding-bottom: 0px;padding-top: 0px;background-color: rgb(0,0,0,0.03);">
							<div class="ui grid center aligned divided" style="margin-top: 0px;">
								<div class="four wide column ui tiny header">PROJECT TITLE</div>
								<div class="four wide column ui tiny header">PROGRAMMING LANGUAGES</div>
								<div class="six wide column ui tiny header">DESCRIPTION</div>
								<div class="two wide column ui tiny header">GITHUB</div>
							</div>

						</div>
						<div class="ui divider" style="margin-bottom: 0px;"></div>
					</div>
					<div class="ui middle aligned selection divided list" style="margin-top: 0px;">
						{% for project in projectDetails %}
							<div class="item">
								<div class="ui grid ">
									<div class="column four wide center aligned middle aligned"><div class="ui medium ">{{ project.title }}</div></div>
									<div class="column four wide center aligned middle aligned">
										<div class="ui">
											{% for language in project.languages %}
											<a class="ui tiny {% get_color language %} inverted tag label">{{ language }}</a>
											{% endfor %}
										</div>
									</div>
									<div class="column six wide center aligned middle aligned">{{ project.description }}</div>
									<div class="column two wide center aligned middle aligned"><a href="{{ project.link }}">Link</a></div>
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
				<br>
				<div class="ui left aligned"><h3><u>Educational Details</u></h3></div>
				<div class="ui segment fluid raised card">
					<div class="ui middle aligned selection divided list" style="margin-bottom: 0px;">
						<div class="item" style="padding-bottom: 0px;padding-top: 0px;background-color: rgb(0,0,0,0.03);">
							<div class="ui grid center aligned divided" style="margin-top: 0px;">
								<div class="five wide column ui tiny header">EXAMINATION</div>
								<div class="five wide column ui tiny header ">BOARD</div>
								<div class="four wide column ui tiny header">PERCENTAGE or CGPA</div>
								<div class="two wide column ui tiny header">YEAR</div>
							</div>
						</div>
						<div class="ui divider" style="margin-bottom: 0px;"></div>
					</div>
					<div class="ui middle aligned selection divided list" style="margin-top: 0px;">
						{% for education in educationDetails %}
							<div class="item">
								<div class="ui grid">
									<div class="column five wide center aligned middle aligned"><div class="ui medium">{{ education.exam }}</div></div>
									<div class="column five wide center aligned middle aligned"><div class="ui medium ">{{ education.board }}</div></div>
									<div class="column four wide center aligned middle aligned"><div class="ui star yellow rating" data-rating="{% get_normalized_grades education.cgpa %}" data-max-rating="5"></div></div>
									<div class="column two wide center aligned middle aligned">{{ education.year }}</div>
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
			<br>
			<br>
			<div class="ui center aligned">
				<button class="ui right labeled large icon button blue" onclick="edit_student_detail()">
				  <i class="pencil alternate icon"></i>
				  Edit
				</button>
			</div>
		</div>
	</div>
</div>

{% endblock %}

{% block modals %}

<div id="application-details" class="ui long fullscreen modal">
	<i class="close icon"></i>
	<div class="header">
		My Profile
	</div>
	<div class="content">
		<form class="ui form" method="POST" id="application-detail" enctype="multipart/form-data">
			{% csrf_token %}
			<div class="ui grid">
				<div class="six wide column ui center aligned middle aligned" style="padding-top: 5rem;">
					<div class="ui medium image">
						<div class="ui large icon header">
							<i class="user circle massive grey icon"></i>
						</div>
					</div>
				</div>
				<div class="ten wide fluid column">
					<div class="ui image">

						<div class="ui large header center aligned brown">Application Details</div>
						<div class="ui divider"></div>
						<br>
						<div class="ui grid center aligned">
							<div class="six wide column">
								<div class="ui medium header left aligned">
									Student Name
								</div>	
							</div>
							<div class="two wide column">
								<div class="ui small header center aligned">
									: 	
								</div>	
							</div>
							<div class="eight wide column">
								<div class="ui medium header center aligned grey">
									{{ request.user.get_full_name }}
								</div>	
							</div>
							<div class="six wide column">
								<div class="ui medium header left aligned">
									Email ID	
								</div>	
							</div>
							<div class="two wide column">
								<div class="ui small header center aligned">
									: 	
								</div>	
							</div>
							<div class="eight wide column">
								<div class="ui medium header center aligned grey">
									{{ request.user.email }}
								</div>	
							</div>

							<div class="six wide column">
								<div class="ui medium header left aligned middle aligned">
									Qualities	
								</div>	
							</div>
							<div class="two wide column">
								<div class="ui small header center aligned">
									: 	
								</div>	
							</div>
							<div class="eight wide column">
								<div class="ui small header center aligned grey">
									{{ studentDetailForm.qualities }}
								</div>	
							</div>

							<div class="eleven wide column center aligned">
								<div class="ui icon info message" style="display: block;">
									<div class="content">
										<div class="header">
											Resume of the applicant
										</div>
									</div>
									<div class="content">
										<input type="file" name="filepond">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<br>
			<br>
			<div class="ui">
				<div class="ui large header center aligned brown">
					Applicant Details
				</div>
				<div class="ui divider"></div>
				
				<h3><u>Project Details</u></h3>
				<div class="ui segment fluid raised card">
					<div class="ui middle aligned selection divided list" style="margin-bottom: 0px;">
						<div class="item" style="padding-bottom: 0px;padding-top: 0px;background-color: rgb(0,0,0,0.03);">
							<div class="ui grid center aligned divided" style="margin-top: 0px;">
								<div class="four wide column ui tiny header">PROJECT TITLE</div>
								<div class="two wide column ui tiny header">PROGRAMMING LANGUAGES</div>
								<div class="five wide column ui tiny header">DESCRIPTION</div>
								<div class="three wide column ui tiny header">GITHUB</div>
								<div class="two wide column ui tiny header">ACTION</div>
							</div>

						</div>
						<div class="ui divider" style="margin-bottom: 0px;"></div>
					</div>
					
					<div class="ui middle aligned selection divided list" style="margin-top: 0px;" id="projectDetail-rows">
						{% for project in studentProjects %}
						<div class="item projectDetail-row" id="projectDetail-{{ forloop.counter0 }}" >
							<div class="ui grid">
								<div class="column four wide center aligned middle aligned">
									{{ project.title }}
								</div>
								<div class="column two wide center aligned middle aligned">

									<select name="projects-{{forloop.counter0}}-{{ project.languages.name }}" multiple="" class="ui fluid search dropdown">
										<option value="">Language used</option>
										
										{% for value, text in project.languages.field.choices %}
										
										  <option id="id_projects_{{ forloop.counter0 }}" name="projects-{{forloop.parentloop.counter0}}-{{ project.languages.name }}" value="{{ value }}" {% if value in selected_project_languagues|index:forloop.parentloop.counter0 %} selected {% endif %}>{{ text }}</option>
										{% endfor %}
									</select>
								</div>
								<div class="column five wide center aligned middle aligned">
									{{ project.description }}
								</div>
								<div class="column three wide center aligned middle aligned">
									{{ project.link }}
								</div>
								<div class="column two wide center aligned middle aligned">
									<button class="ui grey button" type="button" onclick="deleteProjectDetailForm(this,{% if project.id.value is not None %}true{% else %}false{% endif %})">
									  Remove
									</button>
								</div>
							</div>
							{% if project.id.value is not None %}
								{% for hidden in project.hidden_fields %}
						        	{{ hidden }}
						    	{% endfor %}
					    	{% endif %}
						</div>
						{% endfor %}
						{{ studentProjects.management_form }}
					</div>
				</div>
				<div class="ui container center aligned">
					<button class="ui secondary right labeled icon button" type="button" onclick="addProjectDetailForm()">
					  Add another
					  <i class="icon plus"></i>
					</button>
				</div>
				<br>
				<div class="ui center aligned"><h3><u>Educational Details</u></h3></div>
				<div class="ui segment fluid raised card">
					<div class="ui middle aligned selection divided list" style="margin-bottom: 0px;">
						<div class="item" style="padding-bottom: 0px;padding-top: 0px;background-color: rgb(0,0,0,0.03);">
							<div class="ui grid center aligned divided" style="margin-top: 0px;">
								<div class="three wide column ui tiny header">EXAMINATION</div>
								<div class="five wide column ui tiny header ">BOARD</div>
								<div class="three wide column ui tiny header">PERCENTAGE or CGPA</div>
								<div class="three wide column ui tiny header">YEAR</div>
								<div class="two wide column ui tiny header">ACTIONS</div>
							</div>

						</div>
						<div class="ui divider" style="margin-bottom: 0px;"></div>
					</div>
					<div class="ui middle aligned selection divided list" style="margin-top: 0px;" id="educationDetail-rows">
						{% for education in studentEducation %}
						<div class="item educationDetail-row" id="educationDetail-{{ forloop.counter0 }}">
							<div class="ui grid">
								<div class="column three wide center aligned middle aligned">
									{{ education.exam }}
								</div>
								<div class="column five wide center aligned middle aligned">
									{{ education.board }}
								</div>
								<div class="column three wide center aligned middle aligned">
									{{ education.cgpa }}
								</div>
								<div class="column three wide center aligned middle aligned">
									<div class="ui">
									  <div class="ui input left icon">
									    <i class="calendar icon"></i>
									    {{ education.year }}
									  </div>
									</div>
								</div>
								<div class="column two wide center aligned middle aligned">
									<button class="ui grey button" type="button" onclick="deleteEducationDetailForm(this,{% if education.id.value is not None %}true{% else %}false{% endif %})">
									  Remove
									</button>
								</div>
							</div>
							{% if education.id.value is not None %}
								{% for hidden in education.hidden_fields %}
						        	{{ hidden }}
						    	{% endfor %}
					    	{% endif %}
						</div>
						{% endfor %}
						{{ studentEducation.management_form }}
					</div>
				</div>
				<div class="ui container center aligned">
					<button class="ui secondary right labeled icon button" type="button" onclick="addEducationDetailForm()">
					  Add another
					  <i class="icon plus"></i>
					</button>
				</div>
			</div>
		</form>
	</div>
	<div class="actions">
		<button class="ui black button" type="reset" form="application-detail">
				Reset
		</button>
		<button class="ui positive right labeled icon button" type="submit" form="application-detail">
			Submit
			<i class="checkmark icon"></i>
		</button>
	</div>
</div>

{% for position in unappliedPositions %}
<div id="application-{{ position.id }}" class="ui long modal">
	<i class="close icon"></i>
	<div class="header">
		APPLICATION
	</div>
	<div class="content">
		<div class="ui grid">
			<div class="six wide column ui center aligned middle aligned" style="padding-top: 5rem;">
				<div class="ui medium image">
					<div class="ui large icon header">
						<i class="info circle massive grey icon"></i>
					</div>
				</div>
			</div>
			<div class="ten wide fluid column">
				<div class="ui image">

					<div class="ui large header center aligned brown">Project Details</div>
					<div class="ui divider"></div>
					<br>
					<div class="ui grid center aligned">
						<div class="six wide column">
							<div class="ui medium header left aligned">
								Project Name
							</div>	
						</div>
						<div class="two wide column">
							<div class="ui small header center aligned">
								: 	
							</div>	
						</div>
						<div class="five wide column">
							<div class="ui medium header center aligned grey">
								{{ position.title }}
							</div>	
						</div>
						
						<div class="six wide column">
							<div class="ui medium header left aligned">
								Faculty Name	
							</div>	
						</div>
						<div class="two wide column">
							<div class="ui small header center aligned">
								: 	
							</div>	
						</div>
						<div class="five wide column">
							<div class="ui medium header center aligned grey">
								{{  position.faculty.get_full_name }}
							</div>	
						</div>
						<div class="six wide column">
							<div class="ui medium header left aligned">
								Available positions
							</div>	
						</div>
						<div class="two wide column">
							<div class="ui small header center aligned">
								: 	
							</div>	
						</div>
						<div class="five wide column">
							<div class="ui medium header center aligned grey">
								{{ position.total_positions }}
							</div>	
						</div>

						<div class="six wide column">
							<div class="ui medium header left aligned">
								How to contact me?	
							</div>	
						</div>
						<div class="two wide column">
							<div class="ui small header center aligned">
								: 	
							</div>	
						</div>
						<div class="five wide column">
							<div class="ui medium header center aligned grey">
								{{ position.contact_details }}
							</div>	
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="ui grid">
			<div class="eight wide column">
				<div class="ui fluid card">
					<div class="content">
						<div class="ui center aligned header">Description</div>
					</div>
					<div class="content">
						{{ position.description }}
					</div>
				</div>
			</div>
			<div class="eight wide column">
				<div class="ui fluid card">
					<div class="ui middle aligned selection divided list" style="margin-bottom: 0px;">
						<div class="item" style="padding-bottom: 0px;padding-top: 0px;background-color: rgb(0,0,0,0.03);">
							<div class="ui grid center aligned divided" style="margin-top: 0px;">
								<div class="eight wide column ui tiny header">SUBJECT</div>
								<div class="eight wide column ui tiny header ">CGPA</div>
							</div>

						</div>
						<div class="ui divider" style="margin-bottom: 0px;"></div>
					</div>
					<div class="ui middle aligned selection divided list" style="margin-top: 0px;" >
						{% for requisite in position.get_requisites %}
							<div class="item">
								<div class="ui grid">
									<div class="column eight wide center aligned middle aligned">
										{{ requisite.Subject }}
									</div>
									<div class="column eight wide center aligned middle aligned">
										{{ requisite.cgpa }}
									</div>
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="actions">
		<div class="ui secondary right labeled deny icon button">
			Close
			<i class="times icon"></i>
		</div>
	</div>
</div>
{% endfor %}

{% for position in appliedPositions %}
<div id="application-{{ position.id }}" class="ui long modal">
	<i class="close icon"></i>
	<div class="header">
		APPLICATION
	</div>
	<div class="content">
		<div class="ui grid">
			<div class="six wide column ui center aligned middle aligned" style="padding-top: 5rem;">
				<div class="ui medium image">
					<div class="ui large icon header">
						<i class="info circle massive grey icon"></i>
					</div>
				</div>
			</div>
			<div class="ten wide fluid column">
				<div class="ui image">

					<div class="ui large header center aligned brown">Project Details</div>
					<div class="ui divider"></div>
					<br>
					<div class="ui grid center aligned">
						<div class="six wide column">
							<div class="ui medium header left aligned">
								Project Name
							</div>	
						</div>
						<div class="two wide column">
							<div class="ui small header center aligned">
								: 	
							</div>	
						</div>
						<div class="five wide column">
							<div class="ui medium header center aligned grey">
								{{ position.title }}
							</div>	
						</div>
						
						<div class="six wide column">
							<div class="ui medium header left aligned">
								Faculty Name	
							</div>	
						</div>
						<div class="two wide column">
							<div class="ui small header center aligned">
								: 	
							</div>	
						</div>
						<div class="five wide column">
							<div class="ui medium header center aligned grey">
								{{  position.faculty.get_full_name }}
							</div>	
						</div>
						<div class="six wide column">
							<div class="ui medium header left aligned">
								Available positions
							</div>	
						</div>
						<div class="two wide column">
							<div class="ui small header center aligned">
								: 	
							</div>	
						</div>
						<div class="five wide column">
							<div class="ui medium header center aligned grey">
								{{ position.total_positions }}
							</div>	
						</div>

						<div class="six wide column">
							<div class="ui medium header left aligned">
								How to contact me?	
							</div>	
						</div>
						<div class="two wide column">
							<div class="ui small header center aligned">
								: 	
							</div>	
						</div>
						<div class="five wide column">
							<div class="ui medium header center aligned grey">
								{{ position.contact_details }}
							</div>	
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="ui grid">
			<div class="eight wide column">
				<div class="ui fluid card">
					<div class="content">
						<div class="ui center aligned header">Description</div>
					</div>
					<div class="content">
						{{ position.description }}
					</div>
				</div>
			</div>
			<div class="eight wide column">
				<div class="ui fluid card">
					<div class="ui middle aligned selection divided list" style="margin-bottom: 0px;">
						<div class="item" style="padding-bottom: 0px;padding-top: 0px;background-color: rgb(0,0,0,0.03);">
							<div class="ui grid center aligned divided" style="margin-top: 0px;">
								<div class="eight wide column ui tiny header">SUBJECT</div>
								<div class="eight wide column ui tiny header ">CGPA</div>
							</div>

						</div>
						<div class="ui divider" style="margin-bottom: 0px;"></div>
					</div>
					<div class="ui middle aligned selection divided list" style="margin-top: 0px;">
						{% for requisite in position.get_requisites %}
							<div class="item" >
								<div class="ui grid">
									<div class="column eight wide center aligned middle aligned">
										{{ requisite.Subject }}
									</div>
									<div class="column eight wide center aligned middle aligned">
										{{ requisite.cgpa }}
									</div>
								</div>
							</div>
						{% endfor %}
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="actions">
		<div class="ui secondary right labeled deny icon button">
			Close
			<i class="times icon"></i>
		</div>
	</div>
</div>
{% endfor %}

{% endblock %}


{% block scripts %}

$(document).ready(function() {

	window.projectDetailformInst = $('.projectDetail-row:last').clone(true).get(0);
	window.educationDetailformInst = $('.educationDetail-row:last').clone(true).get(0);

	$('#time-progress').progress();
	$(".rating").rating('disable');
	$('.menu .item').tab();
	$('.ui.calendar').calendar({
    	type: 'date'
  	});
	$( function() {
		$( "#sortable" ).sortable();
		$( "#sortable" ).disableSelection();
	});
	$('#example').DataTable({
		columnDefs: [ { orderable: false, targets: [4] } ],
	});
	$('.ui.dropdown').dropdown();
	FilePond.setOptions({
	    server: {
	        url: '/fp',
	        process: '/process/',
	        patch: '/patch/',
	        revert: '/revert/',
	        fetch: '/fetch/?target=',
	        load: '/load/?id='
	    }
	});
	window.pond = FilePond.create( document.querySelector('input[type="file"]') ,
	{
		maxFiles: 1,
	    files: [
	    {% if ResumeDetails %}
	     {
	            // the server file reference
	            source: '{{ ResumeDetails.file.upload_id }}',

	            // set type to local to indicate an already uploaded file
	            options: {
	                type: 'local'
	            }
	        }
	      {% endif %}
	    ]
} );

	sync_total_forms();
	{% if messages %}
		{% for message in messages %}
			$('body')
			.toast({
			  class: "error",
			  title: "Error logging in",
			  displayTime: 5000,
			  closeIcon: true,
			  position: "top center",
			  showIcon: "exclamation",
			  message: "{{ message }}",
			});
		{% endfor %}
	{% endif %}
} );

function show_project_detail(id){
	$(".modals #application-"+id).modal('show');
}

function edit_student_detail(){
	$(".modals #application-details").modal('show');
}

function sync_total_forms(){
	$('#id_projects-TOTAL_FORMS').val($('.projectDetail-row').length);
	$('#id_education-TOTAL_FORMS').val($('.educationDetail-row').length);
}


function addProjectDetailForm(){
	var row = $(window.projectDetailformInst).clone(true);
	projectDetailCount = $('#id_projects-TOTAL_FORMS').val();
	if(projectDetailCount == 0){
		$('#projectDetail-rows').html(row);
	}
	else{
		$(row).attr('id','projectDetail-'+String(projectDetailCount)).attr('class','item projectDetail-row').insertAfter($('.projectDetail-row:last'));
		var forms = $('.projectDetail-row');
	}
	$(row).find('.ui.dropdown').dropdown();
	updateProjectDetailIndex();
	$('#id_projects-TOTAL_FORMS').val(parseInt(projectDetailCount)+1);
	return false;
}

function updateProjectDetailIndex(){
	$('.projectDetail-row').each(function(index){
		$(this).attr('id','projectDetail-'+String(index));
		inputs = $(this).find('input');
		inputs[0].id = 'id_projects-'+String(index)+'-title';
		inputs[0].name = 'projects-'+String(index)+'-title';
		inputs[2].id = 'id_projects-'+String(index)+'-link';
		inputs[2].name = 'projects-'+String(index)+'-link';
		$(this).find('textarea').attr('id','id_projects-'+String(index)+'-description');
		$(this).find('textarea').attr('name','projects-'+String(index)+'-description');
		$(this).find('select').attr('name','projects-'+String(index)+'-languages');

		options = $(this).find('option');
		for (i = 0; i < options.length; i++){
			if(options[i].id != ""){
				options[i].name = 'projects-'+String(index)+'-languages"';
			}
		}
		
		hidden_inputs = $(this).find('input[type=hidden]');
		if(hidden_inputs.length !=0){
			 hidden_inputs[0].id = 'id_projects-'+String(index)+'-student';
			 hidden_inputs[0].name = 'projects-'+String(index)+'-student';
			 hidden_inputs[1].id = 'id_projects-'+String(index)+'-id';
			 hidden_inputs[1].name = 'projects-'+String(index)+'-id';
		}
	});
}

function deleteProjectDetailForm(btn,filled_row){
	$(btn).parents('.projectDetail-row').remove();
	if(filled_row){
		count = $('#id_projects-INITIAL_FORMS').val();
		$('#id_projects-INITIAL_FORMS').val(parseInt(count)-1);
	}
	var forms = $('.projectDetail-row');
	$(forms).each(function(index){
		$(this).attr('id','projectDetail-'+String(index));
	});
	projectDetailCount = $('#id_projects-TOTAL_FORMS').val();
	$('#id_projects-TOTAL_FORMS').val(parseInt(projectDetailCount)-1);
	updateProjectDetailIndex();
	return false;
}

function addEducationDetailForm(){
	var row = $(window.educationDetailformInst).clone(true);
	educationDetailFormCount = $('#id_education-TOTAL_FORMS').val();
	if(educationDetailFormCount == 0){
		$('#educationDetail-rows').html(row);
	}
	else{
		$(row).attr('id','educationDetail-'+String(educationDetailFormCount)).attr('class','item educationDetail-row').insertAfter($('.educationDetail-row:last'));
		var forms = $('.educationDetail-row');
	}
	$('#id_education-TOTAL_FORMS').val(parseInt(educationDetailFormCount)+1);
	updateEducationDetailIndex();
	return false;
}

function updateEducationDetailIndex(){
	$('.educationDetail-row').each(function(index){
		$(this).attr('id','educationDetail-'+String(index));
		inputs = $(this).find('input');
		inputs[0].id = 'id_education-'+String(index)+'-board';
		inputs[0].name = 'education-'+String(index)+'-board';
		inputs[1].id = 'id_education-'+String(index)+'-cgpa';
		inputs[1].name = 'education-'+String(index)+'-cgpa';
		inputs[2].id = 'id_education-'+String(index)+'-year';
		inputs[2].name = 'education-'+String(index)+'-year';

		$(this).find('select').attr('id','id_education-'+String(index)+'-exam');
		$(this).find('select').attr('name','education-'+String(index)+'-exam');

		hidden_inputs = $(this).find('input[type=hidden]');
		if(hidden_inputs.length !=0){
			 hidden_inputs[0].id = 'id_education-'+String(index)+'-student';
			 hidden_inputs[0].name = 'education-'+String(index)+'-student';
			 hidden_inputs[1].id = 'id_education-'+String(index)+'-id';
			 hidden_inputs[1].name = 'education-'+String(index)+'-id';
		}
	});
}

function deleteEducationDetailForm(btn,filled_row){
	$(btn).parents('.educationDetail-row').remove();
	if(filled_row){
		count = $('#id_education-INITIAL_FORMS').val();
		$('#id_education-INITIAL_FORMS').val(parseInt(count)-1);
	}
	educationDetailFormCount = $('#id_education-TOTAL_FORMS').val();
	$('#id_education-TOTAL_FORMS').val(parseInt(educationDetailFormCount)-1);
	updateEducationDetailIndex();
	return false;
}

function submit_priorities(){
	$.ajax({
          type: 'POST',
          url: '{% url "gap:updatePriorities" %}',
          data: {
            user: 'student',
            priorities: JSON.stringify({'priority_list':$('.applied-project-id').map(function(){return $(this).val()}).get()}),
            csrfmiddlewaretoken: '{{ csrf_token }}',
        },
        success: function (json) {
            $('body')
			.toast({
			  class: "success",
			  title: "Priority Updation",
			  displayTime: 3000,
			  closeIcon: true,
			  position: "top center",
			  showIcon: "check",
			  message: json["successMessage"],
			  className: {
			        toast: 'ui icon message'
			    }
			});
        },
        error: function (error) {
        error_message = error["responseJSON"]["detail"];
        $('body')
			.toast({
			  class: "red",
			  title: "Error updating priorities",
			  displayTime: 5000,
			  closeIcon: true,
			  position: "top center",
			  showIcon: "exclamation",
			  message: error_message,
			  className: {
			        toast: 'ui message'
			    }
			});
        }
    });
}
{% endblock %}