<div class="col d-flex flex-column flex-shrink-0 bg-light">

    {% include 'laborganizer/ta_management/horizontal_tool_bar.html' %}
    {% include 'laborganizer/message.html' %}
    
    <!-- Main content wrap -->
    <div style="overflow-y: scroll;">
	<div class="m-5 text-start" >
	    <h3>All TA's</h3>
	</div>
		
	{% if tas %}
	
	<div class="mx-5">
	    
	    <div class="accordion" id="accordionTA">
		
		{% for ta in tas %}

		{% if ta.student_id %}
		
		<div class="accordion-item">
		    
		    <h2 class="accordion-header" id="heading:{{ forloop.counter }}">
			<button
			    class="accordion-button collapsed"
			    type="button"
			    data-bs-toggle="collapse"
			    data-bs-target="#collapse-{{ forloop.counter }}"
			    aria-expanded="false"
			    aria-controls="collapse-{{ forloop.counter }}"
			>
			    <div class="col-4">
				{{ ta.first_name }} {{ ta.last_name }}
			    </div>
			    <div class="col-4 text-center">
				{% if ta.has_assigned_semesters %}
				<strong>Assigned to: </strong>
				{{ ta.get_semesters }}
				{% else %}
				TA is not assigned to any semesters!
				{% endif %}
			    </div>
			    <div class="mx-5 col text-end">
				{% for hold_object in holds %}
				{% for hold in hold_object %}
				{% if hold.ta == ta %}
				
				{% if hold.incomplete_profile %}
				<span class="badge bg-danger">incomplete profile</span>
				{% endif %}
				{% if hold.update_availability %}
				<span class="badge bg-warning">update availability</span>
				{% endif %}
				{% if hold.update_experience %}
				<span class="badge bg-warning">update experience</span>
				{% endif %}
				
				{% endif %}
				{% endfor %}
				{% endfor %}
			    </div>
			</button>
		    </h2>
		    
		    <div
			id="collapse-{{ forloop.counter }}"
			class="accordion-collapse collapse"
			aria-labelledby="heading:{{ forloop.counter }}"
			data-bs-parent="#accordionTA"
		    >
			
			<div class="accordion-body">
			    <div class="container">
				<div class="row">
				    <div class="col-4">
					<strong>Year: </strong>{{ ta.year }}
				    </div>
				    <div class="col-4">
					<strong>ID: </strong>{{ ta.student_id }}
				    </div>				
				    <div class="col-4">
					<strong>Contracted: </strong>
					<input type="checkbox" onclick="flip_contract_status({{ ta.student_id }})"
					{% if ta.contracted %}
					checked
					{% endif %}>
				    </div>		
				</div>
				<hr>
				<div class="mt-3 row">
				    <div class="col-6">
					<strong>
					    Semesters
					    <span title="These are the semesters this TA is assigned to">
						<svg class="bi me-2" width="16" height="16">
						    <use xlink:href="#question-mark"></use>
						</svg>
					    </span>

					</strong>
					<form method="post" action="{% url 'lo_update_ta_semesters' %}">
					    {% csrf_token %}
					    {% for semester in all_semesters %}
					    <div class="form-check form-check-inline">
					    <input class="form-check-input" type="checkbox" id="{{ semester }}-{{ forloop.counter }}" name="selected_semesters[]" value="{{semester}}"
						   {% for assignment in ta.get_semester_objects %}
						   {% if assignment|upper == semester %}
						   checked
						   {% endif %}
						   {% endfor %}>
					    <label class="form-check-label" for="selected_semesters[]">{{ semester }}</label>
					    </div>
					    {% endfor %}
					    <br>
					    <button class="btn btn-primary" type="submit" name="submit" value="{{ ta.student_id }}">Update</button>
					</form>
				    </div>
				    <div class="col-6">
					<strong>
					    Class times for {{ current_semester.time }}{{ current_semester.year }}
					    <span title="These are the times this TA is unavailable">
						<svg class="bi me-2" width="16" height="16">
						    <use xlink:href="#question-mark"></use>
						</svg>
					    </span>
					</strong>
					<table class="table table-striped">
					    <thead>
						<tr>
						    <th scope="col">#</th>
						    <th scope="col">Days</th>
						    <th scope="col">Start Time</th>
						    <th scope="col">End Time</th>
						</tr>
					    </thead>
					    {% for class, values in ta.get_availability.items %}
					    <tr>
						<th scope="row">{{ class }}</td>
						    {% for key, value in values.items %}
						    <td>
							{% if key == 'days' %}
							{% for day in value %}
							{{ day }}
							{% endfor %}
							{% else %}
							{{ value }}
							{% endif %}
						    </td>
						{% endfor %}
						{% endfor %}
					    </tr>
					</table>
				    </div>
				</div>
			    </div>
			    <form method="post" action="{% url 'lo_allow_ta_edit' %}">
				{% csrf_token %}
				<button class="btn btn-primary" type="submit" name="ta" value="{{ ta.student_id }}">
				    Allow Editing
				    <span title="Allow this TA to edit their own information. This will set an 'incomplete profile' hold on their account">
					<svg class="bi me-2" width="16" height="16">
					    <use xlink:href="#question-mark"></use>
					</svg>
				    </span>				    
				</button>
			    </form>
			</div>
			
		    </div>
		    
		</div>
		{% endif %}
		
		{% endfor %}
		
	    </div>
	    
	</div>	
	
	{% else %}

	<div class="">
	    No TA's to display!
	</div>
	
	{% endif %}

	{% if uninitialized_tas %}
	<p>There is at least one TA with an uninitialized profile, thus they are not appearing here!</p>
	{% endif %}
	
	<a class="btn btn-primary m-5" href="{% url 'eu_upload' %}">Click here to upload a new roster of TA's</a>
    </div>

</div>
