{% load static %}

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

    <!--Vertical Tool bar-->
    <div
        class="m-0 p-0 bg-white d-flex justify-content-between align-items-center border-bottom w-100"
        style="min-height: 72px"
    >

        <!--Lab Title-->

	    <div class="container">
		<div class="row fs-4 mt-3">
		    <div class="col-5 text-start">
			<p class="fw-bold">{{ current_semester.time }}{{ current_semester.year }}</p>
		    </div>
		    <div class="col-2 text-end">
			<form method="post" action="{% url 'lo_propogate_schedule' %}">
			    {% csrf_token %}
			    <input type="hidden" name="version" value="{{ template_schedule.version_number }}">
			    <input type="hidden" name="year" value="{{ current_semester.year }}">
			    <input type="hidden" name="time" value="{{ current_semester.time }}">
			    <button class="btn btn-primary" id="possible-spinner" onclick="replace_with_spinner(this)" title="Propogate version {{ template_schedule.version_number }} to the live schedule!">Propogate</button>
			</form>
		    </div>
		    <div class="col-5 text-end">
			<form method="post" action="{% url 'lo_select_schedule_version' %}">
			    {% csrf_token %}
			    <div class="input-group mb-3">
				<span class="input-group-text">version</span>
				<select name="version_number" class="form-select" required>
				    <option selected>
					{{ template_schedule.version_number }}
				    </option>
				    {% for version in schedule_versions reversed %}
				    {% if version != template_schedule.version_number %}
				    <option value="{{ version }}">{{ version }}</option>
				    {% endif %}
				    {% endfor %}
				</select>
				<input class="btn btn-outline-secondary" title="Switch to selected version of schedule" type="submit" value="Go">
				<input name="semester_year" type="hidden" value="{{ current_semester.year }}">
				<input name="semester_time" type="hidden" value="{{ current_semester.time }}">
			    </div>
			</form>
		    </div>
		</div>
	    </div>

        <!--Right Side tools-->
        <div class="d-flex flex-row px-2">
	    <!--Filter-->
	    <form class="container-fluid">
		<div class="input-group">
		    <span class="input-group-text bg-white">
			<svg class="bi" width="16" height="16">
			    <use xlink:href="#filter"></use>
			</svg>
		    </span>
		    <input
			class="form-control me-2"
			type="search"
			placeholder="Type to filter..."
			aria-label="filter"
			onkeyup="filterFuntion()"
			id = "tablefilter"
		    />
		</div>
	    </form>
        </div>

    </div>

    <!--Table of Lab list-->
    {% include 'laborganizer/message.html' %}    
    <div class="overflow-auto">
        <table
	    class="table table-hover table-bordered text-center align-middle overflow-auto"
        >
	    <thead>
		<tr>
		    <!--Table headers-->
		    <th class="sortBtn" title="Sort by index" scope="col" onclick="sortTable(-1)">#</th>
		    <th class="sortBtn" title="Sort by subject" scope="col" onclick="sortTable(0)">Subject</th>
		    <th class="sortBtn" title="Sort by catalog ID" scope="col" onclick="sortTable(1)">Catalog ID</th>
		    <th class="sortBtn" title="Sort by section" scope="col" onclick="sortTable(2)">Section</th>
		    <th class="sortBtn" title="Sort by course ID" scope="col" onclick="sortTable(3)">Course ID</th>
		    <th class="sortBtn" title="Sort by start Time" scope="col" onclick="sortTable(4)">Start Time</th>
		    <th class="sortBtn" title="Sort by end Time" scope="col" onclick="sortTable(5)">End Time</th>
		    <th class="sortBtn" title="Sort by days" scope="col" onclick="sortTable(6)">Days</th>
		    <th class="sortBtn" title="Sort by instructor" scope="col" onclick="sortTable(7)">Instructor</th>
		    <th class="sortBtn" title="Sort by TA" scope="col" onclick="sortTable(8)">TA</th>
		    <th scope="col">Switch</th>
		</tr>
	    </thead>
	    {% if labs %}
	    <tbody id="labTable">
		{% for lab in labs %}
		<tr>
		    <!--Table rows-->
		    <th scope="row">{{ forloop.counter }}</th>
		    <td>{{ lab.subject }}</td>
		    <td>{{ lab.catalog_id }}</td>
		    <td>{{ lab.section }}</td>
		    <td>{{ lab.course_id }}</td>
		    <td>{{ lab.start_time }}</td>
		    <td>{{ lab.end_time }}</td>
		    <td>{{ lab.get_days }}</td>
		    <td>{{ lab.instructor }}</td>
		    <td>
			<!--More info button-->
			<div class="d-grid">
			    <form method="post" id="class_{{ forloop.counter }}" action="{% url 'lo_assign_to_template' %}">
				{% csrf_token %}
				<select onchange="to_template(this.value, {{ lab.course_id }}, '{{ current_semester.time }}', {{ current_semester.year }}, {{ template_schedule.version_number }})" class="btn btn-outline-dark border-0 form-select">
				    <option selected>
					{% if template_schedule %}

					{% for assignment in template_schedule.assignments.all %}
					{% if assignment.lab == lab %}
					{{ assignment.ta.first_name }} {{ assignment.ta.last_name }}
					{% endif %}
					{% endfor %}

					{% else %}

  					    {% if labs.assigned_ta != None %}
					        {{ lab.assigned_ta }}
  					    {% else %}
					        Unassigned
					    {% endif %}

					{% endif %}
				    </option>
				    {% for ta in tas %}
				    <option value="{{ ta.student_id }}">{{ ta.first_name }} {{ ta.last_name }}</option>
				    {% endfor %}
				</select>
			    </form>
			</div>
		    </td>
		    <td>
			<!--Run switch button-->
			<div class="d-grid">
			    <button
				type="button"
				class="btn btn-outline-dark border-0 switch-btn"
				type="button"
				class="btn btn-outline-dark border-0 switch-btn"
				data-bs-toggle="offcanvas"
				id="{{ lab.course_id }}"
				data-bs-target="#offcanvasOperations"
				aria-controls="offcanvasOperations"
			    >
				<svg class="bi" width="16" height="16">
				    <use xlink:href="#operation"></use>
				</svg>
			    </button>
			</div>
		    </td>
		</tr>
		{% endfor %}

	    </tbody>
	    {% else %}
	    <strong>No labs to display!</strong>
	    {% endif %}
        </table>

    </div>

    <script src="{% static 'laborganizer/assign_to_template.js' %}"></script>
		<script src="{% static 'laborganizer/dashboard.js' %}"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

</div>
