<!--TA Selector Off Canvas-->
<div
    class="offcanvas offcanvas-start"
    data-bs-scroll="true"
    data-bs-backdrop="false"
    tabindex="-1"
    id="offcanvasTASelector"
    aria-labelledby="offcanvasTASelector"
>
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasTASelector">{{ current_semester.time }} {{ current_semester.year }} TA Selector</h5>
        <button
            type="button"
            class="btn-close text-reset"
            data-bs-dismiss="offcanvas"
            aria-label="Close"
				title="Select available TAs on a new window"
        ></button>
    </div>
    
    <!--Body of this Canvas -->
    <div class="offcanvas-body">

	<!-- Check if there is a single TA with an incomplete profile -->
	{% if ta_incomplete %}
	<button class="alert alert-warning">There is at least one TA with an incomplete profile!</button>
	{% endif %}
	
        <!-- TA List Collapsed-->
	<form method="post" action="{% url 'lo_generate_schedule' %}">
	    {% csrf_token %}
            <div class="accordion accordion-flush" id="accordionTAselector">
		
		<!-- Uncontracted TA's -->
		<div class="accordion-item">
		    <h2 class="accordion-header" id="flush-headingUncontractTA">
			<button
			    class="accordion-button collapsed"
			    type="button"
			    data-bs-toggle="collapse"
			    data-bs-target="#flush-UncontractTA"
			    aria-expanded="false"
			    aria-controls="flush-UncontractTA"
				 title="Expand list of uncontracted TAs"
			>
			    Uncontracted TA's
			</button>
		    </h2>
		    <div
			id="flush-UncontractTA"
			class="accordion-collapse collapse"
			aria-labelledby="flush-headingUncontractTA"
			data-bs-parent="#accordionTAselector"
		    >
			<div class="accordion-body px-2 pt-1 pb-3">
			    <!--Uncontract TA list-->
			    <ul class="list-group list-group-flush">
				{% for ta in tas %}
				{% if not ta.contracted %}
				<li class="list-group-item">
				    <div class="form-check">
					<input
					    class="form-check-input"
					    type="checkbox"
					    value="{{ ta.student_id }}"
					    id="{{ ta.student_id }}"
					    name="checks[]"
					/>
					<label class="form-check-label w-100" for="{{ ta.student_id }}">
					    {{ ta.first_name }} {{ ta.last_name }}
					</label>
				    </div>
				</li>
				{% endif %}
				{% endfor %}
			    </ul>
			</div>
		    </div>
		</div>
		<!-- End Uncontracted TA's -->
		
		<!--Contract TAs-->
		<div class="accordion-item">
		    <h2 class="accordion-header" id="flush-headingContractTA">
			<button
			    class="accordion-button collapsed"
			    type="button"
			    data-bs-toggle="collapse"
			    data-bs-target="#flush-ContractTA"
			    aria-expanded="false"
			    aria-controls="flush-ContractTA"
				 title="Expand list of contracted TAs"
			>
			    Contracted TA's
			</button>
		    </h2>
		    <div
			id="flush-ContractTA"
			class="accordion-collapse collapse"
			aria-labelledby="flush-headingContractTA"
			data-bs-parent="#accordionTAselector"
		    >
			<!-- TA lists Collapsed-->
			<div class="accordion-body px-2 pt-1 pb-3">
			    <!--Contract TA list-->
			    {% for ta in tas %}
			    {% if ta.contracted %}
			    <ul class="list-group list-group-flush">
				<li class="list-group-item">
				    <div class="form-check">
					<input
					    class="form-check-input"
					    type="checkbox"
					    value="{{ ta.student_id }}"
					    id="{{ ta.student_id }}"
					    name="checks[]"
					    checked
					/>
					<label class="form-check-label w-100" for="checks[]">
					    {{ ta.first_name }} {{ ta.last_name }}
					</label>
				    </div>
				</li>
				{% endif %}
				{% endfor %}
			    </ul>
			</div>
		    </div>
		</div>
		<!-- End Contracted TA's -->

            </div>
	    <input type="hidden" name="year" value="{{ current_semester.year }}">
	    <input type="hidden" name="time" value="{{ current_semester.time }}">
	    <input type="hidden" name="time" value="{{ current_semester.time }}">
		<!-- End Greater TA list -->
	    <br>
	    
		<p class="mt-3">How prioritized will TA's with proper experience be?</p>
		<!-- Experience priority selection -->
		<input
			class="form-check-input"
			type="radio"
			value="low"
			id="low"
			name="priority"
		/>
		<label class="form-check-label w-100" for="priority">
			Low Priority
		</label>

		<input
			class="form-check-input"
			type="radio"
			value="high"
			id="high"
			name="priority"
		/>
		<label class="form-check-label w-100" for="priority">
			High Priority
		</label>

		<input
			class="form-check-input"
			type="radio"
			value="none"
			id="none"
			name="priority"
			checked
		/>
		<label class="form-check-label w-100" for="priority">
			No Priority
		</label>

		<br><br>
		<button class="btn btn-primary" id="possible-spinner" onclick="replace_with_spinner(this)" type="submit">Submit</button>
		<p class="mt-3">This will generate a new schedule version!</p>
	</form>

    </div>
    <!-- End of Canvas Body -->
    
</div>
<!-- End of Greater Canvas Selector -->
