<!--Semester Off Canvas-->
<div
    class="offcanvas offcanvas-start"
    data-bs-scroll="true"
    data-bs-backdrop="false"
    tabindex="-1"
    id="offcanvasSemester"
    aria-labelledby="offcanvasSemester"
>
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasHistory">Semester Select</h5>
        <button
            type="button"
            class="btn-close text-reset"
            data-bs-dismiss="offcanvas"
            aria-label="Close"
            title="Select a semester on a new window"
        ></button>
    </div>

    {% if semester_options %}

    <form method="post" action="{% url 'lo_select_semester' %}">
	{% csrf_token %}
	<div class="offcanvas-body">
            <div class="d-flex flex-column align-items-center text-center p-3">

		<label for="selected_semester"><span class="fs-5 m-2">Semester</span></label>
		<select class="form-select" name="selected_semester" id="selected_semester" aria-label="Year select" required>
		    {% for semester in semester_options %}
		    <option value="{{ semester }}">{{ semester }}</option>
		    {% endfor %}
		</select>
		
		<!--Submit button-->
		<div class="d-grid w-100 m-4">
		    <input type="submit" class="btn btn-primary"></input>
		</div>
		
            </div>

	</div>
    </form>

    {% else %}

    <p class="m-3">There are no semesters to choose from! You can create one from the <i>Semester Management</i> tab!</p>

    {% endif %}
</div>
